June 26, 2007
Standalone List Items in IE and Firefox
I ran into an annoying diference in the way IE7 and Firefox render pages. List items (<li>) not enclosed in a numbered or unnumbered list (<ul>, <ol>) display differently when the list is of type “none.” In IE, each list item’s first line will be indented, while in Firefox there is no indent. Setting margin or padding does not change this. The below code sample demostrates this issue.
<HEAD>
<STYLE type=”text/css”>
li {list-style: none;}
</STYLE>
</HEAD><BODY>
<LI>foo
<LI>bar
<LI>foobar</BODY>
This issue can be resolved by putting the list items into an unordered list (<ul>) and specifying the margin and padding for that <ul> (in a style block or CSS file).
I ran into this problem last night while customizing the fSpring theme for Wordpress. The sidebar items and/or sidebar widgets were list items without an enclosing <ul>. This caused the sidebar to look sloppy in IE. I fixed the problem by adding <ul> and </ul> tags to the sidebar.php file.
Share This
