Grow your CSS skills. Land your dream job.

IE6 adds extra spacing with display: block

  • # November 13, 2008 at 10:38 am

    I’ve got a multi-level unordered list that I’m using to create a navigation menu:

    HTML:

    CSS:

    Code:
    body {
    font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
    }
    a {
    text-decoration: none;
    }
    div#sidebar {
    float: left;
    padding: 88px 0 0;
    width: 200px;
    }
    div#sidebar a {
    color: #333;
    padding: 0 0 0 16px;
    }
    div#sidebar a:hover {
    color: #036;
    }
    div#sidebar ul {
    border-right: 1px solid #f0f1f5;
    margin: 0 0 0 26px;
    padding: 0;
    }
    div#sidebar ul li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    div#sidebar ul li a {
    display: block;
    margin: 0 0 12px;
    }
    div#sidebar ul li a.selected {
    color: #036;
    }
    div#sidebar ul li ul {
    border-right: none;
    margin: 0 0 0 12px;
    }
    div#sidebar ul li ul li a {
    color: #999;
    }

    The problem is Menu Item 3.3, which wraps to a second line. The padding that I specified for each <li> only applies to the first line (because <a> is an inline element), so the second line ends up losing the indent, falling back all the way to the left. I set "display: block" on the <a> to fix it, but for some reason that makes IE6 freak out and add crazy amounts of spacing between everything.

    Download the code and look at it in Firefox – that’s exactly how I want it to display. I just need it to look the same way in IE. Any ideas?

    # November 13, 2008 at 10:50 am

    Nevermind, I got it – for IE only, I had to specify "height: 0" on each <a>:

    Code:
    div#sidebar ul li a {
    display: block;
    height: 0;
    margin: 0 0 12px;
    }

    For some reason, setting "display: block" on the <a> causes IE to give it a default height of 42px (I inspected it with the developer toolbar).

    I tell you, the amount of time I waste getting things to work in this browser… :evil: :lol:

    # November 13, 2008 at 12:16 pm

    I think we should start locking posts after it’s been solved so they can’t be spammed… dam bots SERIOUSLY ANNOYING ME

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".