Adding a 'block' feel to the navigation bar

[G00gleFan]

Hi all,

I am trying to make a navigation bar UL LI, that holds several links, to be 'highlightable' when the cursor hovers above them. I use the following code:

ul {
list-style-type:none;
padding:2px;
align:left;
}

li {
border:1px solid #0066cc;
padding:1px;
background:#99cccc;
}

.vnav ul li a {display:block;}

That has the right effect in FF, but in IE6 I have to actually go excatly over the link in order for IE to render with the background color. Doesn't IE understand the 'block' properly. Does it need a hack for this as well or am I missing something obvious?

Regards

[Setek]

You can google for IE hasLayout :)

Basically, IE doesn't properly accept that your block is a block. The way to fix this is to explicitly set a width to your anchor (probably easiest if you do this in an IE-conditional stylesheet)

[G00gleFan]

Found one:

<!--[if lte IE 6]>
<style>
.gainlayout {height: 1px;}
</style>
<![endif]-->

I wonder if IE7 will perform in the same way as far as hasLayout is concerned.

Thanks very much Setek!