Positioning questions on <dl> <dt> <dd>

4. There is a starting space to push the content of the <dd> a little to the right. Padding did not work. Why not? What is a better way to pad the content?

Its a good learning point, to check how your html displays in different browsers with no styling. In FF with the Web Developer you can simply disable all styling.

If you do that you'll see that browsers assign some default indent to dd elements. That default indent, is probably padding-left but it could be margin-left and from your description amounts to 40px with your current font-size.

Moral, when you want to know where extra space is coming from, make sure you are controlling the relevant margin and padding values.

You might want to peruse this article:

http://www.maxdesign.com.au/presentation/definition/

Thanks guys

I later on indeed noticed that IE displays the table entirely differently.

thepineapplehead: the articles at maxdesign suggests that in this case <dl> lists are not the ideal option as I need a quite elaborate topology for my purposes; back to tables then.

Tech

What are you trying to achieve? Maybe a mockup gif could help us see and suggest tables or a <dl>.

pineapplehead, I haven't checked this forum in a while, but for the record included is a mock up of the type of styling I was pursuing.

The styling I came up with is included below.

Best wishes

technossomy

<style type="text/css">
body { font: normal 10px Arial, sans-serif; }
td { padding: 3px; margin: 0; font: normal 12px Arial, sans-serif; }
thead td { color: white; font-weight: bold; background-color: #986; border-top: solid 3px #653; }
thead td.channel { font-weight: normal; background-color: #DDC; border: 0; }
tbody td { border: 0; border-bottom: solid 1px #FED; }
tbody td.hmetric, td.hvalue { font-weight: bold; background-color: #FEC; border-left: solid 1px #EEC; }
tbody td.metric { background-color: #FFD; border-left: solid 1px #FED; }
tbody td.value { background-color: #FFE; border-right: solid 1px #FED; }
tfoot td { }
tfoot td.logo { font: normal 10px Arial, sans-serif; }
</style>

http://webbedit.co.uk/scrapbook/technossomy/

I use DL loads to layout forms etc. so happy to put together an example for you. Needs the width to be restricted but otherwise is very close to your graphic example.

Hope it helps.

Thanks webbedit. Looks good.

What I particularly like about your example is that there is no need to fiddle around with margins, as - in my case - commonly no margining is required between the text and the border or the viewport. The style element "border-collapse: collapse" which is to be used with tables for this purpose is not always suited.

Best

tech

Try reducing the page width so that an item needs to fit over two lines. It falls apart. :?

I use

<dl>
<dt><span> ... </span><dd> ... </dd>
<dt><span> ... </span><dd> ... </dd>
...
</dl>

clear the dt and float the span.

wouldn't this be an appropriate place for a table?

That is an argument that could go on for a while, it really looks suited to a definition list to me. Someone else may think differently.

I would favor table on this one, though a dl would be semantic, too, if the order is kept. The fact that each 'field' has a header, and that the fields could be re-ordered says table more than definition.

I.e.; the term (dt) ^AEX is defined (dd) as Amsterdam Exchange. The reverse is not strictly true. Whereas, the header 'index' for ^AEX and the header 'description' for Amsterdam Exchange is true in either order for a given record (row).

Strictly speaking, the data (td) are described by the headers (th) for each column, and the data are related in a positional manner for each record (tr).

cheers,

gary

I'd use a table