List Bullet Disappear in IE7

Question

About

So this question has been asked time and time again, but I noticed something a little different; see below.

Standard Info:

Bullet displays in FF
Bullet does not appear in IE

Finding

The bullet disappears when setting a hasLayout on the <ul> element, not the <li>; this is often accomplished when doing *{zoom:1}

Firebug in Internet Explorer

UL:

backgroundAttachment       "scroll" 
backgroundColor            "transparent" 
backgroundImage            "none" 
backgroundRepeat           "repeat" 
borderBottomColor          "#000000" 
borderBottomStyle          "none" 
borderBottomWidth          "medium" 
borderCollapse             "separate" 
borderColor                "#000000" 
borderLeftColor            "#000000" 
borderLeftStyle            "none" 
borderLeftWidth            "medium" 
borderRightColor           "#000000" 
borderRightStyle           "none" 
borderRightWidth           "medium" 
borderStyle                "none" 
borderTopColor             "#000000" 
borderTopStyle             "none" 
borderTopWidth             "medium" 
borderWidth                "medium" 
bottom                     "auto" 
clear                      "none" 
color                      "#000000" 
cursor                     "move" 
direction                  "ltr" 
display                    "block" 
fontFamily                 "tahoma, arial, helvetica, sans-serif" 
fontSize                   "0.9em" 
fontStyle                  "normal" 
fontVariant                "normal" 
fontWeight                 400 
height                     "auto" 
left                       "auto" 
letterSpacing              "normal" 
lineHeight                 "normal" 
listStyleImage             "none" 
listStylePosition          "outside" 
listStyleType              "disc" 
margin                     "auto auto auto 30pt" 
marginBottom               "auto" 
marginLeft                 "30pt" 
marginRight                "auto" 
marginTop                  "auto" 
maxHeight                  "none" 
maxWidth                   "none" 
minHeight                  "auto" 
minWidth                   "auto" 
overflow                   "visible" 
padding                    "0px" 
paddingBottom              "0px" 
paddingLeft                "0px" 
paddingRight               "0px" 
paddingTop                 "0px" 
pageBreakAfter             "auto" 
pageBreakBefore            "auto" 
position                   "static" 
right                      "auto" 
tableLayout                "auto" 
textAlign                  "left" 
textDecoration             "none" 
textIndent                 "0pt" 
textTransform              "none" 
top                        "auto" 
unicodeBidi                "normal" 
verticalAlign              "auto" 
visibility                 "inherit" 
whiteSpace                 "normal" 
width                      "auto" 
wordSpacing                "normal"

LI:

backgroundAttachment       "scroll" 
backgroundColor            "transparent" 
backgroundImage            "none" 
backgroundRepeat           "repeat" 
borderBottomColor          "#000000" 
borderBottomStyle          "none" 
borderBottomWidth          "medium" 
borderCollapse             "separate" 
borderColor                "#000000" 
borderLeftColor            "#000000" 
borderLeftStyle            "none" 
borderLeftWidth            "medium" 
borderRightColor           "#000000" 
borderRightStyle           "none" 
borderRightWidth           "medium" 
borderStyle                "none" 
borderTopColor             "#000000" 
borderTopStyle             "none" 
borderTopWidth             "medium" 
borderWidth                "medium" 
bottom                     "auto" 
clear                      "none" 
color                      "#000000" 
cursor                     "move" 
direction                  "ltr" 
display                    "block" 
fontFamily                 "tahoma, arial, helvetica, sans-serif" 
fontSize                   "0.9em" 
fontStyle                  "normal" 
fontVariant                "normal" 
fontWeight                 400 
height                     "auto" 
left                       "auto" 
letterSpacing              "normal" 
lineHeight                 "normal" 
listStyleImage             "none" 
listStylePosition          "outside" 
listStyleType              "disc" 
margin                     "auto" 
marginBottom               "auto" 
marginLeft                 "auto" 
marginRight                "auto" 
marginTop                  "auto" 
maxHeight                  "none" 
maxWidth                   "none" 
minHeight                  "auto" 
minWidth                   "auto" 
overflow                   "visible" 
padding                    "0px" 
paddingBottom              "0px" 
paddingLeft                "0px" 
paddingRight               "0px" 
paddingTop                 "0px" 
pageBreakAfter             "auto" 
pageBreakBefore            "auto" 
position                   "static" 
right                      "auto" 
tableLayout                "auto" 
textAlign                  "left" 
textDecoration             "none" 
textIndent                 "0pt" 
textTransform              "none" 
top                        "auto" 
unicodeBidi                "normal" 
verticalAlign              "auto" 
visibility                 "inherit" 
whiteSpace                 "normal" 
width                      "auto" 
wordSpacing                "normal"

