SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    Float left list gets indented in IE6/7?

    Hello,

    Ive got this rule...

    .holiday {
    float:left;
    margin-right:100px;
    padding:0;
    list-style-position outside /* ie6/7 */
    display:inline; /* ie6 */
    }

    Two things get mucked up here. I seem to of fixed them but I've never seen this and want to better know whats happening. Via my reset there is zero padding and margin and list style none on all lists. There are two .holiday lists side by side. The .holiday lists gets indented in ie6/7. I added list-style-position outside and that fixes it but is that the correct fix? Two, my whole container drops (its floated) because ie6 needed display inline for some reason. But you only need that hack when its floated in the direction of the margin right?

    Note: I removed the ":" from the list style because the editor was making them a surprised face icon.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,104
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by EricWatson View Post
    I added list-style-position outside and that fixes it but is that the correct fix?
    I would think so. That's a standard setting. It makes the LIs align with the container and the bullets (if any) hang outside (unless there's padding to pull them in).

    Note: I removed the ":" from the list style because the editor was making them a surprised face icon.
    You need code tags.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You need code tags.
    Ahh - it's early.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Bump. Still don't know why the floated list gets indented. I imagine it has something to do with floated list loose there bullets in IE too? Also, still don't know why I have to give ie6 display inline when the margin is applied to the opposite side of the floated direction? Maybe because there are two floated lists side by side and the one on the right runs into the margin-right of the first?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Bump. Still don't know why the floated list gets indented. I imagine it has something to do with floated list loose there bullets in IE too? Also, still don't know why I have to give ie6 display inline when the margin is applied to the opposite side of the floated direction? Maybe because there are two floated lists side by side and the one on the right runs into the margin-right of the first?
    Have you got a working demo of that Eric with html as I will probably build something different?

    The double margin bug in IE6 applies the the side edge of a container no matter which way it is floated.

    If there was only one float in a containing block then both its right margin and left margin would be doubled in error.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI Eric,

    It's ok I built a test case that exhibits the bug.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    * {
        margin:0;
        padding:0
    }
    ul,li {
        list-style:none;
    }
    .holiday {
        float:left;
        margin-right:100px;
        padding:0;
        display:inline; /* ie6 */
        border:1px solid #000;
        background:red;
        /*list-style:outside;*/
    }
    </style>
    </head>
    <body>
    <ul class="holiday">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
    <ul class="holiday">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
    </html>
    It seems that when you add display:inline to the floated list then IE set the space for the bullet to list-style:inside although the bullet is not actually showing because you have specified none.

    Using list-styleutside corrects this.

    When you use list-style:inside it turns the bullet marker into an inline element so I guess this is some kind of reverse logic in that if you have an inline element then the list-style:inside is probably the default for IE6 and 7.

    This seems to hold true as this simple test case shows space on the left as soon as you make the ul display:inline.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    * {
        margin:0;
        padding:0
    }
    ul {
        list-style:none;
        display:inline;
    }
    </style>
    </head>
    <body>
    <ul>
        <li>test</li>
    </ul>
    </body>
    </html>



    IE6/7 have loads of bugs with lists and it seems they were very poorly implemented from the start.

    IE8 seems ok.

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul for the detailed breakdown. More clear now. I don't know why I didn't do this from the start, but from the sounds of it I will just give it padding instead and then remove the display inline. That should trim two rules. Always makes me happy when I can trim.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •