Page 2 of 4

Posted: Thu Sep 13, 2007 2:12 pm
by swiftouch
**I edited my original post because the tone was not sufficiently respectful. I apologize for that, and I've changed my wording. Any questions/concerns, pm me.
I didn't read your original post so you don't need to worry. 8)

I appreciate the passion in the topic. I totally understand the need for accessibility and such using divs. But there needs to be an easier way. divs aren't the answer to easy or timely.

A three column div still takes this much code to make work.

Code: Select all

<style type="text/css">
		#container {
			width: 760px;
			\width: 780px;
			w\idth: 760px;
			border: 1px solid gray;
			margin: 10px;
			margin-left: auto;
			margin-right: auto;
			padding: 10px;
		}

		#banner {
			padding: 5px;
			margin-bottom: ;
			background-color: rgb(213, 219, 225);
		}

		#content {
			padding: 5px;
			margin-left: ;
			margin-right: ;
			background-color: gray;
		}

		#sidebar-a {
			float: left;
			width: ;
			margin: 0;
			margin-right: ;
			padding: 5px;
			background-color: rgb(235, 235, 235);
		}

		#sidebar-b {
			float: right;
			width: ;
			margin: 0;
			margin-left: ;
			padding: 5px;
			background-color: rgb(235, 235, 235);
		}

		#footer {
			clear: both;
			padding: 5px;
			margin-top: ;
			
			background-color: rgb(213, 219, 225);
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="banner">&nbsp;</div>

		<div id="sidebar-a">&nbsp;</div>

		<div id="sidebar-b">&nbsp;</div>

<div id="content">&nbsp;</div>

		<div id="footer">&nbsp;</div>
	</div>
</body>
</html>
Riddle me this? Why don't tables work where accessibility is concerned??? Who's writing the screen readers? It seems to me that there's just a wholesale disregard for tables because someone thinks it's not worth their time to make them work in the accessibility side of things. How come these people can't program their applications to work with tables??? ...because the myth that pure CSS is better is just that.

You worry about dial-up users and code bloat with tables but I see just as much bloat in css/div world...as I've pointed out with the 3 column layout.

What about backwards compatibility? Anything before the ie5.5 and before, the div/css stuff is going to look aweful. Tables are backward compatible and a hundred times more predictable than a div.

~I will not turn to the pure css layout side! (even if you kidnap my sister, murder my aunt and uncle, blow up worlds, and tell me your my evil father). :D

Posted: Thu Sep 13, 2007 2:58 pm
by Luke
Since this is a repeat thread, I will repeat what I said in the original. I will say this with 100% conviction.

Anybody who takes the time to properly learn css and table-less layout will undoubtedly quit whining about how hard it is and never go back to their old tabley ways. It really is not that difficult. Lay out your site with clean, semantic, standards-compliant markup, style it with clean, hackless css, then check it in firefox or another standards-compliant browser. If you know what you're doing, at least half of the time you won't have to do anything to make it work in IE (as long as you know what ie quirks to stay away from). If IE barfs, add IE-specific styling with IE conditional comments. Tada! Look ma! No hacks!

The problem is not that CSS / Table-less layout is difficult. The problem is that you are used to layout with tables. I recently underwent teaching my roommate css and layout. He learned it, and learned it pretty well, in under 3 months. Then I showed him table-based layouts because he was curious. He saw the markup and said, and I quote, "Dang! I'm glad I never had to put up with all of that hacky nonsense". You complain of having to use "hacks" to get the job done in css... which is untrue, yet you have no problem using tables for layout... which is absolutely a hack. Tables are for data... not for layout.

OK I'm done. :)

EDIT:
I will not turn to the pure css layout side! (even if you kidnap my sister, murder my aunt and uncle, blow up worlds, and tell me your my evil father).
I seriously doubt this. You will turn. I would bet cash on it.

All you have to do is learn CSS properly and you'll turn.

Posted: Thu Sep 13, 2007 3:13 pm
by The Phoenix
swiftouch wrote:Riddle me this? Why don't tables work where accessibility is concerned???
Because they aren't intended to be used for layout. How do you handle a table where each cell conveys information (tabular data) as it is meant to, and then in another context, with no information given in the markup usefully convey to the user that the cells are just used for layout?

You can't. There is no way to, because you haven't put the information in the markup. td, tr, "main content here", seems remarkably similar to td, tr, "11", which is in fact linked up to the top of the table, which shows "number of people annoyed by bad markup".

