Nav hover issue in IE.stupid IE

[jeffct]

in my last post you guys helped me out so much. <3 thank you.

But here's another one.

Alright. When you hover the nav links in firefox, the padding is applied ( thats what I want ), but in IE the background is wrapped around the text only. How can i solve that?

I tried adding the padding and the background to li:hover but that didnt work either.

Anyone? :)

[edited by: jatar_k at 7:14 pm (utc) on Sep. 15, 2007]
[edit reason] no urls thanks [/edit]

[Marshall]

It's possibly becausse of this:

#nav ul li{
list-style:none;
padding:0;
margin:0;
display:inline;
height:50px;
}

Try removing the padding from here.

Marshall

[jeffct]

nope..that didnt do anything :(

[Marshall]

The other suggestion is remove the li from it instead of the padding.

Marshall

[jeffct]

neither that one. no offense but, I think it would be best to try & edit rather than guessing. removing the li would make it line up vertically.

[Marshall]

Add this. It works in IE 7 - promise!

#nav ul li a, #nav ul li a:active, #nav ul li a:visited, #nav ul li a:link {
font-family:arial narrow;
font-size:11px;
text-decoration:none;
color:black;
padding: 5px 10px 30px 10px;
display:inline-block;
}

#nav ul li a:hover {
background:#333;
padding: 5px 10px 30px 10px;
/*margin-bottom:30px; REMOVE MARGIN-BOTTOM */
display:inline-block;
}

Marshall

[edit]
Didn't try it in FF. May have to be conditional comment.
[/edit]

[edited by: Marshall at 1:55 pm (utc) on Sep. 15, 2007]