IE6 Text goes missing in dl tag

Question

I'm testing a website in Internet Explorer 6 and I am baffled by this issue.

I have a data-list on the page, which shows the amount to pay - here it is.

<dl>    
   <dt>Amount to pay:</dt>
   <dd class="note">
        <span id="total">£39.99</span> (includes delivery)
   </dd>
</dl>

The CSS rule for this is such that it lays out like this:

Amount to pay: £39.99 (includes delivery)

Which is made possible with this css

dt { float: left; width: 11em }
dd { margin-left: 15em }

Strangely though, the text "Amount to pay" goes missing in IE6. If I search for it by performing a "search this page" it does find the text, it just isn't at all visible.

Any suggestions, comments or insults welcome.

Answer 1

I believe that is the peek-a-boo bug in IE6. just add position:relative; zoom:1; to your dt and it should solve the issue.