|
Posted by Michael on 01/15/07 16:13
Hi.
Below I have included a minimal example of nested unordered lists.
When the page is rendered in Firefox, it looks exactly the way I want it. In
Internet Explorer though (even the newest version) there is a large space
between the "Second item" and the "First subitem".
Can anyone please tell me how to get around this problem without
invalidating the HTML code (I can fix it by removing the <LI> around the
nested list, but that will give me complaints from the W3C validator). Since
I'm using these lists to indicate my document structure (the lists will be
built dynamically from the <H[0-9]> headers), I'd like to get rid of the
spaces. Of course I can find another solution altogether to produce the
indentation, but I thought lists would be a clean way to do it.
Thanks a lot for any help you can offer
Michael.
----------------
Example (minimal useful correct code)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=Windows-1251">
<TITLE>List test</TITLE>
<STYLE TYPE='text/css'>
ul.main {
padding-left: 10px;
border: solid 1px;
}
ul.sub {
padding-top: 0px;
padding-left: 10px;
border: dashed 1px;
}
</STYLE>
</HEAD>
<BODY>
<UL CLASS='main'>
<LI>First item</LI>
<LI>Second item</LI>
<LI>
<UL CLASS='sub'>
<LI>First subitem</LI>
</UL>
</LI>
</UL>
</BODY>
</HTML>
[Back to original message]
|