Sent by Jukka K. Korpela on 29 May 2003 07:07
On Wed, 28 May 2003 [EMAIL-REMOVED] wrote:
> I have a list of terms with definitions. I want the term to be underlined
> followed by a dash and then the definition:
Usually underlining is not a good idea unless it is a link. Maybe some
mildly distinctive background color would be better. But I'll assume
there's a special reason for underlining.
> I don't think using <u> is valid anymore,
The <u> markup is valid, except in Strict versions of HTML. But it has
been deprecated.
> so my first thought was to use <span class="u"> or something.
Generally, using <span> should be considered _last_, when more
semantic approaches all fail.
> But, that has equally as little structural meaning and bloats the
> co[de].
Indeed.
> So, I decided to use a definition list.
In principle, <dl> is just the right element, if you have a list of
definitions. In practice, it is far from ideal, and often far from
tolerable. I will save you from a long analysis (though you can find it
at http://www.cs.tut.fi/~jkorpela/def.html ) and just state one point:
styling a <dl> is very difficult, because browsers have their fixed ideas
of how to render <dl>. In particular, the <dt> part is tough.
It's often better to use a normal <ul> list or a table, even for material
that logically constitutes a definition list. You will have less oddities
to worry about, and better chances of tuning the appearance. I wouldn't
care about the feeling that I don't use the best logical markup available,
since <dl> isn't even theoretically adequate, and even the W3C has muddled
the water by using and suggesting the use of <dl> for things that were
never close to a definition list.
And you can make the construct more structured by using the <dfn> element
for the terms; it's a standard, though not much used, element, which is on
some browsers displayed in italics, so you might wish to switch font-style
to normal. (Or you might do just the opposite: use font-style:oblique to
make as many browsers as possible to italicize it!)
So here's one approach
(see http://www.cs.tut.fi/~jkorpela/test/dl.html for demo):
<ul class="dl">
<li><dfn>term 1</dfn>
<div>definition for term 1</div></li>
etc.
</ul>
with a style sheet like
..dl dfn { text-decoration: underline;
font-style: normal; }
..dl { list-style-type: none; }
..dl li { margin-bottom: 0.2em; }
..dl div { display: inline; }
..dl div:before { content: "\2012 "; }
The <div> markup is there to make the page work reasonably when CSS is
off. For the same reason, the dash is generated content, not actual page
content - accepting the fact that some popular browsers with CSS support
(e.g., IE) don't support generated content, i.e. don't show the dashes.
But,
> I'm having drouble getting it to display in line like that.
>
> I tried dl { display: inline; } and dd { display: inline; } and dt {display:
> inline; } and different conbinations of those. None worked for me.
>
> Thoughts on any of this? Thanks
>
> ______________________________________________________________________
> css-discuss [EMAIL-REMOVED]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/