A bug with about three pixels

Test:: buggy!
Test:: buggy!; Yay

Code

<dl>
 <dt>Test:</dt>
  <dd><span>buggy!</span></dd>
 <dt>Test:</dt>
  <dd><span>buggy!</span></dd>
  <dd><span class="last">Yay</span></dd>
</dl>

See the above in Internet Explorer (6 for example). On the left side of the two buggy yellow fields (span elements) there's a 3 pixel gap.

There are lotsa pages with explanations and fixes for this:

And probably more.. Anyway, a quick fix would be to provide IE the following code through a conditional comment:

dd { margin-left: 0; height: 1%; }

Rendered as

Test:: buggy!
Test:: buggy!; Yay

However

In this example that's crappy, cause I don't want to put an extra class on the dd. Because I'm already using a class on the span in the last dd I could use a negative margin:

dd span { margin-left: -3px; }
dd span.last { margin-left: 0px; }

Test:: buggy!
Test:: buggy!; Yay

Yay!

Some other tests

With `div` elements (block level that is)

Test:: buggy?
Test:: buggy?; Yay

Without any elements inside the `dd`

Test:: buggy?
Test:: buggy?; Yay

Home - More stuff