<dl> Tag: Vert. Align. <li> elements with <dd> elements?

[cptk]

How can I get the <li> elements vertically aligned with the <dd> elements? For some reason the <li> elements are a few spaces to the right when compared to the <dd> elements.
...thanks!!!

Sample Code:

<td>
<dl>
<dt class="cLABEL">Owner:
<dd class="cDATA">Craig
<dt class="cLABEL">Dogs:
<dd>
<ul class="cLIST">
<li>fluffy</li>
<li>butch</li>
<li>fefe</li>
</ul>
<dt class="cLABEL">Cats:
<dd class="cDATA">blahblah
<dt>
</dl>
</td>

 

[tsdragon]

Use CSS to assign a left margin to both of them:

dd { margin-left: 10px; }
li { margin-left: 10px; }

That should override the default and get them to line up.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[manarth]

IIRC, their respective parents <ul>, <ol> and <dl> also have different margins.
<ul> and <ol> also have different behaviour based on the list-style-position (inside or outside).

The W3C page on list items also mentions marker-offset, but AFAIK it's not particularly supported.

<marc>

 

[cptk]

Tracy -

margin-left: did the trick, although I couldn't set <dd>'s class margin to the same value as <ul>'s class margin (since I'm using a CSS class not for each <li> but for the <li>'s parent, <ul>.

I'm need to explore the subtilizes of margins with the various tags ...thanks!

 

[tsdragon]

manarth: I was afraid that was the case. unfortunately I lot of getting things to work the way you want them to with css is simply trial and error.

cptk: glad I was able to help. The MSDN HTML and DHTML Reference is a good reference for all the css attributes you can apply to a particular element. Check into the padding attribute too. Different elements can have different padding that also affect alignment.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.