Internet Explorer, hasLayout and ordered lists

During Saturdays and Sundays I generally work on the restyling of my main site. I was testing a code like this:

.list-container {
  height: 100%;
  background: #eee;
}

.list-container ol {
  height: 100%;
  background: #fff;
}

In Internet Explorer 6 and 7 the list markers (that is, the automatic numbering) disappear. This is due to the declaration height: 100% set on the list. In this case, giving layout to the element causes the bug. Removing the height declaration on the list fixes the bug. On ordered lists, even declaring an height on list items may cause the same bug, so be careful.

Leave a Reply

Note: Only a member of this blog may post a comment.