E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: John Foliot
Date: Mon, Sep 25 2006 12:10PM
Subject: <dt><dd> and CSS
No previous message | Next message →

All,

Does anyone know of a technique where-by I can group definition lists by
their pairs for CSS styling? What I am hoping to do is to visually style a
"box" which contains both the term and description, yet various attempts are
failing validation.

Any thoughts?

JF

From: John Foliot
Date: Mon, Sep 25 2006 2:20PM
Subject: <dt><dd> and CSS
← Previous message | Next message →

Many thanks to those that wrote back. The "best" solution suggested was a
variant on this:

<style type="text/css">
dl dt,
dl dd {
border: 1px dotted #000;
padding:.25em;
background:#ffd;
}

dl dd {
border-top: 1px solid #ffd;
margin-top:-1px;
margin-bottom: .5em;
}

</style>

Which worked fine in everything but the stoopid Blue E browser...

However, what I was really attempting to do was to use :hover and then style
the combined elements together.. Which I can't do. Oh well, it was a shot.

And for those that asked - when the site is almost ready for prime-time I
will open it up, but for now, sadly, it is under wraps.

Thanks again!

JF

From: ben morrison
Date: Mon, Sep 25 2006 2:40PM
Subject: Re: <dt><dd> and CSS
← Previous message | No next message

On 9/25/06, John Foliot < = EMAIL ADDRESS REMOVED = > wrote:
> Many thanks to those that wrote back. The "best" solution suggested was a
> variant on this:
>
> <style type="text/css">
> dl dt,
> dl dd {
> border: 1px dotted #000;
> padding:.25em;
> background:#ffd;
> }
>
> dl dd {
> border-top: 1px solid #ffd;
> margin-top:-1px;
> margin-bottom: .5em;
> }
>
> </style>
>
> Which worked fine in everything but the stoopid Blue E browser...
>
> However, what I was really attempting to do was to use :hover and then style
> the combined elements together.. Which I can't do. Oh well, it was a shot.
>

I've been using DL's for newsLists, and using a bit of JS to achieve
the hover effect - and also make the whole area a clickable box.

You can see an example here:

http://tinyurl.com/hm6bv

ben
--
Ben Morrison