Accessibility

CSS Advisor

IE6 does not display bullets on float or inline list items

by Brian Crescimanno on January 23, 2007
Edited by: mkavitha on December 4, 2009 Avg Rating 3.1 (15)   |   Log in to rate post.

Tagged with bullet , block , Display , Explorer 6.0 , list , display , li , ul , Float

Problem

Regardless of any declarations, IE6 will not display bullets on list items set to display: inline or floated.

Solution

I am unable to find a solution or workaround.

Detailed description

In IE6, if you create an unordered list as such:

<ul>
 <li>Element 1</li>
 <li>Element 2</li>
</ul>

And style with the following CSS:

ul { list-style: disc; }
ul li { float: left; }  /* or display: inline; */

IE6 will not display the bullet.  No margin or padding settings appear to "create the space" where the bullet would be displayed.




Tagged with bullet , block , Display , Explorer 6.0 , list , display , li , ul , Float

Tag it on del.icio.us or Digg

Text ID: IE6_DOES_NOT_DISPLAY_BULLETS_ON_FLOAT_OR_INLINE_LIST_ITEMS


Comments (8)

To add a comment, please Log in.




Don't Bother With The LI tag

by last cowboy on September 28, 2007

IE doesn't do lists well.  I wasted a fair amount of time before giving up.  Then I set up my bullet tag as a paragraph with an outdent and placed a bullet of my own choice (built in PS) in-line.  The paragraph tag looks like this:
<p class="navigation_list"> <a href="index.htm"><img src="images/small_ornage_bullet.jpg" alt="Orange Bullet" hspace="6" border="0"/>Home - Our Story</a></p> Works in all browsers and you can get the bullet image exactly the size you want and it appears in proper relation to the baseline.

Background image

by molly_mockford on August 1, 2007

Thanks to adragona and others for the solution to this infuriating problem!

Try "list-position" propery

by Mahesh Babu.R on March 27, 2007

Did you try list-position property for this issue?

usefull solution

by Dorian_fs on February 27, 2007

use tiny pic as bullets :

ul{
clear:both;
}
ul li{
  width:294px;
  float:left;
  padding:0 0 0 16px;
  text-align:left;
  line-height:27px;
  list-style-type:none;
  background:url(http://www.fscommand.com.cn/blog/wp-filez/dot.gif) 8px 12px no-repeat;
  font-size:14px;
}

Inside property

by Luke_G on February 6, 2007

Try adding  ul li {list-type:inside;}

Best Solution

by futurX on February 3, 2007

The use of a background-image and adding padding is the best solution, li {display: inline-block} does not work on a float right.

the proper solution

by missweblash on February 2, 2007

LI {display: inline-block}

solution

by adragona on January 28, 2007

You can use the background property instead. Put a background image to imitate the disc and then apply a padding-left to the element. It should work.





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (46)
Mozilla/Firefox (16)
Opera (8)
Safari (14)
CSS Properties
Background (6)
Border (3)
Color (1)
Float (15)
Font (1)
Margin (6)
Padding (4)
Position (15)
Text (13)
Width/Height (9)