Horizontal Nav Bar issues in IE

CSS works in FF and IE6, not IE7

[Color7]

Hi everyone,

I'm having an issues with a horizontal nav bar in IE6 and/or IE7. When I leave width:inherit for #main_header #header ul.navi li a{ The nav bar condenses itself and looks very cramped in IE7. When it's set to "Auto" it breaks in IE6 by displaying in a horizontal fashion. Here is the code....

#main_header #header ul.navi{
width:700px;
display:inline;
position:absolute;
top:189px;
left:0px;
padding:0;
margin:0px;
background:none;
}
#main_header #header ul.navi li{
background:url(images/saparation.gif) no-repeat right; height:22px; padding:0 14px 0 5px; margin:0;
display:inline; float:left; 
}
#main_header #header ul.navi li.li1{
background:none; height:22px; padding:0px 14px 0 5px; margin:0;
display:inline; float:left; 
}
#main_header #header ul.navi li a{
font:12px/21px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#847543;
text-decoration:none;
text-indent:0px;
padding:0 0 0 15px;
font-weight:bold;
margin:0;
width:auto;
background-color:#fff6d8;
}
#main_header #header ul.navi li a:hover{
background:url(images/navi_h.gif) no-repeat 0 2px; 
}

Any ideas?

[CSS_Kidd]

When you set something to inherit in a css rule like "#main_header #header ul.navi li a" IE thinks it is taking on too much.

First try dropping the #main_header and just make it #header ul.navi li a. And if that doesn't work, don't declare the width at all and see what happens.

A good rule of thumb is to cancel out all extra spacing, padding and margins that different browsers create by using:

* {
padding:0px;
margins:0px;
}

at the very top of your css.

I use this all the time and rarely have to deal with a lot of IE fixes.

[Color7]

Hi CSS_Kid,

Thanks for the reply. I tried the fixes you talked about, but the problem still remains. I'm including the CSS for the entire "Header" section. Hopefully this will shed some more light on my problem.

Thanks!

/*--------------------------------header-------------------*/
#main_header{
width:100%;margin:0 auto; background:url(images/bg.gif) repeat-x #0a2b43; color:#FFFFFF; height:216px;
}
#main_header #header{
width:764px; margin:0 auto; background:url(images/header_pic.jpg) no-repeat #fff6d8; color:#FFFFFF; height:216px;
 position:relative;
}
#main_header #header ul{
background:url(images/search_bg.gif) no-repeat #09283f;
color:#FFFFFF;
display:block;
position:absolute;
height:22px;
width:756px;
margin:0;
padding:6px 0 0 26px;
top:10px;
left:0px;
}
#main_header #header ul li{
float:left; display:block; margin:0 23px 0 0;
}
#main_header #header ul li a{
height:15px; text-decoration:none; text-indent:-2000px; display:block; width:20px;
}
#main_header #header ul li a.home{
background:url(images/home.gif) no-repeat 0 0; width:16px; height:16px;
}
#main_header #header ul li a.home:hover{
background:url(images/home_h.gif) no-repeat 0 0; width:16px; height:16px;
}
#main_header #header ul li a.user{
background:url(images/user.gif) no-repeat 0 0; width:16px; height:16px;
}
#main_header #header ul li a.user:hover{
background:url(images/user_h.gif) no-repeat 0 0; width:16px; height:16px;
}
#main_header #header ul li a.contact{
background:url(images/contact.gif) no-repeat 0 0; width:19px; height:16px;
}
#main_header #header ul li a.contact:hover{
background:url(images/contact_h.gif) no-repeat 0 0; width:19px; height:16px;
}
#main_header #header ul.free{
background:url(images/toll_free-1.gif) no-repeat #09283f; color:#5d5024; display:block; height:28px; width:140px;
 padding:7px 0 0 43px; position:absolute; top:2px; left:580px; margin:0;
}
#main_header #header ul.free li{
float:left; display:block; font:10px/12px 'Trebuchet MS', Arial, Helvetica, sans-serif; text-align:center; color:#5D5024;
margin:0px 0px 0 0; padding:0 0 0 0 ; text-transform:uppercase; font-weight:normal; background-color:#FFF6D8;
}
#main_header #header ul.free li span{
 font-size:14px; line-height:16px; color:#FFFFFF; font-weight:bold; background-color:#ff0033; width:63px; height:16px;
 }
#main_header #header ul.free li a.call{
color:#e5f4ff; font-size:11px; font-weight:normal; text-transform:uppercase; text-indent:0px; width:72px; margin:0 0 0 0px;
padding:0 0 0 5px; background-color:#09283f;
}
#main_header #header img{
position:absolute; left:40px; top:74px; display:block;
}
#main_header #header ul.navi{
display:inline;
position:absolute;
top:189px;
left:0px;
padding:0;
margin:0px;
background:none;
}
#main_header #header ul.navi li{
background:url(images/saparation.gif) no-repeat right; height:22px; padding:0 14px 0 5px; margin:0;
display:inline; float:left; 
}
#main_header #header ul.navi li.li1{
background:none; height:22px; padding:0px 14px 0 5px; margin:0;
display:inline; float:left; 
}
#main_header #header ul.navi li a{
font:12px/21px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#847543;
text-decoration:none;
text-indent:0px;
padding:0 0 0 15px;
font-weight:bold;
margin:0;
width:auto;
background-color:#fff6d8;
}
#main_header #header ul.navi li a:hover{
background:url(images/navi_h.gif) no-repeat 0 2px; 
}