1 reply [Last post]
richy240
richy240's picture
Offline
Regular
Last seen: 14 years 3 weeks ago
Timezone: GMT-6
Joined: 2005-11-20
Posts: 28
Points: 0

Can anyone help me with this? Yet again, it works in FF but IE breaks...

Here's the result of the broken code in IE:

See the 1px gap under the selected nav button, between the selected "button" and the border below it?

And here's the code:

#header div#navMenu {
  position:relative;
  width:150px;
   
  border-right-style:solid;
  border-right-width:2px;
  border-color:#FFFFFF;
}

#navMenu ul#navList {
  margin:0px;
  padding:0px;
  
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:80%;
  font-weight:bold;
  list-style-type:none;
  border:none;
}

#navList li {
  height:auto;
  margin:0px;
  padding:0px;
}

#navList li.top {
  border-top-style:solid;
  border-top-width:1px;
  border-color:#FFFFFF;
}

#navList a {
  height:1%;
  margin:0px;
  padding:2px 2px 2px 2px;
  display:block;
  
  text-decoration:none;
}

#navList a:link, a:visited {
  color:#FFFFFF;
  background-color:transparent;
}

#navList a:hover, a:active {
  color:#666600;
  background-color:#FFFFFF;
}

Anyone have any ideas? Thanks in advance.

richy240
richy240's picture
Offline
Regular
Last seen: 14 years 3 weeks ago
Timezone: GMT-6
Joined: 2005-11-20
Posts: 28
Points: 0

1px gap in UL-based nav bar in IE (surprised?)

Sorry - after a bunch of searching, I found the fix:

http://phonophunk.com/articles/ie-fix-for-gaps-between-list-items.php

Thanks for reading though - I appreciate your efforts.