IE List Block Problems

[JasonKing]

Problem Website: www.ultimategripstrength.com

Hello Everyone!

I have a problem with some list block positioning in IE. As you can see the second line within the list block does not follow the padding properties, making it stick out slightly.

The list block should also change color when rolled over, works in firefox but not in IE.

Here's the CSS:

Code: Select all

#Container #Header #NavBar {
    height: 225px;
    width: 150px;
    background-color: #333333;
    font-size: 14px;
    color: #E3FFCB;
    float: left;
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding-top: 5px;
}
#Container #Header #NavBar ul {
    display: inline;
    text-align: left;
    list-style-type: none;
    vertical-align: middle;
}
#Container #Header #NavBar li {
    display: block;
    padding-bottom: 8px;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
}
#Container #Header #NavBar li:hover {
    background-color: #515151;
}

#Container #Header #NavBar a {
    color: #E3FFE3;
    text-decoration: none;
}
#Container #Header #NavBar a:hover {
    font-weight: normal;
    color: #FFFFFF;

Best Regards
Jason

[alexgeek]

have you tried making the container wider?
it may just not fit.
i'm not really sure though.
what you should do is add the .htc file so that the hover effect works in IE.

[Lchad]

I would delete this code

Code: Select all

 #Container #Header #NavBar li:hover {
    background-color: #515151;
}

Then I'd change this

Code: Select all

 #Container #Header #NavBar a:hover {
    font-weight: normal;
    color: #FFFFFF;

to this

Code: Select all

#Container #Header #NavBar a:hover {
     font-weight: normal;
     color: #FFFFFF;
    background-color: #515151;
}

I don't have the answer to the list block issue.