IE float, list indentation problem

  • Resolved neetij

    (@neetij)


    19 years, 11 months ago

    I’m trying to get a CSS problem fixed and I am at my wits end.

    There are two columns – ‘content’, ‘sidebar’. Content is floated to the left with a specified width. ‘Sidebar’ has a margin-right equal to the width of ‘content’.
    I have a bunch of lists (links, cats, etc) in the sidebar. In FF1.0.1 it works fine, all lists in a line. In IE6 however, once the text in the content (left) column is finished (and if it is shorter in length than sidebar content), the lists indent to the left by a few pixels. I cannot figure out how to fix this. Please help!!!

    Also, what is this bug/issue called so I can look into this further?
    Page link, Screenshot

    CSS:
    ul, li, ul li { list-style: none outside; margin: 0; padding: 0 0 0 5px; }
    li { list-style: circle outside; }

Viewing 4 replies - 1 through 4 (of 4 total)

  • The list of links is using the content area as it’s left edge, not it’s own left edge as they overlap.
    When the content ends, the list uses it’s own edge and correctly indents.

    You need to try reducing the width of content
    or
    putting a margin/padding between the two areas
    or
    enclose both areas in a single div, and float the list right instead maybe.

    Thread Starter neetij

    (@neetij)

    Thanks for the quick reply incognito.

    I specified a width for the sidebar & the list doesn’t indent. ??

    It works, but there is a drawback to this fix – for smaller window sizes (say width < 700), it doesn’t degrade well in IE. The sidebar moves below (and still somewhat to the right of) the content column. It may be acceptable to an extent, but I guess I’m looking for a fluid layout which degrades well in IE6/win, FF1.0. I’m still trying to figure the margin/padding to work…it doesn’t seem likely, and I’ll try float right on another instance of the theme.

    Thanks.

    I don’t know if this will help, but I was just reading this over:

    https://www.positioniseverything.net/explorer/floatIndent.html

    the article says IE does very strange and mysterious things with the float/margin combination you have. the author offers

    “display:inline”

    as a solution for class of the offending element

    You’ll find a fix for the ‘IE Three Pixel Gap’ here.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘IE float, list indentation problem’ is closed to new replies.