IE7 Ordered List Problem.

Discussion in 'CSS' started by nanomess, Oct 8, 2007.

0
  1. #1
    Hi,
    I've come across a bit of annoying ordered list problem. Basically, the numbers disappear as soon as they're too far left. They show up just fine, in Opera, Safari and Firefox, but not in IE7. Therefore, I have to add a left margin to place it in the right correction, but then it looks off in the other browsers.

    Here's my CSS for it:

    #maincolumn {
    float: left;
    width: 510px;
    margin: 0 0 20px 20px;
    padding: 0 20px 0 0;
    border-right: 1px solid #ccc;
    font-size: 14px;
    line-height: 20px;
    }
    #maincolumn ol {
    margin: 0 0 20px 32px;
    }
    #maincolumn ol li {
    margin: 5px 0 0 0;
    list-style: decimal;
    }
    #maincolumn li {
    color: #1f1f1f;
    }


    Basically as soon as I remove the 32px left margin from the ol, I lose my numbers. What's going on? It's really quite annoying. :confused: :mad:
     
    nanomess, Oct 8, 2007 IP
  2. KatieK

    KatieK Active Member

    Messages:
    116
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    58
    #2
    I've had that happen when I use a list inside a floated element, just like you're doing. It has to do with the way that IE works with floated elements. I recommend that you use conditional comments or a hack to give the larger margin to IE, and leave the margin as you like for the other browsers.
     
    KatieK, Oct 8, 2007 IP
  3. nanomess

    nanomess Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for the fast response KatieK,
    I would have prefered not to use conditional comments, but I'm up for using IE hacks. I assume this bug would appear in IE6 too, so what hack can I use that would just target IE versions only and how would I put it in context?

    Cheers,
    nano
     
    nanomess, Oct 8, 2007 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    The only reason you are seeing them in the first place is the margin-left on the #maincolumn - remove that and it's off the side of the screen.

    Browsers do NOT space list bullets equally, there being a WILD variance between them. The only real solution is to either overpad the devil out of them, or set list-style to none and put the numbers in by hand.... That or use list-style-position:inside; if you can live with that behavior.

    SOMETIMES you can pull off a 'close enough' using margins and text-indent though.

    #maincolumn ol {
	margin: 0 0 20px 1.35em;
	list-style-position:inside;
	text-indent:-1.35em;
	background:#CCC;
}
#maincolumn ol li {
	margin: 5px 0 0 0;
}
    Code (markup):
    The problem is when it goes to two or more digits, you need to play with the margin and text-indent... but if you have less than ten items, this at least comes CLOSE to appearing the same cross browser.

    If only marker-offset actually did something on OL's.
     
    deathshadow, Oct 8, 2007 IP