Forum Moderators: not2easy
I'm putting a horizontal nav bar on a site, and I'm having trouble getting the LI elements to center inside the UL.
The UL is inside a container div called #menu_bar, and the UL itself is centering fine relative to that. The LIs however are in different alignments in each browser I've looked at and none are in the center, which is making the nav bar look off. Here's the relevent CSS:
#menu_bar ul{
margin-left:auto;
margin-right:auto;
margin-top:15px;
width:75%;
min-width:650px;
text-align:center;
}
* html #menu_bar ul{
margin-top:5px;
width:82.5%;
}
#menu_bar li{
display:inline;
position:relative;
list-style-type:none;
padding-left:22px;
padding-right:22px;
padding-top:3px;
padding-bottom:3px;
margin-left:-4px;
color:#000000;
background-color:#9FD15E;
}
* html #menu_bar li{
padding-right:21px;
}
#menu_bar li.active{
border:1px solid #000000;
}
#menu_bar a{
font-size:1em;
color:#000000;
background-color:#9FD15E;
text-decoration:none;
font-family:arial, sans-serif;
}
Can anyone spot my mistakes? Thankyou in advance!
I'm not sure I understand what's not aligning, I pasted this code and it looked fine to me, can you give us some more details?
Suzy
<added>
PS: just saw something.. in FireFox it's not truly centered.. will take another look, sorry, meanwhile still let us know if it's sorted
ta!
in FireFox it's not truly centered.
Firefox's default property for clearing marker box space is padding, whereas IE uses margin. You've explicitly set the margins on the UL, so IE's default margins are not being applied, and since IE doesn't use any default padding on lists, the layout displays properly centered in that browser.
But since there is no explicit padding set on the UL, FF is still applying it's default padding to the list, and this is responsible for the slight off-center-ness of the content.
You can add padding:0; to the UL styles and it knocks it into line.
I would go a step further, though, and recommend zeroing out both margin and padding on everything, as in...
*{margin:0;padding:0;}
This removes ALL the default paddings and margins and gives you a clean slate to work with where the only margins and padding that come into play are the ones you explicitly set. Otherwise, it's too much of a craps-shoot over what any given browser will do with those properties.
At the very least, you can set all of your list margins and padding to zero...
ul, ol, li{margin:0;padding:0;}
...and get control over them.
cEM