Screen readers have to show tabular data to users who cannot see. To do so, they use a very complex algorithm that defines what is linked to the current cell, and *speaks* those values out. You cannot do that AND not do the same for layout - because layout based on tables is EXACTLY THE SAME CODE.
swiftouch wrote:Who's writing the screen readers? It seems to me that there's just a wholesale disregard for tables because someone thinks it's not worth their time to make them work in the accessibility side of things.
On the contrary, they do their best. The best they can do with what you give them: Limited information. As a result, tables-based layout sites 'sound' (or in familiar terms, look) like crap. They look like crap because its crap code. You are literally telling sight-limited folks "My content is broken up into table cells, which means its a table of data, but really, its not data. But I didn't tell you that in the code, because well, I ignored the only way there is to do so".
swiftouch wrote: come these people can't program their applications to work with tables???
How can you usefully display a table of data, and differentiate it from a table for layout? There is nothing in the html code that allows you to do so, so you are asking 'these people' to perform magic.

But there IS a way to give them that information. Use tables for data, as they are intended, and use css for styling. There is no method in tables-based html to differentiate layout tables from tabular data tables.
swiftouch wrote:because the myth that pure CSS is better is just that.
Its not a myth. It saved ESPN TWO TERABYTES of data transfer a year.

You can ignore those real-world examples as "myth" all you want, but ESPN enjoyed that mythical cost savings, and you won't be.
swiftouch wrote:You worry about dial-up users and code bloat with tables but I see just as much bloat in css/div world...as I've pointed out with the 3 column layout.
There are real-world examples of tables being better, and of css being better for size. But there are *zero* examples of ways that tables-based layouts solve real problems for real users and real businesses.
swiftouch wrote:What about backwards compatibility? Anything before the ie5.5 and before, the div/css stuff is going to look aweful. Tables are backward compatible and a hundred times more predictable than a div.
Less than 1% of users are using IE 5.5 and older, and in most cases is a smaller percentage of users than mobile + assistive browser users. Choosing the wrong target to worry about in my opinion.
switchtouch wrote:~I will not turn to the pure css layout side! (even if you kidnap my sister, murder my aunt and uncle, blow up worlds, and tell me your my evil father). :D
Thats your choice. Ignore the benefits as you wish. Thats why you can still use HTML-4.01 transitional. But know that the market of users that doesn't support css is extremely small and shrinking, and the market of users using devices that don't display tables based layouts well is growing - extremely fast. Mobile use of the internet is exploding.

Not to mention, that also forgoes any xhtml-based mashups (ala google maps for example). That ALSO ensures that your clients won't be government or government providers.

Choose the piece of the pie you want, but don't complain when you are left with the scraps, and I'm at the all-I-can-eat buffet. :)

Posted: Thu Sep 13, 2007 3:29 pm
by mrkite
I find it somewhat ironic that this discussion is taking place using forum software that is riddled with bad css practices and tables as far as the eye can see.

Posted: Thu Sep 13, 2007 4:01 pm
by The Phoenix
mrkite wrote:I find it somewhat ironic that this discussion is taking place using forum software that is riddled with bad css practices and tables as far as the eye can see.
Its so very true. Sadly, phpbb is one of the most full-featured forum software packages. Finding a forum software package that produces correct css is one thing - finding one that can handle the needs of a community like this? Very challenging.

Posted: Thu Sep 13, 2007 4:04 pm
by Luke
PHPBB3 is fully css and table-less layout. :)

Posted: Thu Sep 13, 2007 4:09 pm
by John Cartwright
The Ninja Space Goat wrote:PHPBB3 is fully css and table-less layout. :)
Coming soon to a forum near you :)

Posted: Thu Sep 13, 2007 9:46 pm
by swiftouch
Cascading styles my ***. I found another bug. I can't change the color of some text because the higher up is saying NO NO NO. While the little 'ol POS div around it doesn't get the time of day. This reminds me of some corporate environments I've worked in.

Someone said that PHPBB is riddled with bad css. I believe it. All you have to do is try using it in a production, new site everyday, environment and gee whiz, you'll see the amount of hacking involved would bloat the code into oblivion.

You cannot make me turn! NEVER! I will never turn to the CSS side!!

