List Bullet Disappear in IE7
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
.
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}
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
精彩评论