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
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