Tuesday, March 2, 2010

CSS: > notation doesn't work in IE6

I can't believe I'm actually writing CSS tips for IE6. (More on this in a subsequent post). I wonder if anyone will ever actually want to read this? And I hope that I won't ever have to refer to this again. But here I am.

So, against my better judgement I am prettifying some HTML for IE6 and I have just discovered that it doesn't like the following notation:

#name > ul

To be fair to IE6, I didn't know what this did until I few days ago. For anyone reading this who doesn't know, it means that you apply the following attributes to a unordered list sitting directly within an element with an id of "name". That means that the ul in question can't be inside any other element. To apply attributes to any and all uls within name use the following notation:

#name ul

I spent days trying to fix up some tabbed menus in IE6 and all I had to do was delete the > selector.

For more on CSS selectors and what they do see selectoracle, an awesome website that takes CSS notation as input and outputs the meaning (along with any potential problems). I'll be adding this to my list of Very Useful Tools.

UPDATE: I have found a website which lists CSS selectors and the browsers that support them. I feel quite sick at the thought of the task ahead after seeing the long list of red "NO"s under IE6.

1 comment: