Definition lists: altering dl,dt,dd properties / behaviors

[esteban]

Hi folks . I used to use HTML tables to structure part of my content [specifically, my table of contents (TOC)]. Last night I finally realized how to re-create the desired effect with CSS:

Test Page, using Definition List for TOC

Basically, I'm using CSS to achieve the same effect as DD's own "Highlight Table Rows / Cells" javascript behavior in tables.

PROBLEM: I want some -- but not all dt's / dd's -- to be highlighted in yellow upon rollover ( dd ":hover" --> background-color=yellow ). I created .nobg (where ":hover" --> "background-color=blue") to apply to dd's that I don't want to be highlighted in yellow. I am not turning the :hover behaviour "off", but rather switching the background color of the dd to blue, which effectively hides the :hover behavior.

Unfortunately, my scheme doesn't work . All dd's still turn yellow.

I've done this sort of thing before (stopping inheritence), but clearly I'm not grasping a fundamental CSS principal on sibling - parent relations.

If you know another method for achieving the same results, I'm interested.

As always, thanks in advance !!!

Note: I know IE doesn't acknowlege :hover when it is applied to elements like dl, dt, dd. If there is a convoluted IE work-around (like using conditional comments), we'll save that for another day

DISCLAIMER: I know you're not supposed to use dl, dt, and dd solely for structure. I justify their use because the dd's in my "Table of Contents" actually describe the dt's. However, I am still guilty of using " " and empty (null) dd's for structure. Sorry.

[mwinter]

PROBLEM: I want some -- but not all dt's / dd's -- to be highlighted in yellow upon rollover ( dd ":hover" --> background-color=yellow ). I created .nobg (where ":hover" --> "background-color=blue") to apply to dd's that I don't want to be highlighted in yellow. I am not turning the :hover behaviour "off", but rather switching the background color of the dd to blue, which effectively hides the :hover behavior.

Unfortunately, my scheme doesn't work . All dd's still turn yellow.

I'm not sure I understand the problem. As I see it, the only dd elements that have that class name are the empty ones (which shouldn't exist, anyway), and none of them change colour, here.

All of those empty definition descriptions should be removed, with either top margins added to the definition terms, or bottom margins added to the (only) definition description in each pair.

I've done this sort of thing before (stopping inheritence) [...]

Be careful: inheritance has a very specific meaning in CSS. Inheritance is defined per-property in the CSS specification. When a property, for example font-size or color (both inherit by default), is inherited, it is the computed value that is inherited. Likewise, an explicit inherit property value causes the element to take the computed value from its parent.

What you're referring to is the cascade. Each rule is assigned a weight according it is specificity; a rule containing an id simple selector (#...) is more specific than one without, and so forth. When two rules apply to the same element and contain conflicting declarations, the most specific rule takes precedence.

Note: I know IE doesn't acknowlege :hover when it is applied to elements like dl, dt, dd. If there is a convoluted IE work-around (like using conditional comments), we'll save that for another day

The only way to get IE to play ball is through scripting.

DISCLAIMER: I know you're not supposed to use dl, dt, and dd solely for structure. I justify their use because the dd's in my "Table of Contents" actually describe the dt's. However, I am still guilty of using " " and empty (null) dd's for structure. Sorry.

You should really go back to tables. Each item is row group containing two rows and two columns. In all cases, the first column (which spans both rows) is the page number, the first cell in the second column is a cell header for that row group, and the second cell in that column is simple data.

It's not called a table of contents for nothing, you know.

Mike

[esteban]

I'm not sure I understand the problem. As I see it, the only dd elements that have that class name are the empty ones (which shouldn't exist, anyway), and none of them change colour, here.

All of those empty definition descriptions should be removed, with either top margins added to the definition terms, or bottom margins added to the (only) definition description in each pair.

Be careful: inheritance has a very specific meaning in CSS. Inheritance is defined per-property in the CSS specification. When a property, for example font-size or color (both inherit by default), is inherited, it is the computed value that is inherited. Likewise, an explicit inherit property value causes the element to take the computed value from its parent.

What you're referring to is the cascade. Each rule is assigned a weight according it is specificity; a rule containing an id simple selector (#...) is more specific than one without, and so forth. When two rules apply to the same element and contain conflicting declarations, the most specific rule takes precedence.

The only way to get IE to play ball is through scripting.

You should really go back to tables. Each item is row group containing two rows and two columns. In all cases, the first column (which spans both rows) is the page number, the first cell in the second column is a cell header for that row group, and the second cell in that column is simple data.

It's not called a table of contents for nothing, you know.

Mike

Mike! Thanks for taking the time to respond

And thank you for explaining everything so succinctly and clearly (a rare talent) and clarifying the terminology (cascade vs. inheritence) I was struggling with.

Following your advice, I'm going to eliminate the empty dd's and use top/bottom-margins to create the "white space" I need. However, I'm sticking with the UL because it handles basic TOC's much more efficiently than my old table + javascript solution (which was tag soup).

Still, I will continue using tables when they are called for.... I just don't feel that TOC's need to use tables. Don't hate me