homepage Welcome to WebmasterWorld Guest from 54.237.78.165
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Browsers / Opera Browser Usage and Support
Forum Library, Charter, Moderator: open

Opera Browser Usage and Support Forum

    
Definition Lists
Opera vs IE - no support in opera?
ne00_99

10+ Year Member



 
Msg#: 139 posted 5:46 am on Jul 18, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 139 posted 6:24 am on Jul 18, 2003 (gmt 0)

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

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 139 posted 11:18 am on Jul 18, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 139 posted 2:54 pm on Jul 18, 2003 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 139 posted 11:39 pm on Jul 18, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 139 posted 12:08 am on Jul 19, 2003 (gmt 0)

Thanks for your help and advice guys.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Opera Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved