6 replies [Last post]
greenstork
Offline
Regular
Last seen: 16 years 14 weeks ago
Joined: 2003-07-16
Posts: 16
Points: 0

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.

http://www.esw.org/test/

#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

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 16 years 30 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

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

</twocents>

greenstork
Offline
Regular
Last seen: 16 years 14 weeks ago
Joined: 2003-07-16
Posts: 16
Points: 0

IE6 is adding a 1-pixel space to my navigation bar

Mike, thanks for the positive feedback, look forward to hearing back from you.

Serpent330
Offline
newbie
Last seen: 16 years 13 weeks ago
Timezone: GMT-6
Joined: 2003-07-23
Posts: 1
Points: 0

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

d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 16 years 12 weeks ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

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.

greenstork
Offline
Regular
Last seen: 16 years 14 weeks ago
Joined: 2003-07-16
Posts: 16
Points: 0

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

Anonymous
Anonymous's picture
Guru

blade replyz

could it be that under your nav code there is a border tag with 1px border
just a thought