hasLayout.net

Bookmark and Share

Staircase Bug

Table of Contents

Affected Versions

This bug affects: IE7, IE6

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 <a>s and everything's spiffy, except depending on the font-size that you've set on your <a>s, your navigation will either stay vertical or will stack up in a "staircase" fashion. Let's glance at the demo:

Demo

Due to the nature of this bug, the demo is located on a separate page.

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 IE6 or 7 the first <ul> will show up as vertical list and the second <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:

Due to the nature of this bug, fixed demo is located on a separate page.

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 <li>s to display: inline, magic, isn't it? Alternatively, we can also float our <li>s, but that's up to your taste.

Comments

Create new comment

Currently there are no posted comments.

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book: