Bulleted Lists: Multi-Layered Fudge - 2

Last Updated on Wednesday, 23 March 2011 12:05

The spacing gremlin

IE 6 leaves an equal amount of space before and after the ULs. However, later versions of Mozilla (1.7.3), Opera (7.54) and Firefox (1.0) leave space before the ULs, but none after. To ensure that the space before and after the ULs is equal, we’ll assign a padding of 15px to the top and bottom of the ULs, like so:

  #div {width: 800px;}
  
  ul.left {
    float: left;
    width: 400px; 
    margin: 0px;
    padding: 15px 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
  }
  
  ul.right {
    float: right;
    width: 400px; 
    margin: 0px;
    padding: 15px 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
  }

IE 6 is happy. There’s some space left after the ULs in Mozilla, Opera and Firefox, but the space before and after the ULs is still not exactly equal. This uneven spacing is a result of the default space left after the preceding paragraph, so it’s the paragraph that needs defining to correct this. Defining the margin or padding at the top of our ULs will not solve this problem.

We want to cook our fudge to perfection, so we’ll add a paragraph class and called .no-space and set its margin and padding to 0:

  .no-space {
    margin: 0px;
    padding: 0px;
  }

We’ll also change the markup to include this paragraph class:

<div id="div">

  <p class="no-space">Lorem ipsum dolor sit
  amet, consectetur adipisicing elit, sed do
  eiusmod tempor incididunt ut labore et dolore
  magna aliqua. Ut enim ad minim veniam.</p>

  <ul class="left">
    <li>Item 1: Left</li>

    <li>Item 2: Left</li>
  </ul>
  <ul class="right">
    <li>Item 3 Right: A long item</li>
    <li>Item 4 Right: This is longer, just for
        fun</li>

  </ul>

  <p class="no-space"> Duis aute irure dolor
  in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat.</p>

  <ul class="left">
    <li>Item 1 Left: Varying length</li>

    <li>Item 2 Left: This one varies in length,
        too</li>

  </ul>
  <ul class="right">
    <li>Item 3 Right: This is shorter</li>

    <li>Item 4 Right: Right</li>
  </ul>

  <p class="no-space">Pellentesque et erat.
  Quisque at quam. Donec accumsan tellus at tellus.
  Donec  metus. Sed sit amet ante vitae metus
  imperdiet varius.</p>

  <ul class="left">

    <li>Item 1 Left</li>
    <li>Item 2 Left</li>
  </ul>
  <ul class="right">
    <li>Item 3 Right: Another long item</li>

    <li>Item 4 Right: Right</li>
  </ul>

</div>

Now it seems everyone’s happy, more or less. We’re almost done.

It would look better, though, if the left column of bullets was indented, rather than being stuck to the left margin. To achieve this end, we’ll do the following:

1. Declare relative positioning for the left UL.
2. Specify its distance from the left. In our example, let’s make this distance 50 px.

The CSS now reads:

  #div {width: 800px;}
  
  ul.left {
    float: left;
    width: 400px; 
    margin: 0px;
    padding: 15px 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
    position: relative;
    left: 50px;
  }
  
  ul.right {
    float: right;
    width: 400px; 
    margin: 0px;
    padding: 15px 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
  }
  
  .no-space {
    margin: 0px;
    padding: 0px;
  }

Things are looking good. That’s it from me, really. Oh, and you can view the page that gave me the two-list headache in the first place. The technique used there is quite similar.

I hope you enjoy the multi-layered fudge. Add your own yummy gif bullets and serve piping hot!

First published February 2005 in A List Apart [Issue 195] by Nandini Doreswamy from Helion.