CODEWITHSUNDEEP
htmlcssinternet-explorerhtml-lists
yeeha1
yeeha1

Reputation: 569

List bullets not displaying correctly in Internet Explorer

I have an <ol> with some <li>'s in it, in FF it looks good, but for some reason in IE it looks like this:

List Bullet weirdness in IE

HTML:

 <ol start="1">
   <li>Free gifts click here</li>
   <li>Free gifts click here</li>
   <li>Bonus gifts</li>
 </ol>

CSS:

ol {
    list-style: none outside none;
}
li {
    list-style: decimal outside none;
    margin-left: 30px;
    margin-bottom: 12px;
}

Any idea?

Thanks,

Upvotes: 2

Views: 10901

Answers (2)

Jason
Jason

Reputation: 100

You may want to try adding the property float: left; to every li:

li {
    list-style: decimal outside none;
    margin-left: 30px;
    margin-bottom: 12px;
}

Edit: Also for future reference you may want to make it, just so if you add future rules for li they will not overlap and ol li remains the most specific.

ol li {
    list-style: decimal outside none;
    margin-left: 30px;
    margin-bottom: 12px;
}

Upvotes: 0

clairesuzy
clairesuzy

Reputation: 27654

hasLayout is involved here somewhere it's the cause of <ol>'s not numbering correctly as well as a few other lists oddities, you will need to post more CSS for the list so we can see if there is a workaround for your case, but meanwhile here's code that will reproduce it

ol {
    list-style: none outside none;
    background: #444;
    color: #fff;
}
li {
    list-style: decimal outside none;
    margin-left: 30px;
    margin-bottom: 12px;
    zoom: 1;
}

the key is to keep hasLayout off the li element, in order to do that you have to make it so IE does not have to do any counting!, in this case the left margin means it's having to count to calculate the width - so if those items inside the list are links, perhaps you could remove the left margin from the li and add padding to the links instead?

definitely need more code for the use case though

Update:

some problems with ordered ;lists aren't curable, and the recommended solution is to wrap the ol in a div and apply any widths and colouring to that, and any heights to nested elements (like internal links) so that the list elements themselves can be left to default

See the lists section on; On Having Layout

Some of these problems cannot be cured, so when the markers are desired it's better to avoid layout on lists and list elements. If it's necessary to apply some dimension, this is better applied to other elements: for example a width can be applied to an external wrapper, and a height to the content of each list item.

so bearing this in mind and presuming you list elements do contain links (they do say Click Here ;))

div {
  width: 180px;
  overflow: hidden;
  background: #444;
  color: #fff;
}

ol {
  padding: 0 0 0 30px;
  margin: 0;
}
li {
  margin-bottom: 12px;
}

a { 
  background: #444;
  color: #fff;
  text-decoration:none;
  display: block;
  line-height: 30px;
}

a:hover {
  color: #444; 
  background: #fff;
}

with

<div>
 <ol start="1">
   <li><a href="#">Free Gifts Click Here</a></li>
   <li><a href="#">Free gifts click here</a></li>
   <li><a href="#">Bonus gifts</a></li>
 </ol>
</div>

Upvotes: 6

Related Questions