css keeps moving my menus.. wth ???

[ag3nt42]

I have a menu setup using css(tableless) and For some reason when I hover of the element..

 

its kicks down all the other elements. as if it just added a few line breaks into the mix...

 

I checked and doubled checked the CSS and there is no added code that should be making it do that.. So i'm assuming it must be something thats set already with default..

 

so here is my code:  (plz let me know how I can fix this problem.)

 

CSS:

/************/
/* MENU CSS */
/************/

.menu {
margin:auto;
text-align:center;
display:block;
padding:0;
margin:0;
list-style-type:none;
}
.Operating a:hover {
background-image:url('menu/imgs/buttonOver.png');
background-repeat:no-repeat;
padding:0;
margin:0;
width:193px;
height:30px;
cursor:hand;

}
.Operating{
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;	
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}
.Rooms a:hover {
background-image:url('menu/imgs/buttonOver.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;
}
.Rooms {
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;
}
.Equipment a:hover {
background-image:url('menu/imgs/buttonOver.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;
}
.Equipment {
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;
}
.Services a:hover {
background-image:url('menu/imgs/buttonOver.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}
.Services {
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}
.ClientType a:hover {
background-image:url('menu/imgs/buttonOver.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;
}
.ClientType {
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;
}
.ClientInfo a:hover {
background-image:url('menu/imgs/buttonOver.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;
}
.ClientInfo {
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;
}
.CatsDepart a:hover {
background-image:url('menu/imgs/ButtonOver.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}
.CatsDepart {
background-image:url('menu/imgs/Button.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}
.Employees a:hover {
background-image:url('menu/imgs/buttonOver.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}
.Employees {
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}
.Jobz a:hover {
background-image:url('menu/imgs/buttonOver.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}
.Jobz {
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}
.Server a:hover {
background-image:url('menu/imgs/buttonOver.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}
.Server {
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}
.Database a:hover {
background-image:url('menu/imgs/buttonOver.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}
.Database {
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}
.Back a:hover {
background-image:url('menu/imgs/buttonOver.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}
.Back {
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}

 

 

html:

<div>
<ul class='menu'>

<li class='Operating'><a href='../Edits/OperatingHrs.php' target='EditFrame'>Operating Hours</a></li>
<br /><br />
<li class='Rooms'><a href='../Edits/Rooms.php' target='EditFrame'>Rooms</a></li>
<br /><br />
<li class='Equipment'><a href='../Edits/Equipment.php' target='EditFrame'>Equipment</a></li>
<br /><br />
<li class='Services'><a href='../Edits/Services.php' target='EditFrame'>Services</a></li>
<br /><br />
<li class='ClientType'><a href='../Edits/ClientTypes.php' target='EditFrame'>Client Types</a></li>
<br /><br />
<li class='ClientInfo'><a href='../Edits/Clients.php' target='EditFrame'>Client Information</a></li>
<br /><br />
<li class='CatsDepart'><a href='../Edits/CategoriesNDepartments.php' target='EditFrame'>Categories</a></li>
<br /><br />
<li class='Employees'><a href='../Edits/Employee.php' target='EditFrame'>Employees</a></li>
<br /><br />
<li class='Jobz'><a href='../Edits/JobAssignment.php' target='EditFrame'>Job Assignments</a></li>
<br /><br />
<li class='Server'><a href='../Edits/serverinfo.php' target='EditFrame'>Server Information</a></li>
<br /><br />
<li class='Database'><a href='../Edits/dbinfo.php' target='EditFrame'>Database Information</a></li>
<br /><br />
<li class='Back'><a href='../../schedule.php' target='_parent'>Back to Schedule</a></li>

</ul>
</div>

[TheFilmGod]

Your html is not semantic. Why are you using

<br />

? Use css margins.

 

I encourage you to read a css book and pause your website development process. I have read some of your posts on the css help thread and you literally had everything incorrect. I don't want to sound mean, but in simple words, "you do not know what the hell is going on in css." It's the truth, and anyone who understand css as well as me, would be able to understand what I mean if they read your posts:

 

http://www.phpfreaks.com/forums/index.php/topic,208178.0.html

 

http://www.phpfreaks.com/forums/index.php/topic,208292.0.html

[haku]

The only possible thing I can see is that you have added margin and padding statements to the hoverstate that weren't there in the initial state. But without a link I can't really help with your problem.

 

As a side point, I'll offer a way to cut down on a LOT of your CSS code, to make it easier to manage. You have replicated code many times, and you don't need to do that.

 

First off, you don't need to replicate code in the hover statements. For example, this:

 

.Operating a:hover {
background-image:url('menu/imgs/buttonOver.png');
background-repeat:no-repeat;
padding:0;
margin:0;
width:193px;
height:30px;
cursor:hand;

}
.Operating{
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;	
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}

 

can (and should) be this:

 

.Operating{
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;	
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}.Operating a:hover {
background-image:url('menu/imgs/buttonOver.png');
padding:0;
margin:0;
}

 

Note that I switched the :hover statement after the initial statement. I don't think this will make a difference, I just wanted to make sure that you didn't miss that point.

 

And secondly, if you are going to have the same declaration for multiple items, you can combine them. So this:

 

.Operating{
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;	
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}

.Rooms {
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;
}

.Equipment {
background-image:url('menu/imgs/button.png');
background-repeat:no-repeat;
width:193px;
height:30px;
cursor:hand;
list-style-type:none;
}

 

Can become this:

 

.Operating, .Rooms, .Equipment{
background-repeat:no-repeat;	
width:193px;
height:30px;
cursor:hand;
list-style-type:none;

}

.Operating{
background-image:url('menu/imgs/button.png');
}

.Rooms {
background-image:url('menu/imgs/button.png');
}

.Equipment {
background-image:url('menu/imgs/button.png');
}

 

You should really try to not replicate code. It makes it easier to make mistakes as you change things over time, and increases the amount of data that needs to be downloaded. By combining identical blocks of code, it becomes easier to maintain, and speeds up your download times.