Page 2 of 3

Posted: Fri Dec 16, 2005 3:52 pm
by Gambler
And this shows exactly how "flexible" CSS can be:
http://64.233.167.104/search?q=cache:G7 ... om/+&hl=en

Besides, most of their designs share the same layout, use absolute positioning and are not functional by any means.
What you illustrated is actually quite easy in CSS by using "float:left" for the picture.
Nope. Please note that the text is in the middle of the picture. Besides, CSS tends to fall apart when you add new stuff to the page (see the link above). It's easy to say "you can do X with CSS", but it's darn hard to do implement X in real-life website with dynamic content. All those "uber cool" CSS-P sites are quite simple structurally. And... heck, they look alike. They can't use full-height columns, so they don't. They can't nest things too deep, so the don't do it as well. Either that, or they resor to awfull browser-specific hacks, whcih are much worse than tables could ever be.
CSS sucks at positioning
http://www.csszengarden.com Rolling Eyes
Been there already. I have also visited bluerobot, positioneverything and half a dozen of other CSS-P sites. I sill think CSS suck(s) at positioning.

PS: This forum uses tables. Many websites of major IT corporations (IBM, Apple, Intel) use tables. Goolge uses tables. Artemiy Lebedev (quite famous Russian designer) uses tables. All this elithist <span style='color:blue' title='I&#39;m naughty, are you naughty?'>smurf</span> about "most of the best developers" using CSS is based on nothing. I suggest CSS proponents to use facts about the technology, rather than some ego-driven assumprions about people using it.

Posted: Fri Dec 16, 2005 5:22 pm
by Roja
Gambler wrote:And this shows exactly how "flexible" CSS can be:
http://64.233.167.104/search?q=cache:G7 ... om/+&hl=en
The cache entry for whatever you were linking to here has expired (at least from my location). Use a direct link, please. No idea what you are referring to.
Gambler wrote:Besides, most of their designs share the same layout, use absolute positioning and are not functional by any means.
Same layout? The majority are dramatically different from each other. Some have navigation on the left, some have four columns..

Saying most of the designs share the same layout is simply wrong. Many don't use absolute positioning, although some do - and they can, because the ones that do generally do NOT lock the font size, which is perfectly fine from a users point of view.

They are all css and html compliant, most are WAI compliant, and all present the content correctly. What is your definition of "Functional" that isn't being met?
Gambler wrote:Besides, CSS tends to fall apart when you add new stuff to the page (see the link above).
On the contrary, CSS handles new content substantially better than table based layouts.
Gambler wrote:It's easy to say "you can do X with CSS", but it's darn hard to do implement X in real-life website with dynamic content.
Give an example.
Gambler wrote:All those "uber cool" CSS-P sites are quite simple structurally. And... heck, they look alike.
Please explain the similarities between http://csszengarden.com/?cssfile=http:/ ... design.css , and http://www.csszengarden.com/?cssfile=/1 ... css&page=0 . With the exception of the order of the content, there is virtually nothing similar to them. Layout, style, color, size, font..
Gambler wrote:They can't use full-height columns, so they don't.
There are over a dozen articles on how to do so in CSS, and several examples in the CSS Zen Garden. Are you defining full-height columns differently?
Gambler wrote:They can't nest things too deep, so the don't do it as well.
Actually, css can nest very well. How many layers deep do you want to go? I've seen 10-levels deep, which with tables causes problems, but css flows quite well.
Gambler wrote:Either that, or they resor to awfull browser-specific hacks, whcih are much worse than tables could ever be.
Thats more of a subjective judgement, but I'll still respond. Tables cause the content to be displayed incorrectly, and inaccurately to a non-trivia number of people. Browser-specific hacks enable the content to be displayed correctly, and accurately to most people. I'd say subjectively, that the browser-specific hacks are the superior choice if you care about users. Further, the hacks are only needed because browser vendors don't fix known issues fast enough. (Notably, the vast majority of browser hacks fix issues with a closed-source browser from a vendor without a new release in roughly 5 years)
Gambler wrote:PS: This forum uses tables. Many websites of major IT corporations (IBM, Apple, Intel) use tables. Goolge uses tables. Artemiy Lebedev (quite famous Russian designer) uses tables.
Sure. You've given 7 examples. CSS Zen garden alone shows over 200 counter examples. But I'll respond in kind.

