RE: [WSG] Table style definition lists
Mate - I've been looking at & - 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/ *
Re: [WSG] Table style definition lists
is this too dodgy for you? This is div1This is div2 B Mark Stanton wrote: 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/ * * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Table style definition lists
Hi Scott Its fairly well accepted that Google places emphasis on text that is contained within certain HTML elements - , , and for example. I guess this is an example of semantic searching in its infancy. What Russ is saying in his preso is that Google will *not* place emphasis on stuff in dl/dt/dd elements in the way it does in elements. If you want to start learning about Google I'd suggest you check out Google News on webmasterworld.com and get ready to filter through 100's of posts to find any decent information. Also I'd add a little disclaimer in here - anything anyone says about Google is from hearsay, gut feel or bitter experience. No one knows anything for certain and everything is subject to change. However some of the information is pretty damn accurate (I think). 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
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
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. http://www.w3.org/TR/html4/loose.dtd";> Misalignment 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; } This is div1This is div2 This is div1This is div2 This is div1This is div2 This is div1This is div2 This is div1This is div2 This is div1This is div2 * 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. "http://www.w3.org/TR/html4/loose.dtd";> Misalignment
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;
}
This is div1This is div2 This is div1This is div2 This is div1This is div2 This is div1This is div2 This is div1This is div2 This is div1This is div2 * 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: !Error code #123 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
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
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 -- 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
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/ *
[WSG] Table style definition lists
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/ *
Re: [WSG] Coding Standard...
Michael Kear wrote: So just for the hell of it, I hit the Top Style 'stylesweeper', and bingo! Everything was nicely laid out. I love TopStyle's stylesweeper - before a site goes live, I use it to remove all extra spaces (to reduce download time). If I want to work on that file again, I run another stylesweeper which spaces everything out again. If I have to open someone else's messy css file, one click and it's beautiful again :) K. --- http://kay.smoljak.com * The discussion list for http://webstandardsgroup.org/ *