hasLayout.net

Staircase Bug

Affected Versions

This bug affects: IE7

Symptoms

Floated elements stack up like a staircase

Date of the Tutorial

Sun Jul 19 20:04:05 2009

Description

Here's the play: you want to make a horizonal navigation for example. You float your ' element"><a>s and everything's spiffy, except depending on the font-size that you've set on your ' element"><a>s, your navigation will either stay vertical or will stack up in a "staircase" fashion. Let's glance at the demo:

Demo

HTML Code:
<ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>
<ul id="two">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>
CSS Code:
ul {
    clear: both;
    list-style: none;
}
a {
    display: block;
    width: 130px;
    text-align: center;
    color: #fff;
    float: left;
    background: #f00;
}
#two a {
    font-size: 1.1em;
}

If you view the demo in either 7 the first ' element"><ul> will show up as vertical list and the second ' element"><ul> will have the staircase effect. What's the difference between the two? Different font-size on the second list.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution)

Date of the Solution

Sun Jul 19 20:11:39 2009

Fixed Versions

all of the affected

Description

The fix is quite simple, let's take a look at the fixed demo first:

HTML Code:
<ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>
<ul id="two">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>
CSS Code:
ul {
    clear: both;
    list-style: none;
}
li {
    display: inline;
}
a {
    display: block;
    width: 130px;
    text-align: center;
    color: #fff;
    float: left;
    background: #f00;
}
#two a {
    font-size: 1.1em;
}

Our bug is gone... what did we add? We've set our ' element"><li>s to display: inline, magic, isn't it? Alternatively, we can also float our ' element"><li>s, but that's up to your taste.