The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS IE6 adds extra spacing with display: block

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #23576

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



    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?


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

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.