The Disney Store UK, the San Francisco Examiner, Chevrolet and ABC News all use CSS-only layouts. Ditto for Zeldman and Mike Davidson (very famous designers). Ditto to Epocrates (A massive online medical resource for mobile devices).

Seems to be in use by a wide variety of developers.
Gambler wrote:All this elithist smurf about "most of the best developers" using CSS is based on nothing.
I'll admit, my phrasing wasn't ideal there, but the statement is not based on nothing. It is a substantial trend in every major web design magazine, online forum, and site that I know of. I've given numerous examples, and I'd appreciate seeing a counter-example of a well-known site that advocates using tables instead of css consistently (not as an exception to the rule).
Gambler wrote:I suggest CSS proponents to use facts about the technology, rather than some ego-driven assumprions about people using it.
I'm not making assumptions at all - I'm using facts. I'm pointing to every well-known webdesigner and webdesign firm I know of, and they all advocate the use of css.

Do you have any counter examples?

Posted: Fri Dec 16, 2005 5:31 pm
by Bill H
Nope. Please note that the text is in the middle of the picture.
Yep. Ever hear of "margin-top" spec?

Posted: Fri Dec 16, 2005 8:56 pm
by Gambler
Bill H wrote:Yep. Ever hear of "margin-top" spec?
Could you please provide example of how you would use it?
Roja wrote:The cache entry for whatever you were linking to here has expired (at least from my location).
Okay, sorry. Giving such link was stupid. Hm... Click on "Show Google's cache" to see what I meant.
What is your definition of "Functional" that isn't being met?
Well, it's not a real website, more like a technology showcase.
It's easy to say "you can do X with CSS", but it's darn hard to do implement X in real-life website with dynamic content.
Give an example.
That image thing I "drawn" in ASCII was an example of this. It seems easy to do, but it really isn't.
Both of them do not scale horizontally. Both have a bunch of text in the middle of webpage, leaving large areas on the left and right unused (yes, I have high-resolution LCD). Both use 2-column layout, where one column does not stretch to the bottom of the page.
There are over a dozen articles on how to do so in CSS, and several examples in the CSS Zen Garden. Are you defining full-height columns differently?
It does not scale horizontally, and it does not scale in terms of complexity. You would need to draw more and more images to create different layouts.
Browser-specific hacks enable the content to be displayed correctly, and accurately to most people.
BTW, did you try to open csszengarden on Windows Mobile PDA? Looks like you-know-what. On the other hand, PHPbb works perfectly fine there. So CSS is not much more portable.
You've given 7 examples. CSS Zen garden alone shows over 200 counter examples.
I'm not a tables zealot, but if you want to hear one giving examples, than you could visit http://www.decloak.com/Dev/CSSTables/. The guy is a bit aggressive, but he has a sense of humor.
I've given numerous examples, and I'd appreciate seeing a counter-example of a well-known site that advocates using tables instead of css consistently (not as an exception to the rule).
I named Intel, IBM and other folks only as counter-examples of your statement about "most of the best" developers. Personally, I think that goodness of a technology has nothing to do with people/companies who use it. Majority uses IE, thinks Star Wars is the best movie ever, and considers Lord of the Rings to be the finest book on Earth. So what?

Posted: Fri Dec 16, 2005 9:40 pm
by shiznatix
i like tables, they work. they always work. no different things on different browsers because of CSS compatability issues. they do as you tell them to do, always.

css styled websites, ok cool whatever. i can do the same thing with a table. everything i saw at csszengarden or whatever i could have done with tables no problems.

"ohh css is processed faster!" someone said, hummm ok. give me a exact amount of how much faster. in my opinion if your tables are slowing down your website then you have bigger problems then having too big of a table.

