TABLE vs CSS

Ye' old general discussion board. Basically, for everything that isn't covered elsewhere. Come here to shoot the breeze, shoot your mouth off, or whatever suits your fancy.
This forum is not for asking programming related questions.

Moderator: General Moderators

User avatar
Bill H
DevNet Resident
Posts: 1136
Joined: Sat Jun 01, 2002 10:16 am
Location: San Diego CA
Contact:

Post by Bill H »

redmonkey: my code example was generic, intended to show someone who apparently was unfamiliar with "margin-top" how it would work. If I were actually laying out a page with it I would undoubtedly add some further specificity to the <div>'s, which I stated in my original post. Since all I was intending was to demonstrate where the "margin-top" would appear in the code (which is what the person asked for), I did not give much consideration to demonstrating the related horizontal issues. He asked me how "margin-top" would be used, and I showed him.

As an aside, that formula works quite well. I have used it somewhere on the order of magnitude of a thousand times on web pages, and they render very well with good cross-browser support. Sometimes you have to "clear" in the subsequent element, but it depends on the nature of the subsequent element and the layout: very often you do not.
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post by Maugrim_The_Reaper »

Someone wanted to know about tables rendering slowly - before smirking in glee at their smartness...;) Ok, it was an honest questions - can't resist a few digs though... When this argument appears, and gets bashed, its usually by someone with broadband.

Try it on a 56k connection - better a more realistic (actual) 16.8kps. Tables are slow, CSS is fast, subsequent CSS pages strike like lightening. Since CSS is cacheable its faster for more than one reason. Now before anyone moans - a lot of people do not have broadband so that is not a valid excuse for large table-filled crappy designs for which I must throw my hands in the air and go to the console for lynx. 56k monkeys love CSS designs without tables and with a minimum of HTML. Its just plain faster. Since I'm a native 56k'er I love CSS to bits...
User avatar
Buddha443556
Forum Regular
Posts: 873
Joined: Fri Mar 19, 2004 1:51 pm

Post by Buddha443556 »

Maugrim_The_Reaper wrote:Try it on a 56k connection - better a more realistic (actual) 16.8kps. Tables are slow, CSS is fast, subsequent CSS pages strike like lightening. Since CSS is cacheable its faster for more than one reason. Now before anyone moans - a lot of people do not have broadband so that is not a valid excuse for large table-filled crappy designs for which I must throw my hands in the air and go to the console for lynx. 56k monkeys love CSS designs without tables and with a minimum of HTML. Its just plain faster. Since I'm a native 56k'er I love CSS to bits...
Yahoo's TV Listings is a good example of just that. They switched to a DIV and CSS layout which has really improved the page performance. However, I wouldn't exactly call their solution elegant as they had to use Javascript to get it to work. No doubt this change has probably saved them money too as they can serve more people with the same hardware.
Gambler
Forum Contributor
Posts: 246
Joined: Thu Dec 08, 2005 7:10 pm

Post by Gambler »

Bill H wrote:A further display of your lack of knowledge of CSS.
Did I mention elithism already? Oh yes, I did.

To redmonkey:
I tried similar approach some time ago, but there is a problem with it. If you add outer div, and apply some kind of background color to it, it will be 0 pixel high, because everything inside is floated.

Code: Select all

<div style="background: yellow;">

<img style="float:left; margin-right: 10px;" src="someimage.jpg" />

<div style="float:left; margin-top:10px;">
This is the text line one
<br />
this is the text line 2
</div>

</div>
Maugrim_The_Reaper wrote:Now before anyone moans - a lot of people do not have broadband so that is not a valid excuse for large table-filled crappy designs
I switched to broadband only a year and a half ago, so I know what you mean. However, CSS-P pages can be bloated by divs as well. I think it's a matter of lightweight design in general, rather than tables issue.

But don't ge me wrong. CSS can (and should) be used when appropriate, no questions there.

PS: Transparent zip compression should not be forgotten.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

Gambler wrote:I tried similar approach some time ago, but there is a problem with it. If you add outer div, and apply some kind of background color to it, it will be 0 pixel high, because everything inside is floated.
All you need to do is add another div within the container set to clear: both;
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post by Maugrim_The_Reaper »

You need clear: both anyway - it turns up most conversations with floats...
I switched to broadband only a year and a half ago, so I know what you mean. However, CSS-P pages can be bloated by divs as well. I think it's a matter of lightweight design in general, rather than tables issue.
True, but to be honest its fairly rare these days - we've outgrown the earlier adoption of CSS (I think). It never seems to be as big a problem as a 10 minute wait for someone's idea of a perfect static design. I think all web designers are insane anyhow - its better to be a PHP developer with a rudimentary understanding (therefore enforcing simplicity by default) than have the inspiration to turn artistic...;)

Some PHP developers do not make good artists - look what happened to phppatterns...lol.

Off topic, off topic...

Back on tables - floats can actually be pretty decent for row-like listing some forms of content. Firefox at least supports the behaviour where floats can drop to a new line box before overflowing the parent container. Unfortunately the thing fails on you-know-who's browser. I don't see too much of that presentation use however - guess there's no hack to fix Inter..., eh, the other browser we sometimes use when stuck on you-know-who's OS.

Another point in favour of CSS (from all 2 days experience recently) is that CSS tends (not always - but its a useful tendency) to lend itself to being screenreader friendly. I tested a few designs for WCAG and on the Firefox Fangs extension and CSS showed another side to its use. Two table designs came up as a mixed bag without the best of logical flows. This is only my short experience - but I think its important to bear in mind that CSS by splitting context and presentation has more than one reason...
Gambler
Forum Contributor
Posts: 246
Joined: Thu Dec 08, 2005 7:10 pm

Post by Gambler »

All you need to do is add another div within the container set to clear: both;
Hm, can't make it to work. Could you plese provide a working code example?
Gambler
Forum Contributor
Posts: 246
Joined: Thu Dec 08, 2005 7:10 pm

Post by Gambler »

BTW, there is a simple "solution" to CSS problem.

Code: Select all

.tr{
display: table-row;
}

.td{
display: table-cell;
}
But, judging by the fact that nobody uses it, I can guess it does not work with IE.
redmonkey
Forum Regular
Posts: 836
Joined: Thu Dec 18, 2003 3:58 pm

Post by redmonkey »

Gambler wrote:To redmonkey:
I tried similar approach some time ago, but there is a problem with it. If you add outer div, and apply some kind of background color to it, it will be 0 pixel high, because everything inside is floated.
Correct, one approach I have found is to give the containing div a 'padding-top' value which seems to work. Although this approach would only work for images with known dimensions, it does not lend itself well to dynamic content.
Jcart wrote:All you need to do is add another div within the container set to clear: both;
Many browsers won't render an empty div therefore you will need to give it some content. Something simple like &nbsp; would do but that just seems like a 'modern day spacer.gif' approach.
Post Reply