Freelance Traveller wrote:
> I have found that many of the documents that I am converting from Word
> to web contain definitions, but in a format that doesn't work well
> with the default format for a DL. I'd like to be able to format
> these as DLs anyway, because that's what they are, semantically.
A noble goal, though the practical benefits are rather small. Few programs
really treat DL semantically as definition lists, partly due to widespread
use of DL for all kinds of "value pairs" or even just to get some particular
formatting. I'm saying this because you don't really need to worry too much
if you decide to use some other markup in order to more easily achieve the
desired appearance.
But what you are asking for seems to be quite doable in CSS even when DL
markup is used.
> What CSS - limiting myself to CSS2.1 - should I use to make the
> format appear as indicated below? You may assume that Trident 6 (IE
> 6) need not be specifically supported, and that later browsers are in
> Standards mode.
>
> Sample text:
>
> _Technicians_ are those individuals who perform ...
It's not apparent what you mean by underscores there. My newsreader
displayed the word "Technicians" as underlined, and underlining is usually a
bad idea on web pages, except for links. Perhaps you meant italics?
Anyway, I'd start playing with something like the following: first reset all
relevant margin and padding values (as DL and its children are known to have
nonzero default values for them), then make the DT a left-floated element
and apply the desired styling to it, e.g.
dl, dt, dd { margin: 0; padding: 0; }
dt { float: left; font-style: italic; }
You would probably want to leave some space between the definitions as well
as below the last one (and maybe above the first one, but such things are
usually better handled by styling the preceding elements):
dd { margin-bottom: 0.5em; }
The problem remains that the DD element runs into the subsequent text. This
is easily handled by setting right padding, except for the problem that old
versions of IE (including IE 8 in "quirks" mode) seem to leave some space
between the DT and the DD in cases like this. This is new to me. It seems to
happen even if the floated element is SPAN and the following element is DIV.
The implication is that if you set some spacing with padding-right, you get
somewhat too much spacing. But I don't think it's fatal.
Suitable padding is equal to the typical width of a space (0.25em) plus some
extra, since with normal word spacing, a word in italics tends to be too
near to the next word if it is not in italics. So I'd add
dt { padding-right: 0.3em; }
--
Yucca, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
