Re: [WSG] layout - choices?
TuteC wrote: and a screen reader can read the contents. Eugenio, screen readers have no problem with tables. What you are talking about is a myth. Bob, remember that tables have all sorts of properties that are not down to style. For instance, there is the artificial (in that it isn't nested in the markup) grouping of columns, descriptive headings with clear reference, etc. But at the end of the day, {display: table} is just as ridiculous as div{display:inline} or span{display:block}. Besides, when I made table-based designs I often found myself nesting tables within tables, and I ended up with horribly deep code (a bit like Google ads, only for a reason). With modern CSS we can have table-cells without using table bodies or rows or even tables... It makes life a lot simpler. Regards, Barney *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] layout - choices?
Barney Carroll wrote: But at the end of the day, {display: table} is just as ridiculous as div{display:inline} or span{display:block}. Besides, when I made table-based designs I often found myself nesting tables within tables, and I ended up with horribly deep code (a bit like Google ads, only for a reason). With modern CSS we can have table-cells without using table bodies or rows or even tables... It makes life a lot simpler. Regards, Barney One of the (many) things I wish for is a grid tag. Something along the lines of the following (made up as I go along, so don't nitpick too much :-)): grid gridcellcontent/gridcell gridcelldifferent content/gridcell /grid This can then be CSS'd of course, in the normal way. The important point though, is that the number of cells in a grid should be restricted to an agreed number (4?) AND most importantly, they cannot be nested! This would provide a solution to the often cumbersome markup required to produce equal height columns, It would stop 'nestingitis' and - it would be semantic! It isn't really presentational either, any more than p is . . . (I can dream, can't I? :-)) -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] layout - choices?
Bob, on Friday, February 23, 2007 at 12:19 wsg@webstandardsgroup.org wrote: grid gridcellcontent/gridcell gridcelldifferent content/gridcell /grid This can then be CSS'd of course, in the normal way. The important point though, is that the number of cells in a grid should be restricted to an agreed number (4?) AND most importantly, they cannot be nested! This would provide a solution to the often cumbersome markup required to produce equal height columns, It would stop 'nestingitis' and - it would be semantic! It isn't really presentational either, any more than p is . . . I don't think that grid nor gridcell are semantic. In fact it doesn't say anything about semantics just about presentation. It is an much cleaner approach to set a div to display: table/table-cell (but the wording should be changed to grid or something like that...) The div doesn't imply any semantics either, just structure, but that is what is needed in this case. regards Martin *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] layout - choices?
One of the (many) things I wish for is a grid tag. Something along the lines of the following (made up as I go along, so don't nitpick too much :-)): grid gridcellcontent/gridcell gridcelldifferent content/gridcell /grid This can then be CSS'd of course, in the normal way. ... (I can dream, can't I? :-)) http://www.w3.org/TR/css3-layout/ Regards, Rimantas -- http://rimantas.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] layout - choices?
Rimantas Liubertas wrote: One of the (many) things I wish for is a grid tag. Something along the lines of the following (made up as I go along, so don't nitpick too much :-)): grid gridcellcontent/gridcell gridcelldifferent content/gridcell /grid This can then be CSS'd of course, in the normal way. ... (I can dream, can't I? :-)) http://www.w3.org/TR/css3-layout/ Regards, Rimantas -- http://rimantas.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** Roll on! (thanks) -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] layout - choices?
Martin Heiden wrote: Bob, on Friday, February 23, 2007 at 12:19 wsg@webstandardsgroup.org wrote: grid gridcellcontent/gridcell gridcelldifferent content/gridcell /grid This can then be CSS'd of course, in the normal way. The important point though, is that the number of cells in a grid should be restricted to an agreed number (4?) AND most importantly, they cannot be nested! This would provide a solution to the often cumbersome markup required to produce equal height columns, It would stop 'nestingitis' and - it would be semantic! It isn't really presentational either, any more than p is . . . I don't think that grid nor gridcell are semantic. In fact it doesn't say anything about semantics just about presentation. It is an much cleaner approach to set a div to display: table/table-cell (but the wording should be changed to grid or something like that...) The div doesn't imply any semantics either, just structure, but that is what is needed in this case. regards Martin Yeah, that'd do fine. (I told you I was making it up as I went along . . . :-)) -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] layout - choices?
On 2/22/07, Designer [EMAIL PROTECTED] wrote: So, my (genuine) question is, is this really so wrong? So long as it's kept really simple, which way is easier to read in a screen reader? (Include the floated and hacked to death standards version as a third alternative too). It seems to me that pragmatism can sometimes outbenefit the religion of standards - and I'd really like some real world feedback on when such a table approach causes real problems. (Yes, I know it's not truly semantic, and I agree that it's a problem because of that). The one killer thing that CSS allows you to do, but layout tables don't (and I'm surprised nobody has mentioned it yet) is that you can rewrite your CSS to display the contents of the page in a completely different place without touching the underlying markup - and this is NOT possible when using a table. So, for example, you have used a single layout table to create a 3-column layout, and built your 10,000 page site using that method. The day before launch, the CEO decides that the left and right sidebars should be swapped over; even with a CMS, you probably have dozens of template files to edit and re-arrange - at worst, you have to edit 10,000 individual files! If you'd used a pure CSS solution, the only change you have to make is in your layout.css file. This is the key benefit of the separation of presentation and content, and why you should avoid using tables for layout. It is also relevant when you consider using alternative stylesheets, zoom layouts, user-defined settings, etc. Look at www.adactio.com/journal and try out the alternative styles - it would have been impossible to do this if he was using a table (even a simple one) for layout. Matthew. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] layout - choices?
Following on from recent conversations about floats etc, we can summarise by saying that we can have three basic choices: 1. #grid {display : table} #colalpha { width : 58%; padding-right :20px; display : table-cell; } #colbeta { width : 38%; background : #f1f1f1; padding : 0 20px; display : table-cell; vertical-align : middle; } which works upon the following structure (but only in Firefox and Opera): div id=grid div id=colalpha pDuis lobortis ultricies elit. Nunc et purus vitae risus venenatis molestie. Nullam scelerisque venenatis leo. Quisque sit amet leo at lacus rutrum iaculis. Sed auctor lorem eget nisl. Fusce pulvinar. Nunc varius pellentesque velit. /p pDuis lobortis ultricies elit. Nunc et purus vitae risus venenatis molestie. Nullam scelerisque venenatis leo. Quisque sit amet leo at lacus rutrum iaculis. Sed auctor lorem eget nisl. Fusce pulvinar. Nunc varius pellentesque velit. /p pDuis lobortis ultricies elit. Nunc et purus vitae risus venenatis molestie. Nullam scelerisque venenatis leo. Quisque sit amet leo at lacus rutrum iaculis. Sed auctor lorem eget nisl. Fusce pulvinar. Nunc varius pellentesque velit. /p /div div id=colbeta pDuis lobortis ultricies elit. Nunc et purus vitae risus venenatis molestie. Nullam scelerisque venenatis leo. Quisque sit amet leo at lacus rutrum iaculis. Sed auctor lorem eget nisl. Fusce pulvinar. Nunc varius pellentesque velit. /p /div /div This is the standardista's dream. No floats, all equal length heights etc. It just doesn't work in most browsers. (That's all! :-) However, instead of 'pretending' to have a table, you can actually have one, viz: table id=grid tr td id=colalpha pDuis lobortis ultricies elit. Nunc et purus vitae risus venenatis molestie. Nullam scelerisque venenatis leo. Quisque sit amet leo at lacus rutrum iaculis. Sed auctor lorem eget nisl. Fusce pulvinar. Nunc varius pellentesque velit. /p pDuis lobortis ultricies elit. Nunc et purus vitae risus venenatis molestie. Nullam scelerisque venenatis leo. Quisque sit amet leo at lacus rutrum iaculis. Sed auctor lorem eget nisl. Fusce pulvinar. Nunc varius pellentesque velit. /p pDuis lobortis ultricies elit. Nunc et purus vitae risus venenatis molestie. Nullam scelerisque venenatis leo. Quisque sit amet leo at lacus rutrum iaculis. Sed auctor lorem eget nisl. Fusce pulvinar. Nunc varius pellentesque velit. /p /td td id=colbeta valign=middle pDuis lobortis ultricies elit. Nunc et purus vitae risus venenatis molestie. Nullam scelerisque venenatis leo. Quisque sit amet leo at lacus rutrum iaculis. Sed auctor lorem eget nisl. Fusce pulvinar. Nunc varius pellentesque velit. /p /td /tr /table And this does work, in virtually everything. So, my (genuine) question is, is this really so wrong? So long as it's kept really simple, which way is easier to read in a screen reader? (Include the floated and hacked to death standards version as a third alternative too). It seems to me that pragmatism can sometimes outbenefit the religion of standards - and I'd really like some real world feedback on when such a table approach causes real problems. (Yes, I know it's not truly semantic, and I agree that it's a problem because of that). Thanks -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] layout - choices?
Bob, As long as you have an audio-only disclaimer just before stating The following object does not contain tabular data. Otherwise screen readers (supposedly) and standardist developers browsing your site in view-source mode (as one does) will get halfway through the content of your first td and suddenly come to the horrifying realisation What's going on?! This isn't cross-referencing data! and will lose all sense of context, suffer psychotic episodes, and never visit your site again. If you can live with that, go ahead. Just remove that beautiful-looking W3 tick logo from the bottom of your pages. [/joke] It is all semantics, and will be seen by most designers as fundamentally incorrect and misleading. However your page will still be valid and accessible, and it's very hard to conceive of a realistic user persona whose experience would suffer from this. There is a lot of mythology about screen-readers being utterly thrown by tables, but at the end of the day tables operate as you'd expect, in a linear fashion (as they are written in the code) - which is just how your layout would be written anyway. The name in and of itself of the tags is the only real contention here. So practically, you wouldn't be inconveniencing your users, but in theory you're wrong wrong wrong. Be warned. Regards, Barney *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] layout - choices?
Barney is right about screen readers and tables. The behaviour varies insofar as some screen readers (such as Fire Vox) announce the presence of all the tables, some don't announce them at all and some (such as JAWS) announce some tables and not others. I am not sure how it decides which it does and does not announce. In any case users can usually identify and ignore the markup for layout tables very easily. A far bigger problem in my opinion is this recent fad for placing tabular data in definition lists. Where did that come from? The result really is incomprehensible because even the best screen readers can make little sense of the resulting code, no matter how semantically perfect it might be, whereas there are numerous tools for reading and navigating data tables if they are marked up correctly. I would disagree with the statement It is all semantics, and will be seen by most designers as fundamentally incorrect and misleading. I suspect the actual figure would be nearer 0.1% of designers, although most on this list would likely agree with the statement. Steve Barney Carroll [EMAIL PROTECTED] wrote: Bob, As long as you have an audio-only disclaimer just before stating The following object does not contain tabular data. Otherwise screen readers (supposedly) and standardist developers browsing your site in view-source mode (as one does) will get halfway through the content of your first td and suddenly come to the horrifying realisation What's going on?! This isn't cross-referencing data! and will lose all sense of context, suffer psychotic episodes, and never visit your site again. If you can live with that, go ahead. Just remove that beautiful-looking W3 tick logo from the bottom of your pages. [/joke] It is all semantics, and will be seen by most designers as fundamentally incorrect and misleading. However your page will still be valid and accessible, and it's very hard to conceive of a realistic user persona whose experience would suffer from this. There is a lot of mythology about screen-readers being utterly thrown by tables, but at the end of the day tables operate as you'd expect, in a linear fashion (as they are written in the code) - which is just how your layout would be written anyway. The name in and of itself of the tags is the only real contention here. So practically, you wouldn't be inconveniencing your users, but in theory you're wrong wrong wrong. Be warned. Regards, Barney *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] layout - choices?
Designer wrote: It seems to me that pragmatism can sometimes outbenefit the religion of standards - and I'd really like some real world feedback on when such a table approach causes real problems. (Yes, I know it's not truly semantic, and I agree that it's a problem because of that). If web standards is a religion, then I'm out of here :-) As long as you know - and have gone through - all pros and cons, then it comes down to taking the heat for using that 'HTML table'. No browsers will ever cause real problems because of it. The only problem I can see is that one may start feeling so safe with that old 'HTML table' solution that one stop exploring the various pure CSS solutions (with workarounds and all) for a while. Browsers and standards are improving - albeit slowly, so one may have a bit of catching up to do one day in the future. Less experienced web designers may also be lead to think that there are fewer options at hand than there really are, and that won't help on progress. I'm pragmatic, and pretty agnostic, when it comes to standards and standard-compliant browsers. I don't think I will fall back to using 'HTML tables' as layout tools though, as I think it is safer to hack IE/win and other old browsers to pieces in CSS and keep the source-code relatively free from such hacks, while I'm waiting for standards to work as intended across the board. Now, if only I knew the _intentions_ behind the various parts of those standards, so I knew what to expect ;-) regards Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] layout - choices?
On 22 Feb 2007, at 12:07:21, [EMAIL PROTECTED] wrote: A far bigger problem in my opinion is this recent fad for placing tabular data in definition lists. Where did that come from? The result really is incomprehensible because even the best screen readers can make little sense of the resulting code, no matter how semantically perfect it might be, whereas there are numerous tools for reading and navigating data tables if they are marked up correctly. The widespread abuse of definition lists is indeed a baffling phenomenon, and almost every example I've seen is best characterised as completely ignoring the semantics of such a list - although the person responsible will claim that it's more semantic than a table. It's similar to the fad from a couple of years ago for marking up calendars using floated divs (or, possibly, ols). I think that when people get the idea that tables shouldn't be used for layout they somehow end up translating that into their heads as tables should never be used for any purpose whatsoever. When faced with clearly tabular data, they then scratch around in Google looking for some semantically pure way of representing it, and finish up following articles with all these crazy dls, never truly understanding what they're doing and why it's so wrong. In fact, I think some people believe semantically correct is a synonymous term for not having any table elements. Given the range of accessibility features built into the table model (things like colgroup, and the axis, scope and headers attributes) it's clearly of great potential benefit to users of assistive devices if tables are used properly as needed (i.e. for tabular data). I believe that many current assistive technologies make little use of such features, but that's probably because those features are so seldom used in the wild. Perhaps if we abandoned our shenanigans with definition lists and started marking up our tables correctly, we could make it worthwhile for the manufacturers of such technologies to support those features. (End rant.) Regards, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] layout - choices?
[EMAIL PROTECTED] wrote: I would disagree with the statement It is all semantics, and will be seen by most designers as fundamentally incorrect and misleading. I suspect the actual figure would be nearer 0.1% of designers, although most on this list would likely agree with the statement. Steve Steve, you're probably a bit nearer the mark on that one. I was talking within the context of markup nerd lists (which I occasionally forget are not all that indicative of the real world). Could you elaborate on the misuse of dls? Regards, Barney *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] layout - choices?
David Dorward wrote: Every cell in a row represents a day in a week. Every cell in a column represents the same day of the week. Looks tabular to me. Isn't the first precept of semantic markup that looks are no guide as to what things actually are? Regards, Barney *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] layout - choices?
On Thu, 22 Feb 2007 16:48:21 -, Barney Carroll [EMAIL PROTECTED] wrote: David Dorward wrote: Every cell in a row represents a day in a week. Every cell in a column represents the same day of the week. Looks tabular to me. Isn't the first precept of semantic markup that looks are no guide as to what things actually are? The description of the data structure looks[1] tabular, the default presentation of that data structure is immaterial. [1] in the sense give a certain impression not the act of directing the eyes toward something and perceiving it visually -- David Dorward http://dorward.me.uk/ - Freshly redesigned *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] layout - choices?
Could you elaborate on the misuse of dls? I can't remember any specific instances but over the last year on this list there have been numerous discussions where people were trying to shoehorn tabular data into definition lists when they clearly should have been using tables. Nick has obviously noticed the same trend. I don't have time to look them up but I'll let you know if I remember any. I'll certainly shout the next time someone does it! Steve -Original Message- From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of Barney Carroll Sent: 22 February 2007 16:24 To: wsg@webstandardsgroup.org Subject: Re: [WSG] layout - choices? [EMAIL PROTECTED] wrote: I would disagree with the statement It is all semantics, and will be seen by most designers as fundamentally incorrect and misleading. I suspect the actual figure would be nearer 0.1% of designers, although most on this list would likely agree with the statement. Steve Steve, you're probably a bit nearer the mark on that one. I was talking within the context of markup nerd lists (which I occasionally forget are not all that indicative of the real world). Could you elaborate on the misuse of dls? Regards, Barney *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] layout - choices?
Thanks to all who responded. I must say that I basically agree with most of what was said, but a few things still bother me, semantic-wise. Firstly, doing it 'properly' could be seen as using the following: #grid {display : table; } #colalpha { width : 28em; display : table-cell; padding : 10px; } #colbeta { width : 14em; background : #f1f1f1; display : table-cell; vertical-align : middle; padding : 10px;} However, this is like saying I don't use tables, but I wish I could, so I'm going to do the next best thing and make some divs behave like a table with cells - Isn't it? And, if so, that is no more semantic than using a table, inasmuch as if the content isn't tabular, then don't structure it in a tabular way - and if it is, then fine : use a table. Which leaves me wondering what the point of 'display : table' actually is? Anyone? -- Bob www.gwelanmor-internet.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] layout - choices?
Designer wrote: However, this is like saying I don't use tables, but I wish I could, so I'm going to do the next best thing and make some divs behave like a table with cells - Isn't it? No, it is like saying This isn't tabular data, but I want a tabular layout, so my markup is not going to claim tabular semantics, but my stylesheet is going to specify tabular display. -- David Dorward http://dorward.me.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] layout - choices?
One I remember is the discussion about a persons dvd list. I remember because I personally use a table for my Phantom comic collection, so much easier than using anything else... [EMAIL PROTECTED] 23/02/2007 2:05:59 am Could you elaborate on the misuse of dls? I can't remember any specific instances but over the last year on this list there have been numerous discussions where people were trying to shoehorn tabular data into definition lists when they clearly should have been using tables. Nick has obviously noticed the same trend. I don't have time to look them up but I'll let you know if I remember any. I'll certainly shout the next time someone does it! Steve -Original Message- From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of Barney Carroll Sent: 22 February 2007 16:24 To: wsg@webstandardsgroup.org Subject: Re: [WSG] layout - choices? [EMAIL PROTECTED] wrote: I would disagree with the statement It is all semantics, and will be seen by most designers as fundamentally incorrect and misleading. I suspect the actual figure would be nearer 0.1% of designers, although most on this list would likely agree with the statement. Steve Steve, you're probably a bit nearer the mark on that one. I was talking within the context of markup nerd lists (which I occasionally forget are not all that indicative of the real world). Could you elaborate on the misuse of dls? Regards, Barney *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** ** The above message has been scanned and meets the Insurance Commission of Western Australia's Email security requirements for inbound transmission. ** The above message has been scanned and meets the Insurance Commission of Western Australia's Email security policy requirements for outbound transmission. This email (facsimile) and any attachments may be confidential and privileged. If you are not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this email (facsimile) is strictly prohibited. If you have received this email (facsimile) in error please contact the Insurance Commission. Web: www.icwa.wa.gov.au Phone: +61 08 9264 * *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***