This thread is the highlight of my day. I love arguing with uber developers who think in theory but not in practice. There's not a one of you who could argue that in practice css is quick and easy, in today's browser environment, unless you are the one that's spent 12 hours a day learning the browser differences.

Too many people use IE which renders so differently then others, you have to mark it up separately. Try centering a block in IE AND FF, and in that same block aligning the text to the left with the same css. What a pain!

Posted: Thu Sep 13, 2007 10:17 pm
by John Cartwright
swiftouch wrote:I love arguing with uber developers who think in theory but not in practice. There's not a one of you who could argue that in practice css is quick and easy, in today's browser environment, unless you are the one that's spent 12 hours a day learning the browser differences.
I don't think it is within your boundaries to assume you know us as developers, many of whom here have a lot of experience in the industry. I really think you should re-evaluate this thread and understand the arguments given against you, none of which you can substantiate against properly.

Posted: Thu Sep 13, 2007 11:39 pm
by Stryks
I love arguing with uber developers who think in theory but not in practice. There's not a one of you who could argue that in practice css is quick and easy, in today's browser environment, unless you are the one that's spent 12 hours a day learning the browser differences.
You use the term "uber developers" like its a bad thing. It's people like these who developed HTML and the very tables you want to cling to. Have you not considered that "developers who think in theory and not in practice" are in fact "developers who have had enough practice to develop sound theory"?

Take the time to learn CSS well ... code a few sites with it (without any tables) until you feel comfortable with it ... and then come back and give us all a serve about how backward the whole thing is. Your arguments will have a lot more weight, I promise you.

If you want to be a website hack, stick with your tables. I don't think anyone is planning any interventions. But if you want to be a web developer, quit complaining, learn your craft.

8)

Posted: Fri Sep 14, 2007 2:14 am
by matthijs
I found another bug. I can't change the color of some text because the higher up is saying NO NO NO.
Um, that's not a bug. That's a feature. It has something to do with inheritance. See also specificity.

No wonder you find so many "bugs" in CSS :)
There's not a one of you who could argue that in practice css is quick and easy, in today's browser environment, unless you are the one that's spent 12 hours a day learning the browser differences.
No? I can speak for myself, so that's at least one. And I'm sure I'm not the only one here.

Posted: Fri Sep 14, 2007 3:42 am
by JayBird
@swiftouch: I really don't think your in a position to argue which is the best method. As you have clearly illustrated, you are not very well versed in CSS. Until you have taken the time to learn how to use CSS correctly, which will put you in a position to compare them fairly, then you have no argument.

I was in exactly the same situation as you 2 - 3 years ago. After many years of using table layouts, i tried my hand at CSS. Everything seemed so damned awkward, but was this because CSS wasn't as good as tables? or was it my limited knowledge? I eventually learned it was the latter.

Now i would never look back at tables. I can knock a CSS site up in no time and i feel i have much greater control of the design and layout.

Also, i never hardly start a CSS layout from scratch. There are many CSS libraries out there that have simple layouts ready for you to drop your design into. No need to reinvent the wheel.

Try it, you WILL like it :wink:

Posted: Fri Sep 14, 2007 8:49 am
by Charles256
: waits for the mods to come out and lock this thread : Not that I'm in a position to warn anybody just a friendly reminder from someone that doesn't matter to play nice. Remember to play nice. There is alot of useful information in threads like this as long as they don't get "heated". Either way, CSS is tough to learn if that makes you feel better swift. Right when you think you got it you realize you didn't understand yet another property but no worries. Stick with it and you'll learn it :)

Posted: Fri Sep 14, 2007 9:54 am
by Bill H
I am not a uber developer. I am so far from a uber developer that the very thought pretty much has me rolling on the floor. I manage about five sites at a time on average, the biggest of them maybe 50 pages or so, and all of them combined use maybe five tables for tabular data. I love CSS. There are essentially no hacks in my CSS, if you keep your head about you, you almost never actually need them. When a client tells me he wants columns I think, "Oh goody." Columns are no sweat.

There are guys on this forum that make me look really stupid. You don't need to be a genius to use CSS. If you did I couldn't use it.

Edit: oh yes, I guess I'll be the second one to say that CSS is quick and easy.

