Re: Styling DT and DD tags - Possible?

Melanie Doulton wrote:

> 
> 
> The Problems:
> 
> 1. I've defined the following style for the dl and dt tags in my .css
> but it has no effect whatsoever on the output. Other styles work fine.
> What am I doing wrong?
> 


Using an inadequate browser. Netscape 4 is notoriously awful. See
http://richinstyle.com/bugs/netscape4.html, from where this bug is
listed under Section N (List item bugs (LI, DT and DD).

I quote: 
'Bug 1: destroys
If you set properties on LI, DD, DT, as in LI {font-family: Arial} or UL
LI {color: blue} they are only applied to the marker, and not the
content. DD and DT don't have markers, but are treated in the same way,
so there is no effect at all.
This means you should declare on OL, DL and UL instead, and rely on
inheritance.
The only thing that this bug prevents is the application of different
styles to DD and DT.'
of course that is the very thing you are trying to do, so not much help
there.

>      dt { font-family: sans-serif; font-size: 14px; color: navy;
>      font-weight: bold; margin-top: 10px }
>      dd { font-family: serif; font-size: 14px; color: black;
>      font-weight: normal; margin-left: 10 px }

> 2. Is there a way to specify alignment (right, left, center) for
> images and/or tables? I'm looking for something like text-align.

Yes. But again no joy in Netscape. The correct way to do this is using
margins; however, Netscape does not support 'auto' on margins (the best
way to do this), and % are related to the width of the viewport (i.e.
they don't relate to BODY as they (usually) should) (this is noted at
the aforestated url). Therefore you could only do this by the stupid way
of resolution detection in this browser.

However, in more adequate browsers the answer is TABLE {margin: anyvalue
auto} (where anyvalue is for example 1em), noting of course that the
preceding means top and bottom margins of anyvalue and automatic
horizontal ones. When both left and right margins are auto, they are set
to equal values. On elements like P, this will be 0, since the width of
such elements is (by default) that of the containing block; on tables
and objects in general, however, the element will be centred within the
containing block. For example, within a 1000-pixel-wide containing
block, a 500-pixel-wide table would therefore have a 250 pixel left, and
250 pixel right margin.

Note finally that since images default to inline, you would need to set
them to block, by means of IMG {display: block} for this to take effect.

To test, you should use Mozilla (although be aware that it is unstable).

-----------------------------------
Please visit http://RichInStyle.com. Featuring:
MySite: customizable styles.         AlwaysWork style 
Browser bug table covering all CSS2 with links to descriptions.
Lists of > 1000 browser bugs         Websafe Colorizer 
CSS2, CSS1 and HTML4 tutorials.      CSS masterclass 
CSS2 test suite: 5000++ tests and 300+ test pages.

Received on Thursday, 13 July 2000 05:32:39 UTC