Strange IE CSS bug?

turklet · July 29th, 2006, 04:01 PM

Hello all!

Found an annoying CSS bug in IE and can't find a way of fixing it!

Its basically an unordered list with links in it. With a mouseover the border of the list changes to black and the text changes to white. Now, this happens correctly to all of the links in the list, except the first link!! Very strange.

A link to the page with this problem is here -
http://www.tipcet.com

And the stylesheet definition is here:

Code:

div.IndexCentre ul {
    width:90%;
    position:relative;
    list-style-type: none;
    padding-left:0px;
    left: 0px;
    text-align: left;
    }

div.IndexCentre ul li {
    background-color: #FFCC66;
    }


div.IndexCentre ul a {
    display:block;
    padding-left:5px;
    padding-right:5px;
    padding-top:3px;
    padding-bottom:3px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration:none;
    font-weight: bold;
    border-right-width: 10px;
    border-left-width: 10px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #FFCC66;
    border-left-color: #FFCC66;
    color:black;
    margin-bottom:2px;
    line-height: 12px;
    }

div.IndexCentre ul li a:hover {
border-color:#000000;
color:#ffffff;
}

Incidentally, the page displays with no problems with Mozilla and Opera based browsers. Only IE. :(

Thanks in advance.