Posted: Fri Sep 14, 2007 10:18 am
by Luke
I'd also like to argue that I don't "think in theory and not in practice". I work at a web development company. We develop all of our sites with css and table-less layouts (just check out my blog.... see my sig). In fact it has made us more productive than we were before I came here and they were using tables. Like JayBird said, there are CSS libraries that take care of a lot of the mundane stuff you do every time you lay out a site. Then you just have to add your touch to it. Also, I'd really try to get out of that mindset of "I won't ever turn". The internet is changing and while right now you have been able to get away with using your tables, you will come across a situation (if you develop for the government or otherwise "accessibility-needy" institution, or even if you need to develop for a mobile phone) where they simply won't be acceptable.

Learning CSS properly is a huge benefit to you as a web developer. Saying you "won't ever turn" is like a mechanic refusing to use power tools. I promise you that if you took the time to learn css properly you'd laugh at yourself for ever saying you wouldn't. Once you properly learn css, all those things that you think are hard right now become easy. Like the thing you said about centering a div in the browser and aligning the text left inside... pretty easy. IE doesn't render things that much differently. There are many "gotchas", but once you learn them, generally you don't have to do anything special for IE.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>
  
    <title>Pretty Simple Layout</title>
    
  </head>
  
  <body>
  
    <div id="container">
    
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur hendrerit. Mauris id mi. Duis in risus. Vestibulum sagittis, nulla sed gravida sollicitudin, ligula enim feugiat sapien, a tempor neque urna in mi. Fusce sit amet quam sit amet est tempor porttitor. Duis sem lectus, lacinia ac, tempor ut, ullamcorper vel, lacus. Ut sollicitudin euismod tortor. Maecenas tempor scelerisque leo. Aliquam erat volutpat. Quisque risus turpis, posuere vel, hendrerit sit amet, nonummy ac, diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur accumsan, lectus in pulvinar consectetuer, velit ligula molestie eros, sit amet aliquet erat sapien eu dui. Vestibulum tincidunt massa ac sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam tincidunt nibh sed metus.</p>
      <p>Curabitur ut nulla in dui varius congue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sed risus nec massa facilisis placerat. Cras a augue. Aenean lorem. Quisque viverra consequat ipsum. Cras gravida, leo nec tincidunt molestie, justo nunc feugiat lorem, sed mollis ligula turpis ut tellus. Suspendisse ut lorem. Mauris porttitor pharetra ipsum. Mauris egestas. Sed tempus. Aenean erat. Pellentesque vulputate mi sed massa. Cras id nisi. Mauris ultricies fermentum risus. Etiam felis lectus, placerat et, porta sit amet, pretium ac, eros. Quisque feugiat odio eget tortor.</p>
      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut quam. Aliquam tincidunt tortor at nulla. Praesent feugiat rhoncus dolor. Duis sed libero. Duis dignissim turpis congue erat. Maecenas vulputate hendrerit metus. Aenean enim. Suspendisse dictum ligula eget sem. Vivamus nec dui vitae risus mollis facilisis.</p>
      <p>Nunc quis enim eu metus viverra posuere. Maecenas bibendum, enim et blandit dictum, augue odio egestas sapien, quis eleifend ligula nisl suscipit libero. Curabitur fermentum luctus arcu. Nulla placerat. Duis risus tortor, sagittis ut, pharetra sit amet, condimentum et, arcu. Duis suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed tellus. Duis ut risus. Mauris dictum, mi eget lacinia euismod, diam sem convallis ante, nec nonummy turpis nisl ac dui.</p>
      <p>Suspendisse potenti. Quisque dolor velit, lobortis id, placerat non, dictum sit amet, purus. Sed ligula pede, laoreet at, consequat id, auctor nec, justo. Integer egestas mollis erat. Quisque justo nisi, dictum a, tempor ut, interdum quis, leo. Etiam interdum sodales nisi. Sed consequat ipsum. Nunc venenatis ultrices enim. Nunc nec purus quis sapien commodo blandit. Morbi eget dolor vitae sapien tincidunt tincidunt. Vivamus neque lacus, gravida ut, aliquam a, mollis in, velit. Proin mi. Integer nec ante quis nunc mattis blandit. Duis eget nisi. Vestibulum eu nibh vel sapien ultrices sollicitudin. Praesent vitae sapien. Sed non purus non ligula feugiat malesuada. Phasellus tempus. Morbi dui.</p>
    
    </div> <!-- /container -->
  
  </body>
  
</html>

Code: Select all

      #container {
          width: 800px;
          margin: 0 auto;
          text-align: left;
      }
Whew, what a pain that was!