IE7 CSS line-height problem

[jon131]

Hi there everyone,

I'm currently stuck with an IE7 css issue. IE7 is cutting off the bottom of the h2 headings element in a nav list. I can see why it's doing it:

h1,h2,h3,h4,h5,h6 {
color: #004a66;
line-height: 12px;
}
h2 {
font-size: 18px;
}

..because the line-height is set to 12px and the fontsize is set to 18px. But even if I the set the line height to greater than 18px IE7 still cuts off the bottom of the heading. Only by using a much bigger line-height is the full heading element displayed fully, but by then the list is more whitespace than list.

The site's here - http://69.89.31.184/~wheresjo/guide/.
The css's here - http://69.89.31.184/~wheresjo/guide/...ed/rounded.css

Any and all suggestions are greatly appreciated,

Thanks,

Jon

[dm01]

That's IE for you. I'm using Opera 9.52 (Dragonfly) and it looks just fine. The XHTML checks out in the HTML Validator except for one small error. Your CSS, on the other hand, is a mess, but the problem is not here.

The problem is you are not using lists for the <h2>. You may be saying to yourself "I can't use a list here!" On the contrary, you can use non-block-level elements inside <li>. These include <span>, the headers, <ins>, <del>, and the like.