there was another thing like, 'all these websites are using them and they are big websites'. well i have seen some very large websites use tables, example: http://www.google.com . i have also seen some large companies have absolutly horrible layout and everything, example: http://www.sercolearning.com/ (link from d11wtq from a post a bit ago). websites that don't use tables and are very successful.

i say, use tables! why re-invent the wheel when not needed? many websites (and almost every one i saw on the csszendgarden) would work with tables on any monitor unless the monitor was about 3/4 the width of your average notebook (never seen a monitor that small in my life).

i think its stupid when people say that html is no good for making websites, its perfectly fine for making every website.

Posted: Fri Dec 16, 2005 9:53 pm
by Roja
Gambler wrote:Okay, sorry. Giving such link was stupid. Hm... Click on "Show Google's cache" to see what I meant.
Aha. Okay, thats not the page's problem. Thats Google's problem. Google is returning *invalid code*.
Gambler wrote:Well, it's not a real website, more like a technology showcase.
Hate to get picky, but I don't know what your definition of "Real" is. However, Chevy's site most definitely is "Real". Its dynamic, on a real-life site, and its using 0 tables and plenty of CSS.
Gambler wrote:That image thing I "drawn" in ASCII was an example of this. It seems easy to do, but it really isn't.
As another reader commented, please be more specific in where you want the text to go. It doesn't just seem easy to do - it is easy to do, unless you are leaving out some details.
Gambler wrote:Both of them do not scale horizontally.
http://www.csszengarden.com/?cssfile=181/181.css <- That one does.
Gambler wrote:Both use 2-column layout, where one column does not stretch to the bottom of the page.
The one I posted above uses 3-column, and one does stretch to the bottom of the page. Here's a second one.

Sounds like your only complaints about "variety" are disproven. Any others? :)
Gambler wrote:
There are over a dozen articles on how to do so in CSS, and several examples in the CSS Zen Garden. Are you defining full-height columns differently?
It does not scale horizontally, and it does not scale in terms of complexity. You would need to draw more and more images to create different layouts.
I gave an example of one that scales horizontally (which has nothing to do with a full-height column, thats a totally seperate requirement), but never the less, its there. As to scaling in terms of complexity, you need to draw more and more table cells (and yes, images too!) to create different layouts. Both tables and css have that same problem.

Your challenge was to show a definitive value that tables have that css doesn't. So far, I'm not hearing any that are accurate.
Gambler wrote:
Browser-specific hacks enable the content to be displayed correctly, and accurately to most people.
BTW, did you try to open csszengarden on Windows Mobile PDA? Looks like you-know-what. On the other hand, PHPbb works perfectly fine there. So CSS is not much more portable.
A single example. However, when you say "Windows Mobile PDA", you aren't being specific at all. Which browser? There is Pocket IE, IE for CE, and more. Not to mention multiple versions of each. Not to mention you didn't specify which settings you used (images on? text wrapping on?)..

Regardless, as someone who has developed for mobile devices for over 5 years, I can state definitively that css is much more portable than tables. I worked at Verizon Wireless for 4 years, and have continued to develop for a variety of platforms, from the Treo600 (Sprint) to the Sidekick (T-Mobile).

Tables are simply not even close to CSS in terms of flexibility and support.

But I'll give a counter example - MacSlash. On pretty much every portable device I have, its equally horrible in layout - all thanks to locked width tables.
Gambler wrote:
You've given 7 examples. CSS Zen garden alone shows over 200 counter examples.
I'm not a tables zealot, but if you want to hear one giving examples, than you could visit http://www.decloak.com/Dev/CSSTables/. The guy is a bit aggressive, but he has a sense of humor.
He's been (deeply, horribly) debunked on dozens of sites (including metafilter), but I think Zeldman says it best..
Zeldman wrote:The article is a metric pantsload of distortions, half-truths, and self-serving assertions, sprinkled with an occasional out-of-context fact to create the appearance of reasoned opinion.
Gambler wrote:
I've given numerous examples, and I'd appreciate seeing a counter-example of a well-known site that advocates using tables instead of css consistently (not as an exception to the rule).
I named Intel, IBM and other folks only as counter-examples of your statement about "most of the best" developers.
Right. Those aren't developers discussing how to develop properly. Those are commercial pages that have been developed, which may have had a number of reasons for going with tables - up to and inlcuding supporting ancient browsers, or being driven from output by software which still produces tables.

