Demo of List Margins, Padding, and alignment of text and Images

I recently discovered a case where images in an unordered list in Firefox seem to escape the containing box, and generally behave very badly. The bug was fixed in version 3.5 (see screenshots) The discovery of the bug was the original inspiration for this page, however I'm keeping the page here as a demo of the behavior of lists, which still vary in subtle ways between browsers. Default margins and padding are important with lists because they are open to be set at the discretion of the user agent, and unsurprisingly are different from one browser to the next. The first example can be considered a base case which is the foundation for the following examples. It leaves the defaults untouched, so you will notice significant differences in the results from one browser to the next. I also used this page to develop some javascript that can show or hide page content, based on the class assigned to it. Just "view source" to see how that works.


Example 1

This is a simple unordered list, with <li> elements inline in order to turn the list sideways, like a horizontal list-based menu. Each <li> contains an image (directly inserted, not as background). Here is the markup

<div class="hlist">
  <ul>
    <li><img src="/images/storm.png">text</li>
    <li><img src="/images/jupiter.png">text</li>
    <li><img src="/images/butterfly.png">text</li>
    <li><img src="/images/flower.png">text</li>
  </ul>
</div>

Here are the key styles, which primarily assign the red, blue, and green colors to help illuminate the behavior. The only non-cosmetic entry is "display:inline" on the <li> element

.hlist    {border: 3px solid red;   background:#FFD2D2; width:600px;}
.hlist ul {border: 2px solid blue;  background:#CECEFF;}
.hlist li {border: 2px solid green; background:#BFDAB8; display:inline; }

The original example that got me started on this demo had only images and not text. I have added text to each <li> because I think it helps in figuring out exactly what each browser is doing.

 

Colors have been added to show each block:

In this first example, we see the impact of default margins on the top and bottom fo the <ul> in Firefox (light red area), and the initial left-padding of 40px on the <ul> (blue area to left of first list item)note top and bottom margin space (or lack thereof) is based on browser defaults. Firefox shows top and bottom <ul> margins of 1em, and left padding of 40px. IE shows bottom and left margin on the <ul>, but not padding. The <ul> box expands to fill the container horizontally, and to contain the images vertically.

Example 2

.hlist.two ul, .hlist.two li {padding:0;margin:0;}

By zeroing out padding and margin in <ul> and <li> the presentation becomes similar cross browser.

Example 3

.hlist.three ul { display:inline;}

applying display inline on the <ul> element has some similar effects to removing default margins, but has other effects that can be problematic.

Example 4

.hlist.four ul { vertical-align:top;}

No real effect from vertical-align on <ul>

Example 5

.hlist.five ul {vertical-align:top;display:inline;}

Combining display inline and vertical-align:top on <ul> element creates the strange effect of allowing the images to escape the top of the box in FF. The images behave as if positioned absolutely, and will cover up adjacent content. This behavior is not observed in IE6, IE7, Chrome, Safari/Win, Opera. Seems like a FF bug.

Example 6

.hlist.six ul {vertical-align:bottom;display:inline;}

No change between vertical-align top and bottom

Example 7

.hlist.seven ul {vertical-align:bottom;display:inline;}
.hlist.seven ul img {vertical-align:bottom;}

Adding a vertical-align to the image gets the strange behavior back under control in FF.

Example 8

.hlist

Text only with defaults. Notice the gaps between li. Foatutorial says "When list items are converted to inline, they have a set amount of padding on their left edges that connot be removed. hmmm.... obviously true, but why? http://css.maxdesign.com.au/floatutorial/tutorial0605.htm

Example 9

.hlist two

Text only, with default margins and paddings zeroed out. Note the gaps that remain between items in FF but not IE

Example 10

.hlist two

Text only, with default margins and paddings zeroed out and <li> floated left.

Note that float clearing inside the <ul> has a problem in IE.
Example 11

normal vertical layout shows li boxes containing images, unlike horizontal behavior

Example 12

.limited the width on the ul to force vertical layout

Return to tightCSS Home Page