RE: [WSG] Table style definition lists
That's kinda risky though if the content is dynamic because one long line could break the layout. I try to avoid using nowrap's or non-breaking spaces wherever possible. Just my $0.02... MT -Original Message- From: James Ellis [mailto:[EMAIL PROTECTED] Sent: Tuesday, March 02, 2004 4:05 PM To: [EMAIL PROTECTED] Subject: Re: [WSG] Table style definition lists off the top of my head white-space :pre; /* possibly nowrap or whatever the other one is */ on the long term 1 will force it to be rendered in a line - I use this when I don't want lines broken. Cheers James Mark Stanton wrote: Hey All If anyone has a few minutes and a couple of spare brain cells I'd appreciate some help with a definition list problem in IE6. I guess the reference point is Russ's demo at: http://www.maxdesign.com.au/presentation/definition/dl-table-display.html. The example works fine unless you end up with two lines of text on the left hand side - then things go pear shaped. ------ Term 1 Def 1 ------ Term 2 Def 2 ------ Term 3 Def 3 ------ That's all fine but in IE6 you can end up with the following when you have a long term. ------ Long Term Def 1 1 --- ---Def 2 Term 2 --- ---Def 3 Term 3 --- --- Does anyone have any ideas of how this can be fixed up. I'd imagine having a clear:both on the dt would clear things up but it doesn't. Looks great in Firefox though :) Cheers Mark -- Mark Stanton Technical Director Gruden Pty Ltd Tel: 9956 6388 Mob: 0410 458 201 Fax: 9956 8433 http://www.gruden.com * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Table style definition lists
Miles Yes, I use it only sparingly and in places I know there'll be no long lines: divspan!spanError code #123/div I can force the above to display all in one line by not collapsing the white-space on the div. Back to the def term... er... I don't know what to suggest other than fiddling with the floats, and the paddings etc, using a table and applying vertical-align to the cells or setting the display of the dt and dd to table-cell, applying vertical-align : middle to them and crossing your fingers.. You may have to set the dl to display : table; for the third option? Cheers James Miles Tillinger wrote: That's kinda risky though if the content is dynamic because one long line could break the layout. I try to avoid using nowrap's or non-breaking spaces wherever possible. Just my $0.02... MT -Original Message- From: James Ellis [mailto:[EMAIL PROTECTED] Sent: Tuesday, March 02, 2004 4:05 PM To: [EMAIL PROTECTED] Subject: Re: [WSG] Table style definition lists off the top of my head white-space :pre; /* possibly nowrap or whatever the other one is */ on the long term 1 will force it to be rendered in a line - I use this when I don't want lines broken. Cheers James Mark Stanton wrote: Hey All If anyone has a few minutes and a couple of spare brain cells I'd appreciate some help with a definition list problem in IE6. I guess the reference point is Russ's demo at: http://www.maxdesign.com.au/presentation/definition/dl-table-display.html. The example works fine unless you end up with two lines of text on the left hand side - then things go pear shaped. --- --- Term 1 Def 1 --- --- Term 2 Def 2 --- --- Term 3 Def 3 --- --- That's all fine but in IE6 you can end up with the following when you have a long term. --- --- Long Term Def 1 1 --- --- Def 2 Term 2 --- --- Def 3 Term 3 --- --- Does anyone have any ideas of how this can be fixed up. I'd imagine having a clear:both on the dt would clear things up but it doesn't. Looks great in Firefox though :) Cheers Mark -- Mark Stanton Technical Director Gruden Pty Ltd Tel: 9956 6388 Mob: 0410 458 201 Fax: 9956 8433 http://www.gruden.com * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Table style definition lists
Mark Stanton blurted out:
Sorry James - my point wasn't too clear.
I'm not concerned about the wrapping - sometimes things have to wrap. I just
want to make sure that each definition lines up vertically with its term.
This works in Firefox, but no IE.
Cheers
Mark
Here's a simple demo page for this (which doesn't use a DL). The
problem is that IE stacks up the right side boxes with no gap between
them, while Firefox aligns the tops of the right side boxes with those
of the left. I don't have a fix for it, I'm just trying to help
illustrate the problem.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
titleMisalignment/title
style
div {
float: left;
width: 40%
}
.div1 {
height: 2em;
background-color: blue;
border: thin solid black;
clear: both;
}
.div2 {
height: 1em;
background-color: red;
border: thin solid green;
}
/style
body
div class=div1This is div1/divdiv class=div2This is div2/div
div class=div1This is div1/divdiv class=div2This is div2/div
div class=div1This is div1/divdiv class=div2This is div2/div
div class=div1This is div1/divdiv class=div2This is div2/div
div class=div1This is div1/divdiv class=div2This is div2/div
div class=div1This is div1/divdiv class=div2This is div2/div
/body
/html
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] Table style definition lists
Hey Guys,
I'm new to the WebStandardsGroup (I saw Russ' presentation at MXDU and
decide to join up).
Anyhow, I read the tutorial on definition lists at MAX Design and
noticed it said that search engines handle the content of definitions
lists differently to other content? Is there any more information about
this anywhere? I tried to search google but didn't come up with anything
useful.
And secondly, I style the following page http://www.enpresiv.com to use
similar alignment as you guys are trying to achieve, but I did it using UL.
I know it's not semantically correct, but I wasn't aware of dt's at the
time. I'll go back and use dt's, but I'm interested to find out more
about search engines and dt's (the temporary page I built does conform
to XHTML 1 Strict though, and uses valid CSS).
So if anyone can shed some light on dt's and search engine thing, it'd
be fantastic.
cheers,
--
Scott Mebberson
Enpresiv Group
[EMAIL PROTECTED]
Robert Moser wrote:
Mark Stanton blurted out:
Sorry James - my point wasn't too clear.
I'm not concerned about the wrapping - sometimes things have to wrap.
I just
want to make sure that each definition lines up vertically with its
term.
This works in Firefox, but no IE.
Cheers
Mark
Here's a simple demo page for this (which doesn't use a DL). The
problem is that IE stacks up the right side boxes with no gap between
them, while Firefox aligns the tops of the right side boxes with those
of the left. I don't have a fix for it, I'm just trying to help
illustrate the problem.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
titleMisalignment/title
style
div {
float: left;
width: 40%
}
.div1 {
height: 2em;
background-color: blue;
border: thin solid black;
clear: both;
}
.div2 {
height: 1em;
background-color: red;
border: thin solid green;
}
/style
body
div class=div1This is div1/divdiv class=div2This is div2/div
div class=div1This is div1/divdiv class=div2This is div2/div
div class=div1This is div1/divdiv class=div2This is div2/div
div class=div1This is div1/divdiv class=div2This is div2/div
div class=div1This is div1/divdiv class=div2This is div2/div
div class=div1This is div1/divdiv class=div2This is div2/div
/body
/html
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
RE: [WSG] Table style definition lists
Yup great illustration - that's the problem in a nut shell. Here's a simple demo page for this (which doesn't use a DL). The problem is that IE stacks up the right side boxes with no gap between them, while Firefox aligns the tops of the right side boxes with those of the left. I don't have a fix for it, I'm just trying to help illustrate the problem. Cheers Mark -- Mark Stanton Technical Director Gruden Pty Ltd Tel: 9956 6388 Mob: 0410 458 201 Fax: 9956 8433 http://www.gruden.com * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Table style definition lists
Mate - I've been looking at br hr - but I've got to ask myself why bother with definition lists at all if I've got to hack to get it to look right. Thanks for all your help - I think its time to go back to tables vertical alignment :( Cheers Mark -- Mark Stanton Technical Director Gruden Pty Ltd Tel: 9956 6388 Mob: 0410 458 201 Fax: 9956 8433 http://www.gruden.com * The discussion list for http://webstandardsgroup.org/ *