None of which is a counter-example to the majority of web designers on the net today, all endorsing css over tables. Apples to apples, or concede the point.
Gambler wrote:Personally, I think that goodness of a technology has nothing to do with people/companies who use it. Majority uses IE, thinks Star Wars is the best movie ever, and considers Lord of the Rings to be the finest book on Earth. So what?
The difference is that its not "the majority of people". Its the majority of the *authors* of books on how to properly design for the web now and into the future. Its not "the majority of people" that are saving terabytes of data each year by switching to css - its the leaders, and the brightest of the bunch.

You've given a grand total of *one* site as a counter example. Each of the points you've brought up as an advantage for tables (uniqueness, simplicity, portability) has been debunked.

Unless you've got some respected webdesign sites with informative articles talking about real issues with css that tables solve, I think the conversation is mostly over.

Regardless, feel free to use tables as you like, and advocate them as you like. I'm done with this conversation. The evidence is literally a mountain, and my career is strong and thriving in part because of my use of standards (including css). If you can do well without them, good luck to you.

I suspect when push comes to shove, you'll lose contracts that css developers won't. Your loss.

Posted: Sat Dec 17, 2005 3:08 am
by Gambler
Unless you've got some respected webdesign sites with informative articles talking about real issues with css that tables solve, I think the conversation is mostly over.
Unless you show me reasonably sane, generic way to do fluid (x- and y- axis scalable) multi-column layouts in CSS, it definetely is.

And no, using pre-rendered images to color background or using some browser-specific hacks is not sane in my personal, subjective, irrelevant opinion.

Posted: Sat Dec 17, 2005 9:32 am
by Bill H
Bill H wrote:
Yep. Ever hear of "margin-top" spec?
Could you please provide example of how you would use it?

Code: Select all

<div>
   <div style="float:right; margin-top:50px">
       This is the text line one<br>
       this is the text line 2
   </div>
   <div style="float:left">
       <img src=etc>
   </div>
</div>
That took me, hmm, about fifteen seconds, but only because I have Parkinson's Disease and I type slowly. I could do it in a table but it would take longer and require more code. In all fairness, the <div>'s do need a little more specificity, but...

Before you go slamming a system you should really know something about the system, because the layout that you insisted was "not easy to do" is actually a very simple and basic CSS layout.

Posted: Sat Dec 17, 2005 9:47 am
by Zoram
Bill H wrote:

Code: Select all

<div>
   <div style="float:right; margin-top:50px">
       This is the text line one<br>
       this is the text line 2
   </div>
   <div style="float:left">
       <img src=etc>
   </div>
</div>
I do see Gambler's point in this specific case as far as fluidy is concerned. If you were to change the image height or add more lines of text than to keep it centered you would have to adjust the margin-top:

Don't get me wrong, i'm still all for css. You can do a lot with it and i feel like i have more control over the visual layout of the site. I find it quite fun to figure out how to program in CSS the same kind of layout that i would with a table. And in the end i seem to end a with a lot less coding, or at least plainer code.

Posted: Sat Dec 17, 2005 10:18 am
by Bill H
do see Gambler's point in this specific case as far as fluidy is concerned. If you were to change the image height or add more lines of text than to keep it centered you would have to adjust the margin-top:
Why are people so averse to actually working for a living? When I started programming you had to allocate memory for everything you wanted to do and then deallocate it when you were done. Today's managed memory languages are so dead easy to use, and yet programmers still complain if they have to write a couple more lines to do it right.

My HOA hired a landscape supervisor whose credo was efficiency and speed. He taught the crew to move fast and finish the job in a hurry. He got fired last month and we're trying to re-train the crew because the landscape looks like crap. Three shrubs in my yard alone died and had to be replaced.

