Lately I’ve been running into issues using the Yahoo Reset CSS file.  Typically we can account for every situation when developing our templates to be handed off to the client, and so anything the reset stylesheet removes, we can just add back. But it turns out thats not true. 

For our latest project, we did templates for the Sun JavaFX website. One of the more common things they are doing over there is posting JavaFX samples and tutorials on how to program with the new framework. In so doing, they ended up doing quite a bit of lists and sub-lists. We all expected this not to be a problem, but when it came time to input the content we found the reset stylesheet was a little two agressive. 

Here is what you would expect a normal list with some sub-lists inside of it to look like.

expected

Now after we’ve applied the following CSS ripped right from the Yahoo Reset css file, we will have killed all the bullets and numbers.

  1. li{list-style:none;}

Lists and Sub Lists with No Bullets

From here, everything seems kosher, except that we now need to add some bullets and numbers back in. From here it gets hairy. 

For all browsers except the one you love to hate (IE 6 -8) you can do this.

  1. li{  list-style-type: inherit; }

That will bring back the browser based list style inheritance.  Yet for IE, this doesn’t work, you get no bullets/numbers at all. Certainly annoying, but we have to work past this, so lets think about a solution.

  1. ul li { list-style-type: disc; }
  2.  
  3. ol li { list-style-type: decimal; }

Then we have to account for UL’s inside UL’s being different and UL’s inside UL’s inside UL’s… yea…

 

  1. ul li { list-style-type: disc; }
  2.  
  3. ul li ul li { list-style-type: circle; }
  4.  
  5. ul li ul li ul li{ list-style-type: square; }
  6.  
  7. ol li { list-style-type: decimal; }
This will result in the following styles.
fail1
Yea we didn’t account for OL’s inside UL’s. To think about it we didn’t account for UL’s inside OL’s either. The combinations here are pretty extensive.  You’ll basically need a new set for each level deeper you go.
We can’t just do

 

  1. UL UL UL OL LI { list-style-type: decimal; } 

because what if the content developer needs to add another UL list? Sigh. 

So recently I’ve been either deleting this statement from the Reset CSS file, or having a special class applied to the bullet type you want, and then you just apply that to the list. This irks me in many ways, but IE tends to do that to me.

  1. ol.bullet li, ul.bullet li{ list-style-type: bullet; }
2 comments

2 Responses to “Biggest problem with reset stylesheets? List style type inheritance.”

  1. JD Says:

    Since my ULs are generated, I can’t class them, but other than that, I’m having the exact same problem you are. Frustrating. Even FF doesn’t override the style-type at the element level.

  2. Kris Gray Says:

    Ugh I know, I’ve wanted to contact someone like maybe Nate Koechley and see if he has any ideas, but I keep forgetting.

Leave a Reply