How to align Definition Lists in IE6 ?

Posted by ellander on Stack Overflow See other posts from Stack Overflow or by ellander
Published on 2010-03-27T20:22:46Z Indexed on 2010/03/27 20:33 UTC
Read the original article Hit count: 186

Filed under:
|

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.

© Stack Overflow or respective owner

Related posts about css

Related posts about ie6