IE Renders whitespace in unordered lists [56k warn]

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

IE Renders whitespace in unordered lists [56k warn]

Post by Luke »

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:

Code: Select all

<ul><li>One</li><li>Two</li><li>Three</li></ul>
instead of this:

Code: Select all

<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
</ul>
But I don't have that option this time. Has anybody else ever experienced this problem?

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 FF:
Image


And here's how it looks in Internet Exploder:
Image

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.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

You could try setting them to display inline and removing the margins and things like that?
User avatar
aaronhall
DevNet Resident
Posts: 1040
Joined: Tue Aug 13, 2002 5:10 pm
Location: Back in Phoenix, missing the microbrews
Contact:

Post by aaronhall »

Have you tried fooling around with the padding/margin properties for the unordered list elements?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

oh... sorry I forgot the css:

Code: Select all

*{
	margin: 0;
	padding: 0;
}
/* Category Tree */
#categories{
	padding: 2px;
}
#categories a{
	text-decoration: none;
}
#categories ul{
	list-style-type: none;
	margin: 5px 0 5px 0;
}
#categories ul li a{
}
#categories ul li a.cat{
	background: #fff url(../images/layout/arrow_right.gif) no-repeat 5px 50%;
	display: block;
	width: 145px;
	height: 21px;
	border: 1px solid #ccc;
	line-height: 21px;
	vertical-align: middle;
	font-weight: bold;
	font-size: 1em;
	padding-left: 18px;
	margin: 5px 0 5px 0;
}
#categories ul li a.cat:hover{
	background-color: transparent;
	color: inherit;
}
#categories ul li .active{
	color: #666;
}
#categories ul li .main a.active{
	background: #fff url(../images/layout/arrow_down.gif) no-repeat 5px 50%;
}

#categories ul li .level_one{
	margin-left: 10px;
}
#categories ul li .level_two{
	margin-left: 20px;
}
#categories ul li .level_three{
	margin-left: 30px;
}
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

IE is a PITA for sure.

using a bit of a css selector hack solves the issue

Code: Select all

#categories ul li a.cat{
        background: #fff url(../images/layout/arrow_right.gif) no-repeat 5px 50%;
        
        display: inline-block;

        width: 145px;
        height: 21px;
        border: 1px solid #ccc;
        line-height: 21px;
        vertical-align: middle;
        font-weight: bold;
        font-size: 1em;
        padding-left: 18px;

        margin: 5px 0;
}

#categories ul > li a.cat{
	display: block !important;
}
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

no no no hacks!

Turn this:

Code: Select all

<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
</ul>
Into this:

Code: Select all

<ul><li>
 One</li><li>
 Two</li><li>
 Three</li>
</ul>

That should work fine :)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I don't think I can change the markup, but I'll check.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Bugger, I should document things like this better. I have encountered this one in so many projects. I know there's another solution then the HTML-on-one-line, and it's not an ugly hack. Probably some has-layout-stuff in IE.

http://www.satzansatz.de/cssd/onhavinglayout.html has some info about that
Another common problem with lists in IE occurs when the content of any li is an anchor with display: block. In these conditions the white space between list items is not ignored and usually displayed as an extra line for each li. One of the methods to avoid this extra vertical space is to give layout to the block anchors. This also has the benefit of making the whole rectangular area of the anchors clickable.
An older post from hicksdesign has some possible solutions, brunildo has some tests
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

if you can't change the markup:

Code: Select all

#categories ul li a.cat{
        background: #fff url(../images/layout/arrow_right.gif) no-repeat 5px 50%;
        /*I moved this stuff*/
        font-weight: bold;
        font-size: 1em;
}

#categories ul li span.main {
	display: block;
        width: 145px;
        height: 21px;
        border: 1px solid #ccc;
        line-height: 21px;
        vertical-align: middle;
        padding-left: 18px;
        margin: 5px 0 0px 0;
}
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Kieran Huggins wrote:if you can't change the markup:

Code: Select all

#categories ul li a.cat{
        background: #fff url(../images/layout/arrow_right.gif) no-repeat 5px 50%;
        /*I moved this stuff*/
        font-weight: bold;
        font-size: 1em;
}

#categories ul li span.main {
	display: block;
        width: 145px;
        height: 21px;
        border: 1px solid #ccc;
        line-height: 21px;
        vertical-align: middle;
        padding-left: 18px;
        margin: 5px 0 0px 0;
}
For anyone interested: the reason Kieran's code solves the bug is the setting of width, height, border and/or line-height.

In the article I linked to the whole concept of has_layout is explained very well. In short: IE has some property for elements which is called has_layout. This property is triggered whenever an element gets assigned a height, width, positioning or float (and some other, see article [urlhttp://www.satzansatz.de/cssd/onhavinglayout.html]satzansatz[/url].

The trigger of the bug in the case of a list is - most probably - the display:block; Without also assigning something which triggers has_layout, IE seems to have trouble calculating the correct dimensions of the element and decides to look at the whitespace in the source. Don't ask me why.
So to summerize, this is what causes the bug in IE:

Code: Select all

 ul {
 margin:0;
 padding:0;
 list-style:none;
 }
 li {
 margin:0;
 padding:0;
 }
 li a {
 display:block;
 padding:0.5em;
 background:#ddd;
 }
The solution(s).
Because there are multiple style rules which can trigger the has_layout property and the whitespace bug is not entirely consequential, you'll find many different solutions if you search for "IE whitespace bug". Which one to use depends on your specific situations.

As mentioned before, removing the whitespace is one. For simple handwritten html pages this is an option. It does decrease the readability a lot.

Setting the height and width of the a elements is another. What is often used is setting height: 1px; on the li and a (using conditional comments to only give this to IE:

Code: Select all

 <!--[if lt IE 7]>
 <style type="text/css">
 li {height:1px;}
 li a {height:1px;}
 </style>
 <![endif]-->
Using float:

Code: Select all

ul a {
display: block;
float: left;
clear: left;
}
Setting display: inline_block/block

Code: Select all

 <!--[if lt IE 8]>
 <style type="text/css">
 li a {display:inline-block;}
 li a {display:block;}
 </style>
 <![endif]-->
Giving the li a border

Code: Select all

li { margin:0; padding:0; border-bottom: 1px solid #fff; }
If you don't want a visible border you can use the same color as the background.


There are more solutions, but I'll stop now before it gets even more confusing. the thing is, the concept of has_layout is a very important one when you're dealing with IE bugs. So understanding that well saves a lot of time when you encounter a IE specific bug like this. Often setting something like height, width or float will bring the solution. Of course sometimes that will cause other problems and you start a nice game of whack-the-mole :)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

thank you matthijs, you have solved my issue. :bow:
Post Reply