Paul Jinks wrote:
> I've got a page displaying a bunch of data in two columns. I wasn't sure
> whether to go with a table or definition list for this. I don't think
> there is much in it, really, but went for a definition list. I wanted it
> to display kind of like a table though. :p
>
> Here's what I've done so far:
> html: <div id=maincontent>
> <div id=detail>
> <dl>
> <dt></dt> etc.
> </dl>
> <dl>etc...
> </div>
> </div>
>
> CSS:
> #maincontent {width: 800px etc}
> #detail dl {
> border-bottom: 1px solid #CCCCCC;
> padding: 0px;
> margin: 0px;
> }
>
> #detail dl dt {
> width:200px;
> padding-left: 5px;
> float: left;
> }
>
> #detail dl dd {
> margin-left: 200px;
> }
>
> In FF, this looks OK until one of the dt's wraps to the next line at
> which point everything goes out of whack. This is where it says: "Name
> of person submitting project details".
> You can view the page at:
> http://www.pauljinks.co.uk/house/detail.php?projTitle=A%20ricardo%20le%20duele%20la%20garganta.
That obscure URL needed a period at the end in order to work.
I think Martin is right in stating that this is a table.
The technical CSS problem within your and similar attempts is that
the DD flow vertically up alongside the floatDT, and when the
floating dt is taller than the dd, the next dd flows up.
flDT DD
flDT| DD
| DD
flDT
My last years' attempt on this dl-table [3] is to add a modified
:after-clearfix to the dd
e.g. /not/ to the floating element.
That means, while the DD starts at the same line as the flDT, the
clearing :after-pseudo-element is urged to stay below the flDT, in-flow.
flDT DD
flDT| DD
| .
flDT DD
dd:after {
visibility: hidden;
clear: left;
font-size: 0;
height: 0;
display: block;
content: ".";
}
This prevents the next in-flow element, the next dd, from flowing up
into the wrong "row".
Hope my ASCII art is understandable.
Of course browsers like IEMac need way more trickery, Philippe
Philippe Wittenbergh found a solution for me.
A working almost real life example are my css test pages [1], maybe
it's of help for you to peek at the css. To me, these are more links
lists, where a dl is appropriate to me.
To your IE question: well, its the peekaboo. Give dl a dimension.
Ingo
[1] http://www.satzansatz.de/css.html
[3] http://archivist.incutio.com/viewlist/css-discuss/54418
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
