IE Renders whitespace in unordered lists [56k warn]
Posted: Tue Jan 23, 2007 12:40 pm
I am building a site menu in ie with unordered lists. It works great in firefox and all of the other browsers that don't bite the big one, but once again, IE comes to the rescue and RUINS my layout. For some reason it renders whitespace in between li elements or something. I've always had this issue, and I've always solved it by just not putting any whitespace in the li tags. For example:
this:
instead of this:
But I don't have that option this time. Has anybody else ever experienced this problem?
Here's the code:
And here's how it looks in FF:

And here's how it looks in Internet Exploder:

This may be a css issue, but I'm pretty sure that I've had this issue before and it was IE rendering white-space.
this:
Code: Select all
<ul><li>One</li><li>Two</li><li>Three</li></ul>Code: Select all
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>Here's the code:
Code: Select all
<div id="categories">
<div class="medium" style="margin: 3px;">Browse by category:</div>
<!-- //-->
<ul>
<li><span class="main"><a class='cat ' href="/category_home/WK">Work</a></span>
</li>
<li><span class="main"><a class='cat active' href="/category_home/PL">Play</a></span>
<ul>
<li><a class="level_one" href="/c/PL-SI">On Sale</a>
</li>
<li><a class="level_one" href="/c/PL-AC">Arts & Crafts</a>
</li>
<li><a class="level_one active" href="/c/PL-MP">Multi-Purpose</a>
<ul>
<li><a class="level_two" href="/c/PL-MP-BP">Backpacks</a>
</li>
<li><a class="level_two" href="/c/PL-MP-FP">Fannypacks</a>
</li>
<li><a class="level_two" href="/c/PL-MP-HD">Hydration</a>
</li>
<li><a class="level_two" href="/c/PL-MP-DB">Day Bags</a>
</li>
</ul>
</li>
<li><a class="level_one" href="/c/PL-MU">Music</a>
</li>
<li><a class="level_one" href="/c/PL-OD">Outdoors</a>
</li>
<li><a class="level_one" href="/c/PL-SP">Sports</a>
</li>
<li><a class="level_one" href="/c/PL-UG">Urban Gear</a>
</li>
</ul>
</li>
<li><span class="main"><a class='cat ' href="/category_home/TR">Travel</a></span>
</li>
<li><span class="main"><a class='cat ' href="/category_home/SC">School</a></span>
</li>
<li><span class="main"><a class='cat ' href="/category_home/DG">Digital</a></span>
</li>
<li><span class="main"><a class='cat ' href="/category_home/WM">Women's</a></span>
</li>
<li><span class="main"><a class='cat ' href="/category_home/MN">Men's</a></span>
</li>
<li><span class="main"><a class='cat ' href="/category_home/YO">Youth</a></span>
</li>
<li><span class="main"><a class='cat ' href="/category_home/SA">Clearance</a></span>
</li>
<li><span class="main"><a class='cat ' href="/category_home/OEM">Brands</a></span>
</li>
</ul>
</div>

And here's how it looks in Internet Exploder:

This may be a css issue, but I'm pretty sure that I've had this issue before and it was IE rendering white-space.