--
From: Paul Annett [EMAIL PROTECTED]
Subject: [css-d] How to float definition list items?
This definition list looks great in Firefox, but the positioning of the
definitions is consistently not what I want across all versions of IE.
http://www.nice-design.co.uk/dl/
Which browser has it right? Do you have any ideas on how to make IE's
presentation look like Firefox's?
Hi Paul,
I'll apologise in advance to all for the longish post.
As it happens I've just tackled a similar problem myself on a project I am
working on.
I had initially just come up with a very simple solution of putting a
float on the dt and setting a width, and it all seemed to work fine,
however as I started to add more complexity to the templates, began to
find that using short filler text probably wasn't the most robust testing
method.
As soon as we started adding live data, where the title or definition, or
both, ran over more than one line, we started to get all kinds of weird
floats. IE was a relatively easy fix. Adding a clear: left to the dt
(together with some IE specific margins etc), tended to fix it. Firefox
was problematic - it produced some strange floats that I've only today
managed to deal with.
I would say it's far more likely Firefox is getting it right, from what I
understand of floats - nonetheless, it doesn't mean you're not going to
have to work around them.
This is the most simple implementation - used by most of the project, a
single dt and dd inside a dl, for each line item:
http://www.cue-the-sun.com/ato/view.html
It uses this CSS:
dl.section { margin: 0; padding: .25em 0 .45em 0; clear: left; display:
block; width: 100%; }
dl[class=section]:lang(en) { float: left; }
fieldset dl.section dt { margin: 0; padding: .25em 0 .1em .5em; width:
11em; float: left; clear: left; font-weight: bold; }
* html fieldset dl.section dt { clear: left; }
fieldset dl.section dd { margin: 0 0 0 .5em; padding: 0 0 .1em 0; width:
50%; float: left; display: block; /*border: 1px solid #000;*/ }
* html fieldset dl.section dd { margin: 0 0 .25em 11.5em; padding: .25em 0
0 0; width: auto; float: none; }
fieldset dl.section dd+dd { margin: 0 0 0 12em; border: 1px solid #c00; }
I then had to further refine this for another component of the site, which
uses a more sophisticated set up:
http://www.cue-the-sun.com/ato/FDF_trials/fdf_fbt_view.html
It uses this CSS:
fieldset.fdf dl.fdf dt { margin: 0 5em 0 2.7em; padding: .25em 0 0 .5em;
width: 11em; float: left; clear: left; font-weight: bold; }
* html fieldset.fdf dl.fdf dt { margin: 0 5em 0 1.5em; clear: left; }
fieldset.fdf dl.fdf dd { margin: .25em 0; padding: 0; width: 37%; float:
left; display: block; }
* html fieldset.fdf dl.fdf dd { margin: 0 1em .25em 19.2em; padding: .25em
0 0 .5em; width: auto; float: none; }
fieldset.fdf dl.fdf dd+dd { margin: .25em 0 .25em 19.2em; }
fieldset.fdf dl.fdf dd.numericRef { margin: 0 0 0 -3.5em; padding: 0 .25em
0 .25em; height: 1.2em; width: 2em; font-size: 120%; float: left;
text-align: center; vertical-align: middle; }
fieldset.fdf dl.fdf dd.numericRef+dd { margin: 0; }
Plus a little extra for IE7 in a separate file isolated by conditional
comments:
div#contentBody fieldset dl.fdf dd { margin: .5em 0 0 0; padding: 0;
width: 37%; float: none; display: block; }
div#contentBody fieldset dl.fdf dd+dd { margin: 0 0 .25em 16.5em; }
div#contentBody fieldset dl.fdf dd.numericRef { margin: 0 0 0 -3.5em;
padding: 0 .25em 0 .25em; height: 1.2em; width: 2em; font-size: 120%;
float: left; text-align: center; vertical-align: middle; }
div#contentBody fieldset dl.fdf dd.numericRef+dd { margin: 0; }
I've tested this on pretty much everything I can get my hands on (this gig
requires it), and it either works as expected, or degrades gracefully in
older releases - back to NN6.2 on Mac.
Cheers
Ben
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
