Wed, 2003-07-16 18:56
My nav bar is comprised of a highly styled list. It looks perfect on Mozilla, netscape, safari, IE for Mac, etc. However, for whatever reason, IE6 is adding a 1px gap between the list elements. Here is a link to the page in question and the corresponding CSS code.
#leftColumn {
position:absolute;
top:70px;
left:0;
width:160px;
height: 200px;
}
#navBar {
position:absolute;
top:150px;
left:0;
width: 160px;
margin-left: 0px;
margin-right: 0px;
}
#navBar {
background:#036 }
#navBar ul {
background-image: url("../images/darken.gif");
margin:0 0 0 0;
padding:0 0 0 0;
border:1px solid #999;
border-width:0px 0;
font-size:85%;
display: block;
white-space:normal;
}
#navBar ul li {
margin:0; padding:0;
display: block;
list-style-type:none;
}
#navBar ul a, #navBar ul strong, #navBar ul em {
float:none;
border-style:solid;
border-color:#999;
border-width: 0 0 1px 1px;
/* Odd bugs split between IE5/Win and IE5/Mac prevent border values from being combined into one declaration */
padding:5px 8px;
text-decoration:none;
font-weight:normal;
color:#69c;
display: block;
}
/* \ Hack to get IE5/Mac to ignore the following rule */
#navBar ul a {height:1em; line-height:1em;}
/* \ Hack to get IE5/Mac to ignore the following rule */
#navBar ul strong {height:1em; line-height:1em;}
/* \ Hack to get IE5/Mac to ignore the following rule */
#navBar ul em {height:1em; line-height:1em;}
#navBar ul .first a, #navBar ul .first strong {border-left-width:1px;}
#navBar ul em {
float:none;
display: block;
}
#navBar ul span {
text-transform:uppercase;
font-weight:bold;
color:#9cf;
}
#navBar ul span span {display:none;}
#navBar ul strong, #navBar ul strong span {background:#036; color:#fff; border-bottom:0px;}
#navBar ul strong a span {color:#9cf;}
#navBar ul a:hover, #navBar ul a:focus {background:#036;}
#navBar ul a:hover, #navBar ul a:focus, #navBar ul a:hover span, #navBar ul a:focus span {
color:#fff;
}
#navBar ul strong a, #navBar ul strong a:visited {
float:none;
display:block;
padding:0;
border-style:none;
background-color:transparent !important;
}
#navBar a.c {
background:#036;
color:#fff;
padding: 0px 0 5px 18px;
line-height:1em;
border-bottom:none;
}
#navBar ul a.c:hover, #navBar ul a.c:focus {background:#036;color:#9cf;}
#navBar a.d {border-top: 1px solid #999;}
#navBar li.bottom {border-bottom:1px solid #999;}
Sorry for all of the code but the problem is in there somewhere and I can't quite find where. Any help is appreciated, thanks in advance.
-Dave
Thu, 2003-07-17 13:56
#1
IE6 is adding a 1-pixel space to my navigation bar
Dave:
First off, the site looks fantastic! (Safari)
I'll be checking into the code more throughout the day, hopefully I can find an answer.
-Mike
Thu, 2003-07-17 21:35
#2
IE6 is adding a 1-pixel space to my navigation bar
Mike, thanks for the positive feedback, look forward to hearing back from you.
Wed, 2003-07-23 04:59
#3
IE6 is adding a 1-pixel space to my navigation bar
Try adding the following to your "#navBar ul" selector...height: 100%;so you should now have...
#navBar ul {
background-image: url("../images/darken.gif");
margin:0 0 0 0;
padding:0 0 0 0;
border:1px solid #999;
border-width:0px 0;
font-size: 85%;
display: block;
white-space:normal;
height: 100%;
}That should eleminate most of the gap in IE6 but it does not appear to remove all of it (maybe you could try some tweaks based off this). It seems that IE6 has some troubles with the font-size in relation to (I think) the height of the list element or the "#navBar ul a" being placed inside the list elements (like it does not want to fill the list element, but again I think it's the font-size). And I am not certain at all as to how this effects any browsers other than Netscape 7 or IE6 but it works fine in both of those.
Sorry to be so brief but I'm in a hurry or I would have gone into a little more detail on my findings.
Hope this is of some help,
Serpent330
Wed, 2003-07-30 22:17
#4
IE6 is adding a 1-pixel space to my navigation bar
Dave,
The site looks great. I've encountered the pixel spacing you're experiencing before, and it seems to me that setting the li elements to display: inline; and having the <a> tags set to display: block; with all your styling applied to them gets rid of the problem. I played with your css file a little. Its the end of the day and my brain is a little fried, so I apologize if I screwed something up in it. I ran the version I'm posting through IE 5.1 mac(9.2), IE 5.0, 5.5, and 6.0 on pc, NS6.0 pc, and opera 7.02 on pc and it looked fine on all of them. You may have to tweak a couple of the styles though.
Wed, 2003-08-06 00:18
#5
Thanks
d3 and Serpent, thanks much for the help. I've been away on vacation but I will implement your suggestions when I get back at the end of the week.
Thanks,
Dave
Wed, 2003-08-06 14:17
#6
blade replyz
could it be that under your nav code there is a border tag with 1px border
just a thought