Positioning lists (ul and ol in HTML-speak) can generally be a huge pain: Mozilla FireFox and Internet Explorer (7, 6, 5 …) both treat lists and list items different: they have different padding, different margins, basically entirely different rendering, and, to top it all off, the list-item-image or list-item-type receive different treatment.

Here’s my "best of all possible solutions" to getting the li portions of your lists to play nicely together. Basically, using a n Internet Explorer conditional comment, give your list items list-style-position:inside and give whatever’s inside your list some padding or text-indent. This won’t get your lists to work the same cross-browser. However, it will let you remove a lot of the extra margin and padding that IE crowds into your list items, making them a little easier to work with. This goes especially true if you’re trying to squeeze them into a tight position.

technorati tags:css, ul, ol, lists, li, html

This entry was posted on Tuesday, December 5th, 2006 at 7:02 pm and is filed under css, dhtml. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.