List Display Problems In Explorer For Windows - Part One

By: John Gallant , Holly Bergevin ,

Page 1 of 2

Set for printing

Next

All experienced coders know what a basic HTML list is supposed to look like. The list itself is a block level element similar to a paragraph, and its contained list items are also block elements, each occupying a new line inside the list. At the start of each list item a "bullet" marker of some kind is generally displayed, either as a symbol generated by the browser, or as an image supplied by the page author.

In general, lists work very well across browsers, even when they contain nested sublists. When lists appear to misbehave, it is usually a browser that is causing the problem, and frequently the problem browser is Internet Explorer for Windows. In this series we'll be discussing lists, what Explorer does to lists, and what can be done about it.

Bullet Point Particulars

Before we can talk about bullet problems, we need to understand their default behaviors. Let's start with a plain list, as seen in Code Block 1 and Demo 1.

<div style="border: 1px solid blue;">
 <ul style="background: #edb;">
  <li>List Item 1</li>
  <li style="background: #dff;">List Item 2</li>
  <li>List Item 3</li>
 </ul>
</div>

Code Block 1

  • List Item 1
  • List Item 2
  • List Item 3

Demo 1

The blue border outlines a containing DIV which our list "lives in." We've given the list itself (UL) a tan colored background, and the second list item is colored light green, so that the list items' actual positions may be made clear.

As Image 1 shows, the bullet markers are outside the list items, which makes sense since {list-style-position: outside;} is the default value for lists. If the value was changed to inside then the bullets would move into the list items, displaying as if the bullets were the first characters in the list items ({list-style-position: inside;}, not shown).

Examples of the simple list display in 
three different visual browsers.

Image 1: IE and Opera use left margin, Firefox uses left padding.

Note how the overall positions of the bullets and text are consistent across browsers, but the position of the list itself is different in Firefox. All browsers do indent the list so the bullets will display within the DIV container, but they have chosen different ways to do this. Gecko-based browsers like Firefox use 40px of left padding inside the tan list box, and so does Safari for the Mac. On the other hand, IE (Win and Mac) and Opera use 40px of left margin outside the left end of that same tan colored list.

This seems to be one of those unfortunate conflicts that just happened by itself in the evolution of the different browsers. The W3C is very loose when it comes specifying the actual rendering of a list, and does not even indicate precisely where the bullet marker is to be generated! Perhaps we are lucky there is even a semblance of cross browser conformity.

The spaces above and below the lists are default vertical margins, that appear in all browsers with the exception of Opera 7, which did not apply bottom margins to lists or paragraphs. Opera 8 has corrected this strange behavior, bringing Opera into line with the other browsers.

The USS "Explorer" Shows A Bad List

Imagine that an innocent new coder decides to alter margins and or padding for lists. The results are likely to be extremely confusing, not to mention maddening. This is why it's a very good idea to zero out all paddings and margins on lists at the start of the style sheet, and then make any needed adjustments to these properties later in the CSS. That way you get consistent results across all browsers, at least with most lists.

Unfortunately, things become more complicated when IE/Win is one of the browsers being considered. Let's look at the same live list demo, but with all paddings and margins zeroed out.

The HTML:
 
<div style="border: 1px solid blue;">
 <ul style="background: #edb;">
  <li style="">List Item 1</li>
  <li style="background: #dff;">List Item 2</li>
  <li style="">List Item 3</li>
 </ul>
</div>
 
The CSS:
 
ul, li {margin: 0; padding: 0;}

Code Block 2

  • List Item 1
  • List Item 2
  • List Item 3

Demo 2

Below you can see screenshots showing that everything is tightened up, and it's clear now that the bullets themselves are simply appendages to the list items. They display completely outside the lists, just as the default list-style-position rule says they should. There is a problem however. Where are IE's bullets?.

Examples of the simple list with margin and 
padding removed, in three different browsers

Image 2: Give back my bullets!

In fact, the bullets are really still there in IE6, but that browser has a well known difficulty with showing content when it is forced outside of its container, usually as a result of applying negative margins. Although these bullets are not your typical box content, they are connected to the list items, and are clearly being forced to display outside of the DIV container, so this IE bug is at least being semi-consistent.

We say "semi-consistent" because in fact these bullets would still show in IE6 if only the DIV container were involved, but this tutorial page's column is formed by an overall containing DIV surrounding our demo DIV, and these bullets are forced to go outside that column DIV as well. Apparently IE6 can generate visible bullets if they protrude outside just one container, but two is one too many.

Note that the list UL itself is not involved in this IE disappearing act. The bullets are always displayed outside a list that has its left margin intact, since not to do so would be too glaring a bug even for Microsoft to ignore!

It's interesting to note that these bullets do not vanish when viewed in IE versions previous to IE6! Therefore the whole "vanishing bullets outside the box" issue was foisted on us when Microsoft "upgraded" the IE5.5 browser. Proof positive that newer browsers are not necessarily better browsers.

Page 1 of 2 1 2 Next


download
Download Support Files


Downloads are disabled during your trial period.


Keywords
CSS, list, list-style-position, bullets, missing bullets, list items, padding in lists, margin in lists, vanishing bullets, disappering bullets