Overring the Ordered List CSS on MT

As I’ve noted before, I’m not too crazy about using CSS to control presentation of ordered lists. Normally, my solution is to declare my content XHTML transitional and still use the type="" attribute. When playing with a content managment system (CMS) though, you may not have that option.

I just realized that my template in Movable Type (MT) actually has a setting that makes all OL’s the decimal type (i.e. 1,2,3…). That’s fine except if you have a nested list, in which case you nave nested lists all being numbered 1,2,3. Even my editor, who is no usability guru, commented that this could be confusing (no kidding).

In the code, I HAD made the nested list type="a" for lower-case alpha, but the CSS in my MT template overrides any type declaration I make. Fortunately, Movable Type allows me to add custom CSS to the template, so I did. You can see the code below, but note that #alpha-inner refers to the DIV for the main content. I don’t want to mess with OLs in the navigation or sidebar widgets…yet.

/* Nested OL fix */
#alpha-inner ol {list-style-type: decimal;}
#alpha-inner ol ol {list-style-type: lower-alpha;}
#alpha-inner ol ol ol {list-style-type: lower-roman;}

What this declaration does is make first level OL’s decimal (1,2,3), the second level lower-alpha (e.g. a,b,c) and the third level lower-roman (i,ii,iii). If I get to a 4th level, I will probably have to rethink my content.

FYI – You can use this strategy on any CMS so long as you or a developer can access the CSS styles, but I do recommend restricting the domain to whichever DIV is the main content. Navigation is often done with a list with its own CSS which should be left alone until you have a better idea of how you want to hack it….

This entry was posted in Accessibility, CSS. Bookmark the permalink.

Leave a Reply