scriptygoddess

So my latest CSS fight, with which browser? IE, of course!

I was updating someone's site, and set up a new "side menu" type navigation. I set it up as an unordered list using images for bullets, because I wanted them to change on :hover (and we know that IE will not listen to any :hover descriptions that is not an anchor (a) type). Easy enough:

.maincontent .sidemenu ul {
margin:0;
padding: 5px 0 0 0px;
list-style: none;
list-style-type:none;
}

.maincontent .sidemenu ul li {
padding: 0 0 10px 0;
margin: 0 0 0 10px;
list-style: none;
list-style-type: none;
}

.maincontent .sidemenu ul li a {
color: #000;
padding: 0 0 0 15px;
display: block;
background: url('/images/arrow-red.gif') left 4px no-repeat;
}

.maincontent .sidemenu ul li a:hover {
color: #D43D2B;
background: url('/images/arrow-black.gif') left 4px no-repeat;
}

(the padding, etc was for styling)… Looks great in Firefox, but load the page up in IE, and mysteriously, the bullet for the lists was still there…

Finally, I thought it was odd that the list-style was even stylized somewhat instead of a plain old bullet… hunted down in some of the other stylesheets of the site and noticed that there was a universal definition for UL and even though I was trying to "override" it in my stylsheet… it refused to do so in IE:

UL { list-style: circle; }

Changing that to be specific for the container it was in (which was not the sidemenu) fixed the problem…

.othercontentdiv UL { list-style: circle; }