Skip to main content

Disappearing bullets in IE

Last week, I had a frustrating experience trying to restyle a simple nav bar. The problem was cross-browser: everything looked great in Firefox, but I was getting drastically different results in IE. The issue at hand? Disappearing bullets.

Skip to solution

The Case of the Missing Bullets

As is common, I had created my nav bar using an unordered list. As is also common, I wanted the list to be displayed horizontally, and had used the CSS float property to achieve the effect.

The markup:

<ul>
  <li>Home</li>
  <li>Articles</li>
  <li>Petitions</li>
  <li>Contact</li
</ul>

And the CSS:

li {
  float: left;
  padding-right: 20px;
}

Unfortunately, floating the list items caused IE to stop displaying the bullets, giving me something like this:

 Home     Articles     Petitions     Contact

Looked like yet another IE bug was stinging me in the ass.

After Googling for some solutions, I realized that there was a good deal of confusion on the issue – some people said it was a bug in IE (based primarily on the fact that Firefox and other more standards-compliant browsers displayed the bullets), but others said that IE was following the CSS spec. Although I was tempted to accept the former explanation as it fits very neatly into my worldview, I ditched the message boards and went directly to the spec.

Spec Check

Here's a link to the relevant section on floats from the CSS spec. What we're interested in boils down to two things:

If 'float' has a value other than 'none', 'display' is set to 'block' and the box is floated.

and

The [floated] element generates a block box that is floated ... The 'display' is ignored, unless it has the value 'none'.

Wow. Pretty unambiguous. To paraphrase: the existing display property of the floated element is ignored and automatically set to block, unless the display is set to none, in which case no box is created (and nothing is floated). True, list items are block-level elements. But that is not the same as having a display of block – and elements with a display of block do not get bullets (read the spec). Further, it should not be possible to write a declaration like this ...

li {
  float: left;
  display: list-item;
}

... and have the display property be honored. Firefox and Opera both allow me to do this. IE does not. And for once in its life, IE is correct.

A Solution

The easiest solution I found was to use an image and the list-style-image property to replicate the bullets, and to use a little padding to provide separation between the list item and the bullet:

li {
  float: left;
  list-style-image: url(images/block.jpg);
  padding-right: 4px;
}

To be sure, there are far more complicated solutions out there, but this is just as good (or better): it works in IE6, IE7, Firefox 2.x and Opera 9.x, and it doesn't break any standards that I'm aware of.

I Find A Way for IE to be Wrong

IE may interpret the spec correctly, but I ask you: aren't bullets one of the fundamental properties of lists? Is a list without bullets still a list? Well ... yes. Off the top of my head, restaurant menus and grocery lists are two lists from real life that generally don't use bullets, and most people have no problem understanding them. But the real question is: should list items ever be prevented from having bullets?

Standards-aware web designers are trying to create something that is compliant and semantically meaningful when they use floated, unordered lists for navigation, and the expectation that bullets appear for floated list items is both reasonable and correct. In my opinion (and you are welcome to disagree), Firefox and Opera's interpretation of the float property, while a faulty reading of the spec, is correct from a philosophical point of view.

IE deserves some credit for interpreting the spec correctly. You gotta give them that much. But in its anomolous zeal for adhering to the standard, Microsoft has created the perverse situation in which a web developer has no control over whether a list item can have a bullet.

Well-played, IE. Well-played.

I don't think this is a solution.

I haven’t floated my ul/li elements at all and I have no other lists on my page, yet my lists disappear in ie7. Perhaps this is a different bug.

I don’t think I should have to use images whenever I use an unordered list as this is basic code and should work.

I’ve also tried adding float:none, display:inline, and display:block,

This solution is more of a workaround then a fix.

floating list items

Hi,

I have been experiencing the floating list items problem you describe.. although coincidentally I have been using an list-style-image anyway - this still does not seem to display correctly in ie6 or ie7..

this is the code -

ul.homelist li {
float:left;
width:340px;
line-height:1.6em;
list-style-image:url(images/listIcon.gif);
 }

any help would be appreciated!

ta

What about ordered lists?

This will work great when you are using a bullet, but what about a solution for ordered lists? I need to order a list of form fields, and the way I have the code written won’t work in IE because numbers disappear.

I fixed it by adding a ’

I fixed it by adding a ’ display:inline’ to the ul.

Re: I fixed it by adding a ’

Brilliant! Thank you so much–finally a simple solution. I’ve been messing around with this for hours and your solution works perfectly.

Worked for me, too! Thank

Worked for me, too! Thank you for that!

thanks it worked for me