Any idea why setting a layout to <ul> modifies the bullet?
I thought it might be the margin/padding, but Firebug in IE is showing the same w/|w/o hasLayout.

Bare Page Example:

   <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   <html>
   <head>
      <title>Default</title>
      <style type="text/css" media="all">ul {zoom:1;}</style>
   </head>
   <body>
      <ul>
         <li>foo</li>
         <li>bar</li>
         <li>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
             foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar
         </li>
      </ul>
   </body>
   </html>

Try the above in IE7 w/ and w/o the zoom:1.
Note: because this deals with hasLayout other versions of IE are probably affected.

Could you post some HTML and CSS? Or link to a test page demonstrating the bug? — Paul D. Waite, Oct 21 '10 at 15:06
@MatTheCat: yes that will show it, however you're losing the alignment of the text. The bullet would be displayed in the same container as the text, rather than to the left of it. When text expands multiple rows, you'll see what's happening. — vol7ron, Oct 21 '10 at 15:37
@Paul: jsFiddle isn't producing the error correctly, so I provided some example HTML. — vol7ron, Oct 21 '10 at 15:52
Very weird, I didn't know this bug. You can apply a padding-left with a background-image for
@MatTheCat: Yeah, same here. I'm sure the problem's been addressed before, but it was 1) not documented well, or 2) went unnoticed as being a `hasLayout` bug, since many things can change the layout property of a list. -- IE doesn't want you setting hasLayout to all elements because of the performance and memory implications, but over the years I grew tired of putting up with the IE/FF layout differences. — vol7ron, Oct 21 '10 at 20:48

score 12 · Accepted Answer · answered Oct 21 '10 at 16:00

12

I found:

setting li {margin-left: 1em} does the trick
at {margin-left:9px} you'll start seeing the edge of the right edge of the bullet

Another interesting thing is that triggering the hasLayout on the list item (<li>), will force the bullet to the bottom of the text block. Thus, if you're using something like *{zoom:1}, you'll need to vertically align your li at the top: li{vertical-align:top}

answered Oct 21 '10 at 16:00

vol7ron

40,809
21
119
172

1

This is the first thing I tried, too. Apparently the zoom modifies the margin for IE (go figure). – Traingamer Oct 21 '10 at 18:43
Yep you seem to have answered your own question, margin-left reveals the li marker. Note: Page is rendered in BackCompat mode since you are using an old doctype. – meder omuraliev Oct 21 '10 at 19:18
Hey if you don't mind I have added the vertical align bug to my repository of bugs. http://work.arounds.org/issue/90/list-marker-displays-bottom-when-given-layout/ – meder omuraliev Oct 21 '10 at 19:31
Of course I don't mind, it's nice that there are collection of bugs. I would have figured that this would be listed somewhere - I'm sure it is, I just haven't come across it yet. AListApart is usually good at these kind of stuff, they probably have it there somewhere. -- BTW the `1em` margin is only a local and non-definitive fix, it'll vary probably by font and size. – vol7ron Oct 21 '10 at 20:41

Willem · Answer 2 · 2010-10-21T16:27:01.223

1

Because of different bullet positions and sizes across browsers and browser versions I stopped using the default bullets and now replace them with an image. This fixes all problems I had with bullets, and you can now easily change size, color and shape of the bullets.

ul{ 
    list-style-type: none;
    list-style-position: outside;
}
ul li{
    margin:0; 
    padding: 0 0 0 16px;
    background: url(bullet.gif) no-repeat left center;
}

For printing you can add a css file that uses the default bullets because images aren't always printed.

This does not work for numbered lists (<ol>) so don't forget the ul css selector

edited Oct 21 '10 at 16:27

answered Oct 21 '10 at 16:20

Willem

5,364
2
23
44

I don't typically use bullets, but when I do I am also a fan of custom bullets, as you suggested. I just noticed this in testing. Been expanding my jQuery horizons and working with sortable lists. There are a few other weird behaviors that involve when dragging/dropping. – vol7ron Oct 21 '10 at 20:45