How to align Definition Lists in IE6 ?

Question

I'm having a major headache trying to align some and elements in ie6. It looks fine in ie7 and firefox but the dt elements don't appear in ie6. can anyone help? here is the code..

<div id="listMembers">  
  <h3>Members</h3>
   <dl class="myDL">        
       <dt>Name</dt>        
       <dd>John Smith</dd>      
       <dt>Address</dt>
       <dd>the street</dd> 
       ...  
     </dl>  
     <div id="listOptions">         
        <div>
          <table>...</table>
        </div>
     </div> 
 <div>

and the css:-

DL.myDL {
    BORDER-RIGHT: black 2px outset; PADDING-RIGHT: 2px; BORDER-TOP: black 2px outset; DISPLAY: block; PADDING-LEFT: 2px; BACKGROUND: #ccbe99; PADDING-BOTTOM: 2px; BORDER-LEFT: black 2px outset; WIDTH: auto; PADDING-TOP: 2px; BORDER-BOTTOM: black 2px outset; FONT-FAMILY: "Trebuchet MS", Arial, sans-serif
}
DL.myDL DT {
    CLEAR: both; PADDING-RIGHT: 3px; DISPLAY: inline; 
    FLOAT: left;    
    WIDTH: 250px; TEXT-ALIGN: right
}

I basically want the dt text aligned to the right and the dd on the right hand side with left align text. I reset the margin on all elements to be 0 before anything else in the css and the elements are within a dive with position relative.

Answer 1

You need to force hasLayout on the DL. For example add DL.myDL { zoom:1 }