Styling a definition list

Hi Folks,

I have a list of definitions, and I would like to display them like:

----
Example is blah blah blah.

Foo is blah blah blah.

Example2 is blah blah blah.
----

I figured that because they are definitions, that I really should
attempt to use a definition list element, but getting it to look how I
want it is proving difficult.

The closest I can get is by styling both dt and dd elements as inline,
and removing the left margins on the dd elements, but this also causes
all of the definitions to run into each other.

Any ideas?

--
Dylan Parry
http://webpageworkshop.co.uk -- FREE Web tutorials and references

Dylan Parry wrote:

> Any ideas?

Having just had a bright spark ignite inside my head, I thought of trying:

dt {
font-weight: bold;
float: left;
margin-right: 0.3em;
}
dd {
margin-bottom: 1em;
}

and is appears to work in IE5+, FF and Opera. Can anyone see any
potential problems here?

--
Dylan Parry
http://webpageworkshop.co.uk -- FREE Web tutorials and references

Dylan Parry wrote:

> Dylan Parry wrote:
>
>> Any ideas?
>
> Having just had a bright spark ignite inside my head, I
> thought of trying:
>
> dt {
> font-weight: bold;
> float: left;
> margin-right: 0.3em;
> }
> dd {
> margin-bottom: 1em;
> }
>
> and is appears to work in IE5+, FF and Opera. Can anyone
> see any potential problems here?

No, I'd just add margin-left:0; to the dd style, in case of any
dt being less then 3 characters.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

On Tue, 01 Feb 2005 14:59:56 +0000, Dylan Parry
<usenet@dylanparry.com> wrote:

>Hi Folks,
>
>I have a list of definitions, and I would like to display them like:
>
>----
>Example is blah blah blah.
>
>Foo is blah blah blah.
>
>Example2 is blah blah blah.
>----
>
>I figured that because they are definitions, that I really should
>attempt to use a definition list element, but getting it to look how I
>want it is proving difficult.
>
>The closest I can get is by styling both dt and dd elements as inline,
>and removing the left margins on the dd elements, but this also causes
>all of the definitions to run into each other.

<delurk>
Far be it from me to offer help to my betters <g> but I came across
this site the other day:
<http://www.moronicbajebus.com/playground/cssplay/dl/>
Even if it's of no interest to you, it might be of interest to anyone
else trying to style a definition list. It seemed to have what I was
looking for, but haven't yet put into practice so don't know for sure.
</delurk>



--
Sally in Shropshire, UK
bed and breakfast near Ludlow: http://www.stonybrook-ludlow.co.uk
Reply To address is spam trap

Els wrote:

> Might be easier to fix the line-height instead, as bold just
> takes up more line-height than not-bold. Not sure if it's always
> 0.1em margin that will fix it, but if you just set a line-height
> to both the bold and normal fonts, they should always be equal.

I tried that, but it didn't seem to work properly. The space disappeared
okay, and it was wrapped correctly, but the bold text appeared to be
~0.1em above the rest of the text. Not sure if I can explain it properly :\

--
Dylan Parry
http://webpageworkshop.co.uk -- FREE Web tutorials and references

Dylan Parry wrote:

> Els wrote:
>
>> Might be easier to fix the line-height instead, as bold
>> just takes up more line-height than not-bold. Not sure if
>> it's always 0.1em margin that will fix it, but if you just
>> set a line-height to both the bold and normal fonts, they
>> should always be equal.
>
> I tried that, but it didn't seem to work properly. The
> space disappeared okay, and it was wrapped correctly, but
> the bold text appeared to be ~0.1em above the rest of the
> text. Not sure if I can explain it properly :\

No need to explain, I saw it for myself.

Must say, that my initial trial version used Verdana as font,
and then there is no need for either line-height or bottom
margin to wrap correctly. It's when using Arial that the problem
starts. Might wanna check a bunch of fonts to see which behave
how.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:

> Might wanna check a bunch of fonts to see which behave how.

Yeah. I've tried Arial on Windows, and Helvetica on Macs, and both seem
to display the same problem as I would have expected. I tend to avoid
using Verdana for reasons that are too numerous to discuss now.

Anyway, it all seems to work okay now in IE 5+, FF, Opera and Mac IE5.
In case you're interested, the final CSS I used was:

dt {
float: left;
font-weight: bold;
margin-bottom: -0.1em;
}

dl>dt { /* correct padding, not for IE */
padding-right: 0.3em;
}

dd {
margin-left: 0;
margin-bottom: 1em;
}

I added in the dl>dt bit because IE on both Windows and Mac was adding
in too much padding between the dt and dl, and it apparently has some
padding by default.

Cheers for your help though

--
Dylan Parry
http://webpageworkshop.co.uk -- FREE Web tutorials and references