It isn't how fast you can create a page that matters. It's the quality of the work that counts.

Posted: Sat Dec 17, 2005 11:34 am
by Gambler
hat took me, hmm, about fifteen seconds
But it does not achieve the desired result! You float text to the right, while it should be next to the image (this is a common way to diplay logo, site name and slogan).
I could do it in a table but it would take longer and require more code.

Code: Select all

<table>
<tr>
<td>
<img src="etc" alt="" />
</td>
<td>
This is the text line one
<br />
this is the text line 2
</td>
</tr>
</table>

Posted: Sat Dec 17, 2005 12:38 pm
by Buddha443556
About six months ago, I did a perfect all DIV layout with nice simple CSS with no hacks. It looked good in FF, IE and Opera. It didn't look good in AOL which was a surprised to me. I played with it for a couple of hours at a friends (who has AOL) but just could not get it to work. AOL just didn't seem to implement this one CSS feature and there was nothing I could do about that. :oops: Live and learn.
Roja wrote:Hate to get picky, but I don't know what your definition of "Real" is. However, Chevy's site most definitely is "Real". Its dynamic, on a real-life site, and its using 0 tables and plenty of CSS.
... and plenty of CSS hacks too. Are all those hacks conforming to some standard? To me those hacks are needed because the browsers are not conforming to the standards set down for CSS. CSS as implemented in todays popular browsers has limits. We need to know those limits to use CSS effectively. Some of us have no qualm about using CSS hacks and some of us do. I'm not going to stop using CSS because browsers have not perfectly implemented it just as I didn't stop using HTML a decade or so ago.

Let me make it clear that I think CSS are extremely useful and a tool worth learning to use.

Posted: Sun Dec 18, 2005 9:41 am
by Zoram
Bill H wrote:Today's managed memory languages are so dead easy to use, and yet programmers still complain if they have to write a couple more lines to do it right.
I don't mind writing a couple of extra lines of code to make things work... but if you wanted to float that image next to text or vice versa on a page that had dynamic content (ex. Changing graphics with changing heights, changeable text without limit to number of lines, text wrapping on smaller displays... etc.) i would use a table... BUT. that would be for content. If it were for a layout then chances are that the size of the graphic and the text next to it would not be changing or changing very drastically. So i would take the time and program it out with CSS. But there is a little division in layout and content.

I'm still all for using CSS.

Posted: Sun Dec 18, 2005 7:39 pm
by Bill H
You float text to the right, while it should be next to the image
A further display of your lack of knowledge of CSS. That is floating the <div> which contains the text, but the text itself will be right next to the image.

I'm done with this. You are engaging in something known as "contempt without prior investigation." If you don't want to use CSS, don't use it, but why are you so dedicated to trying to convince the rest of us that you are right?

Posted: Sun Dec 18, 2005 10:02 pm
by redmonkey
Bill H wrote:

Code: Select all

<div>
   <div style="float:right; margin-top:50px">
       This is the text line one<br>
       this is the text line 2
   </div>
   <div style="float:left">
       <img src=etc>
   </div>
</div>
Bill H wrote:That is floating the <div> which contains the text, but the text itself will be right next to the image.
I suspect your code example will not render as you are inteding/describing. You will end up with the image on the far left while the text will be on the far right, the image and text will not be right beside each other (unless you are viewing via an extremely thin screen).

I believe....

Code: Select all

<div>
   <div style="float:left;">
       <img src="someimage.jpg">
   </div>
   <div style="float:left; margin-top:50px;">
       This is the text line one<br>
       this is the text line 2
   </div>
</div>
..may be a better approach?

There are two things here, the next (if any) element will be required to 'clear' the float and also this does not allow for any sort of dynamic vertical positioning of the text with reference to the height of the image, although perhaps something like (untested, just thinking out loud) "margin: 0 auto;" may work if the are block elements above and below?

My take, considering CSS is a language designed/developed specifically for layout/positioning, in some cases it doesn't half make it extremely difficult to practically impossible to achieve what initially seems like a simple layout task.