Definition Lists

Opera vs IE - no support in opera?

[ne00_99]

I tried creating Definition Lists for my FAQ section.

Comes out looking great in IE, but in Opera it's scattered.

Here's my CSS attributes:

DT {
content: "Q";
font-weight: bold;
color: #D66500;
padding-bottom: 10px;
padding-right: 30px;
}
DD {
content: "A";
padding-bottom: 20px;
padding-right: 30px;
}
DD SPAN {
font-weight: bold;
}

BTW the content attribute does not display. Not sure if it's even supported in any of the browsers.

here's my HTML

<dl>
<dt>Q:</dt> Blah Blah?
<dd><span>A:</span></dd> Blah blah.

What am I doing wrong?

thanks

[edited by: tedster at 10:43 am (utc) on July 18, 2003]
[edit reason] remove link [/edit]

[hartlandcat]

It's not only Opera this happens in -- it's Netscape/other Gecko as well. Chances are, it also does this in Konqueror and Safari.

[tedster]

It's not that you've done anything wrong. The W3C gives no precise instructions for how a definition list is supposed to be rendered by the browser or user agent. Because IE is so widespread, it's always tempting to think of the IE way as the right way, but this is not the case.

I've seen commercial forum software that relies on definition lists, and of course the pages it generates look pretty bad in anything except IE.

The important issue here is understanding what HTML markup is all about -- and it's not about telling a browser how something should look. That's the job of CSS. HTML is a mark-up language that notes the semantic relationships between bits of information. So a definition list is saying "this bit here is a term and this bit over there is the definition for that term".

Therefore using a definition list because it formats something to look the way you want is not a good practice, although there's probably more of this approach on the web than anything else so we've all seen lots of bad examples.

In this case, you've got questions and answers, and that really isn't terms and definitions. I've seen many sites that use definition lists for FAQs in particular, but using them that way implies a relationship between the two parts that isn't true.

And as you've discovered, the definition list is a kind of browser backwater, where there is no standard way of rendering cross-browser.

You can get the visual affect that you're after by using CSS and creating two classes of <p>, one class for the Q and one for the A. And if you want consistent results cross-browser, that's the way I'd suggest you go.

[insin]

I believe you're supposed to put your terms and definitions inside the list tags:

<dl>
 <dt>Q: Question</dt>
 <dd>
 A: This is the answer for the above question - isn't it just great? ;-)
 </dd>
</dl>

[papabaer]

I believe you're supposed to put your terms and definitions inside the list tags

Absolutely!

<dl>
<dt>Q:</dt> Blah Blah?
<dd><span>A:</span></dd> Blah blah.

The above is not valid code---further, it does not adhere to the intent of the DEFINTION LIST famliy of elements.

<dl>
<dt>definition-term</dt>
<dd>the word, term or phrase, to be defined.</dd>
<dt>defintion-definition</dt>
<dd>the defintion of the word, term or phrase given in the preceding definition-term element</dd>
</dl>

I use definition lists extensively... and have for quite a while. The DL is a very useful element.

ne00_99, definition lists work great for FAQs and other structured information. You just need to use them properly. Do a little reading at the WC.org (HTML) to learn what a definition list is, and what it can do.

Opera 7 supports the CSS CONTENT property... though it still need to be presented properly.

Validation works wonders...

Best of luck,
- papabaer

[ne00_99]

Thanks for your help and advice guys.