thanks it worked for me ‘display:inline’ for ul!!

Perfect Answer/Solution

Hi, I am just looking for a solution for a problem which I am facing from the last few hours. My problem was when I add

<

ul> tag the list items, bullets are disappearing, So I just added style=’padding:0; margin:0;display:inline’ it worked!!!!!!!!!!!!.

Thank you so much!!!!!!!!!!!!

Having a problem in IE 7

I’m having a problem with a bulleted list in IE7, they dont show. They do show in Firefox though on http://www.websitedesignchicago.us/chicago-website-design-portfolio.html any one know the problem?

list images

I’ve had this problem - using list images instead of bullets when floating the list items -

set the ul to list-style-type:none, then set the li with the background image (don’t use list-style-image).
You will need to use background position and padding to get it just right…

my code:

ul.ExtGteeOffer {
width:775px;
list-style-type:none;
 }

ul.ExtGteeOffer li {
float:left;
width:370px;
background:url(../images/tick.gif) -10px -0px no-repeat;
line-height:2em; }

Use this code for

Use this code for disappearing list image in IE7:

background: url(“../images/bullet-red.gif”) no-repeat scroll 0 5px transparent;

Thanks,
 Mani.

Sometimes the issue with

Sometimes the issue with hidden bullets in IE is not floating, but elimination of the margin. IE puts its bullets in the margin; no margin, no bullets.

this is right - most often it

this is right - most often it is a lack of margin on the list items..

same for display inline-block

make a li display: inline(-block) and in most browsers including IE and FF the bullets disappear.
I don’t mind this to be the default, but I should still be able to choose to do show the bullets or in case of ordered lists the numbers.
A text like this is perfectly valid (free after http://www.alistapart.com/articles/taminglists/):
A bit of text before the list appears. Perhaps the context is something about a husband getting a call from his wife to pick up a few things on the way home from work. It doesn’t really matter, for our purposes we just need some preceding text before the list: 1 Item a 2 Item b 3 Item c 4 Item d 5 Item e we’ll make a bit longer so that it will wrap. And then there is the text that follows the list in the paragraph. One or two sentences is sufficient for the example.

Solution for IE7 - no image

Great post following the logic i made this

for this case

in css
set “li” like that
.ul li {
float: left;
list-style-type: none;
 }

and “a” tag like that
.ul li a {
float: none;
list-style-position: inside;
list-style-type: square;
display: list-item;
 }

i hope be useful

Solution for IE7 - no image

Great post following the logic i made this

for this case
<ul>
<li><a >ejemplo 1</a></li>
<li><a >ejemplo 2</a></li>
<li><a >ejemplo 3</a></li>
</ul>
in css
set “li” like that
.ul li {
float: left;
list-style-type: none;
 }

and “a” tag like that
.ul li a {
float: none;
list-style-position: inside;
list-style-type: square;
display: list-item;
 }

i hope be useful

I had the same problem of not

I had the same problem of not appearance the bullets of a list in IE. Everything was ok in mozilla and google but not in IE.
I tried the solution that i saw in this topic, and set in my css the ul ’display:inline’. The problem was solved in IE but in mozilla and google the appearance became a real mess. I read that the problem with the IE was in the margins so i made experiments with the margins and
I Fixed the problem when i put a
ul{
margin: 0px 0px 0px 30px;
padding: 5px 0px 5px 0px;
}
in the css
Everything was ok with the bullets to all browsers

Important notice: if you have another declaration in your css for an another list (e.g with an image for li, the above solution will affect this too. So dont forget to the declaration of the other list return padding to 0s
like this
.spis {
list-style:none;
padding: 0px 0px 0px 0px;} //put this

.spis li {
padding: 2px 0px 0px 15px;
background: url(images/spis.gif) 0px 7px no-repeat;

Solution!

I’ve found a pretty simple solution, remove the ‘float:left’ from the ‘li’ and give the ‘li’ a left padding of around 20px or more, depending on your font-size.

This worked for me after hours of messing around with the CSS.

Solution (cont.)

Oh - and also give the ‘ul’ and equivilant left padding (the same as the ‘li’)

Another solution

I’ve had success adding {zoom:1;} to the ul li

Alternate Solution

HTML

  • 1.
  • 2.
  • 3.

CSS

ul
{
margin: 0;
padding: 0;
 }

ul li.number
{
width: 20px;
font-weight: bold;
float: left;
padding: 0;
margin: 0;
 }

ul li
{
width: 236px;
float: left;
font-weight: bold;
margin-right: 17px;
list-style-type: none;
 }

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.