3 replies [Last post]
chikoppi
Offline
Enthusiast
Last seen: 10 years 22 weeks ago
Timezone: GMT-6
Joined: 2006-06-25
Posts: 85
Points: 2

You know... just when I think I've got at least some of my CSS skills sorted out something like this comes along to humiliate me.

I have a simple vertical navigation list that displays fine in IE7.0 and FF. However, when viewed in IE5.5-6.0 extra space appears below the list items.

Correct (IE7.Innocent
http://browsershots.org/screenshots/e71b5801ed2bc0f8b42f35f8b6563947/

INcorrect (IE6.Innocent
http://browsershots.org/screenshots/e5f027db75bcec4c5ab2d8113332f08b/

Both the XHTML and CSS validate:

Lift!

Our Work

#nav { width: 240px; background-color: #930; }

#nav ul {
border-top: 1px solid #930;
border-left: 1px solid #930;
border-right: 1px solid #930;
}

#nav li {
border-bottom: 1px solid #930;
}

#nav a {
display: block;
padding: 0 5px;
text-align: left;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 19px;
color: #930;
background-color: #600;
}

#nav a:hover {
background-color: #C60;
color: #600;
}

Clearly, I've failed to account for one of the legacy IE display bugs, but I can't seem to figure out which one. Help?

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 1 week ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Did you try :

In the test case, try :
#nav ul {
margin-bottom:0;
...

I can't see the problem with the online page.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

In a nutshell, do this:#nav

In a nutshell, do this:

#nav a {
  display: inline-block;
  padding: 0 5px;
  text-align: left;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 19px;
  color: #930;
  background-color: #600;
  }

#nav a {
  display: block;
  }

The anchor must have hasLayout set. See http://csscreator.com/node/6745 for an explanation.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

chikoppi
Offline
Enthusiast
Last seen: 10 years 22 weeks ago
Timezone: GMT-6
Joined: 2006-06-25
Posts: 85
Points: 2

kk5st wrote:In a nutshell,

kk5st wrote:
In a nutshell, do this:

Ah! Yes, that seems to work wonderfully. Thanks Gary!

I don't feel so bad about falling prey to this particular pitfall. Its one of those exceptional rules a person might not need to know until the problem actually manifests in the course of work. One more tool in the fight against bad browser behavior!

Thank you also for the excellent and detailed explanation of the fix!