css vs tables

[ice78991]

Just starting a new site and am considering which way to go on this issue. css seems to give good control, but I have read that tables offer greater compatibility with older browsers. Also, when it comes to vertical centering, the css code is far more complex than with tables, and is also less reliable. I had a look at a simple google search page and noticed tables are used quite extensively there. Perhaps the way to go is a table based layout and then use css to manage the finer points of the design?

 

[monksnake]

It all depends on what type of data you are putting into your page.

Tables for tabular data, anything else, tables are not recommended.

As far as "older" browsers go, CSS should work on 99% of current user's browsers out there now. If a browser is so old it won't support CSS, I'll bet the user lives in a cabin in the middle of the boondocks.

<.

 

[traingamer]

Tables are for tabular data.

CSS is for presentation.

Html pages based on css are much, much easier to modify / maintain than table-based designs. They are smaller and thus save bandwidth and display more quickly.
Compatability with older browsers should not be a problem if your pages are designed properly.

*steps down from soap box*

If you have a specific question, I'm certain someone here can help you with it.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[GUJUm0deL]

I second monksnake's thought that it all depends on what type of data you are presenting on the page.

I, myself, use tables when dealing with a form, makes things much easier for me. Many ppl will disagree, and that's ok.

What I find to be very extensive work is defing styles for various browsers and resolutions. I am developing a site for a new client, and on the home page i'm using CSS. I was playing with various CSS styles (padding, marigin, float, positive/negeative numbers, percentages, etc) to get the 'featured items' box to appear just right. Final result was leaving tad bit of extrac space in FF.

But then again, it wouldn't be fun if it was all nice and easy.

____________________________________
Just Imagine.

http://www.imajinarts.com

 

[ESquared]

But then again, it wouldn't be fun if it was all nice and easy.

Unless you were being sarcastic, I couldn't disagree with you more.

The fun part to me is solving the problems I want to solve. Solving problems I don't want to solve such as CSS standards noncompliance and browser rendering bugs just wastes my time and prevents me from getting the things done that I am envisioning. Things that are really cool and powerful.

Yes, I hate IE and no, I can't do a single danged thing about it.

 

[kaht]

Solving problems I don't want to solve such as CSS standards noncompliance and browser rendering bugs just wastes my time and prevents me from getting the things done that I am envisioning.

In all fairness, after working with it for a while it becomes fairly easy to anticipate many of those bugs. Additionally, when working with a valid doctype IE7 behaves much better than it's rebel little brother IE6, and doesn't really take too much tinkering to get it to look like other standards compliant browsers.

I use tables for layout 0% of the time and I'm pretty certain that it takes me the same amount of time (if not less) to make a page as someone else using tables.

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[ESquared]

Oh, believe me, I'm learning my way through the jungle of browser bugs and the css hacks. But that doesn't mean I appreciate being forced to do it. The amount of my time that's been wasted by this has been enormous.

Holly hack, tan hack, escaped end-closing comment hack for IE/Mac, conditional comments for IE-targeted CSS, conditional javascript, HTC behaviors to emulate EOMB's standards, three-pixel margin bug, doubled-margin bug, guillotine bug, object detection, height is really min-height, not support event capture only event bubbling, same functions with different names in different browsers, haslayout vs. no haslayout? It's all insane. And it all has NOTHING TO DO WITH ACTUAL WEB DESIGN. It's the accomodations necessary to deal with arbitrary and meaningless crap.

One may as well have an olympic running track with potholes, bumps, crazy angles, walls, and other obstacles. Sure, after working with it for a while it becomes fairly easy for a runner to anticipate many of those obstacles. But I guarantee his running suffers and at the very least his rate of improvement is severely reduced.

The problem is even worse for someone who is not a full-time devoted web developer. I am doing web development but my primary job is as a database analyst/programmer. I have had to give myself an entire education in browser stupidity just to get a single application done. Just leverage my extensive experience with computers, programming and design to get a great working product? Riiiiiiight.

 

[monksnake]

Hey at least you are aware of all the junk involved with learning all the workarounds, and you can add that to your bag of tricks (compliant web design), ESquared.

To be honest, workarounds are very, very minimal if coded the right way.



<.

 

[kaht]

I am doing web development but my primary job is as a database analyst/programmer.

Why don't they get someone more qualified to do the job then? I mean no disrespect to you, but as a web developer/designer I wouldn't expect my boss to stick me in charge of database design and maintenance. Like in your situation, I can write queries with joins and case statements and a lot of the basics, but when it comes to the intricate delicacies that SQL has to offer I'm like a fish out of water. But I don't blame that on the language, I just chalk it up as part of being a good DBA.

Don't get me wrong, I understand that it's frustrating. We were all there at one point. But, I just find that as the aspect that separates a good web designer from a bad one - and also what justifies my paycheck.

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[ESquared]

Kaht,

Question not the wisdom of a corporate bureaucracy in letting me spend the time and effort to teach myself web design. I am grateful for it.

Let me just say that talent, under the right conditions, can beget great skill. I may not have one, but I have the other. Just give me time.

Kaht, I truly have no desire to step on your toes. It seems like I hit a nerve in my complaints about IE. Sorry about that. But you're not exactly being the most friendly chap at the moment, yourself.

What do you care if I learn web design? I'm glad you get a paycheck that deserves justification. My learning what I need to justify my own rewards should not be any skin off your nose. And having a place to complain about it a little is stress-relieving!

 

[ESquared]

Wait a minute...

But, I just find that as the aspect that separates a good web designer from a bad one - and also what justifies my paycheck.

What exactly is the separating aspect?

 

[Foamcow]

Put it this way.
In the last, say, 10 sites I've built I have used exactly no hacks. I can't recall the last time I used one, and even then it would have been the underscore hack.

The only adjustments I have needed to make are a couple of IE conditional comments which loaded 3, maybe 4 perfectly valid CSS rules. No hacks involved.

As Kaht was saying, it all comes down to experience. If you find you are having to apply alot of hacks and workarounds then you are probably better rethinking your HTML structure.

It's just practice.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[ESquared]

Foamcow,

Thanks for your comments.

I consider IE conditional comments a "hack" in the same category as all the rest. I do agree that conditional comments are generally a better approach than hacks, as a lot of people discovered when IE7 was released and a bunch of hacks "broke" because IE7 fixed some things but not everything. But "doing something special to make IE work right" is still "doing something special to make IE work right." Because IE works wrong!

But it seems like you're saying one shouldn't use certain otherwise perfectly valid layouts if they require special treatment to make IE work.

I have been visiting many web sites of obviously highly experienced, professional, and successful web developers. And this is the first time I've heard anyone say "if you have to apply a lot of hacks and workarounds then you are probably better rethinking your HTML structure." These people have no issues with desiring to use a left-floating <DIV> followed by a <P>, both inside an enclosing container... something that will trigger the three-pixel margin bug in IE. There's nothing wrong with that HTML structure. Having to rethink something that basic is just ludicrous.

I really don't apply a lot of hacks and workarounds. Once that starts happening, I step back and do something different (give me some small credit for having a brain ). But learning what are the ones I DO have to apply is a long, tedious process full of nonobvious pitfalls. You, as an experienced web developer, may immediately know that applying two IE-only rules (a 1% height to the <P> and a -3px margin somewhere) will fix the three-pixel problem, and you toss that code in smoothly and without interruption. But learning that took me a lot of effort.

One test I can think of might be: Can you, off the top of your head, without consulting any resources, create a fluid three-column layout where the content of all the columns can be any length and all the columns (or their background images/colors) extend all the way to the bottom of the document, which may or may not be shorter or longer than the browser window? And can you do all that without getting caught by IE bugs? And works in Opera, Konqueror, IE/Mac, and any other browser, with near-identical rendering?

I could ask another dozen questions like that. The answers are rife with traps for the unwary.

But I suppose I could rethink my HTML structure and just use a table instead of DIVs. That works. Is that what you mean?

The bugs I'm referring to usually have nothing to do with HTML structure. Those bugs appear because of IE's proprietary and broken rendering and float models. They work just fine in most other browsers.

You know, I would go so far as to say that your statement rather supports my position: if one has to alter structure in order to handle rendering bugs, then the problem lies in the browser and not in the web developer.

 

[monksnake]

But it seems like you're saying one shouldn't use certain otherwise perfectly valid layouts if they require special treatment to make IE work

This is true.

Just because a layout is valid doesn't mean it's the best written layout.

I can write (example) Javascript code to do a certain task in many different ways. All these ways will do what I want it to do and all be "valid" code. However, there are ways that I shouldn't write the code for certain reasons (most likely in this case execution time).

The same applies for web design. A "valid" way will work, but a way that uses less IE hacks is a better way.

Over time, you get to realize what hacks can be avoided and how to avoid them, "best" practice is to avoid as many as you can.

<.

 

[ESquared]

Over time, you get to realize what hacks can be avoided and how to avoid them, "best" practice is to avoid as many as you can.

Thank you for supporting my position!

Over time, the experienced runner on the crazy track knows how to avoid breaking his ankle in the potholes, getting spitted on the protruding-javelin-section, or smashing into the invisible wall. We agree! Cool!

In the meantime, I think you are overstating the case:

Just because a layout is valid doesn't mean it's the best written layout.

One moment, you're defining best as the most efficient, as in your javascript example. But the kind of best that the discussion is about is web design, in which case it seems you're arguing the best is simply avoiding IE's bugs! I would have thought it was "best design principles of HTML document structure and layout." What I'm claiming that IE is preventing me from using the best design! One has to use sub-optimal design to work around its problems.

Let me give you a scenario and you can criticize it to show me how it is "not the best despite being valid." And then give the superior, best layout.

<DIV style="font-family: Arial">
<DIV style="float:left; width:200px; border: 1px solid black; background-color:#DDEEFF">magnus es, domine, et laudabilis valde. magna virtus tua et sapientiae tuae non est numerus.</DIV>
<P style="margin-left: 200px;">et laudare te vult homo, aliqua portio creaturae tuae, et homo circumferens mortalitatem suam, circumferens testimonium peccati sui et testimonium quia superbis resistis; et tamen laudare te vult homo, aliqua portio creaturae tuae. tu excitas ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum donec requiescat in te. da mihi, domine, scire et intellegere utrum sit prius invocare te an laudare te, et scire te prius sit an invocare te. sed quis te invocat nesciens te? aliud enim pro alio potest invocare nesciens. an potius invocaris ut sciaris? quomodo autem invocabunt, in quem non crediderunt? aut quomodo credent sine praedicante? et laudabunt dominum qui requirunt eum: quaerentes enim inveniunt eum et invenientes laudabunt eum. quaeram te, domine, invocans te et invocem te credens in te: praedicatus enim es nobis. invocat te, domine, fides mea, quam dedisti mihi, quam inspirasti mihi per humanitatem filii tui, per ministerium praedicatoris tui.</P>
</DIV>

There you go. The three-pixel margin bug in IE. The text should touch the box, it does not. You can see where the text extends below the box that it shifts to the left.

Can you show me a better way to get the same result. If so, you still have to argue that this layout can NEVER be the best layout for any desired design, since disproving one case doesn't disprove every case.

 

[monksnake]

"not the best despite being valid."

Heh, well to be specific, the code you supplied isn't XHTML valid. All html tags should be lowercase.

I'm just messin' with you.

I'll take a look at your code on a browser. Personally, I've never ran into the 3-pixel margin bug, though I do know of it.

<.

 

[monksnake]

Here is what I come up with:

<div style="font-family: Arial">
  <div style="float:left; width:200px; border: 1px solid black; background-color:#DDEEFF">magnus es, domine, et laudabilis valde. magna virtus tua et sapientiae tuae non est numerus.</DIV>
<p style="float:left">et laudare te vult homo, aliqua portio creaturae tuae, et homo circumferens mortalitatem suam, circumferens testimonium peccati sui et testimonium quia superbis resistis; et tamen laudare te vult homo, aliqua portio creaturae tuae. tu excitas ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum donec requiescat in te. da mihi, domine, scire et intellegere utrum sit prius invocare te an laudare te, et scire te prius sit an invocare te. sed quis te invocat nesciens te? aliud enim pro alio potest invocare nesciens. an potius invocaris ut sciaris? quomodo autem invocabunt, in quem non crediderunt? aut quomodo credent sine praedicante? et laudabunt dominum qui requirunt eum: quaerentes enim inveniunt eum et invenientes laudabunt eum. quaeram te, domine, invocans te et invocem te credens in te: praedicatus enim es nobis. invocat te, domine, fides mea, quam dedisti mihi, quam inspirasti mihi per humanitatem filii tui, per ministerium praedicatoris tui.</p>
</div>

<.

 

[monksnake]

Apologizes cause my setup looks different in FF.

<.

 

[monksnake]

Ok, here is my example:

<div style="font-family: Arial">
   <div style="float:left; width:200px; border: 1px solid black; background-color:#DDEEFF">magnus es, domine, et laudabilis valde. magna virtus tua et sapientiae tuae non est numerus.</div>
   <p style="float:left; width:800px; margin-top:0px">et laudare te vult homo, aliqua portio creaturae tuae, et homo circumferens mortalitatem suam, circumferens testimonium peccati sui et testimonium quia superbis resistis; et tamen laudare te vult homo, aliqua portio creaturae tuae. tu excitas ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum donec requiescat in te. da mihi, domine, scire et intellegere utrum sit prius invocare te an laudare te, et scire te prius sit an invocare te. sed quis te invocat nesciens te? aliud enim pro alio potest invocare nesciens. an potius invocaris ut sciaris? quomodo autem invocabunt, in quem non crediderunt? aut quomodo credent sine praedicante? et laudabunt dominum qui requirunt eum: quaerentes enim inveniunt eum et invenientes laudabunt eum. quaeram te, domine, invocans te et invocem te credens in te: praedicatus enim es nobis. invocat te, domine, fides mea, quam dedisti mihi, quam inspirasti mihi per humanitatem filii tui, per ministerium praedicatoris tui.</p>
</div>

The idea is for a specific width on the paragraph. I can see your point on this example if one wants a fluid layout.

<.

 

[kaht]

I may not have one, but I have the other. Just give me time.

I'm not saying that you couldn't learn web design. In fact, I don't find it particularly that difficult and imagine that a lot of people could do it. Really, all you need is a good eye for design and the memorization skills to remember what does or doesn't work for particular browsers. The 1st of the 2 probably being the more difficult - and that doesn't really have anything to do with computers.

Kaht, I truly have no desire to step on your toes. It seems like I hit a nerve in my complaints about IE. Sorry about that. But you're not exactly being the most friendly chap at the moment, yourself.

I use IE at work only, and that's only when I'm testing web sites that I design. When I'm at home, or I check my email at work, or when I'm on TT - I use firefox. I'm in no way an IE advocate, and I agree that IE6 is a very substandard browser. As a matter of fact, I'd wager that most of the MVPs in this forum wouldn't argue otherwise. You've hit none of my nerves, and I'm definitely not coming to IE6's rescue. I'm just merely pointing out that to be a good web designer you need to be able to work around IE6's flaws, it's just part of the job. Yes, it sucks. But, in all honesty, without those flaws any dreamweaver or frontpage application could write the webpages for us, cause there's not too much to sticking text and buttons in boxes on the screen, wouldn't you agree? I'm sorry if I'm coming across as an @$$, but I was just pointing out the obvious when you were saying stuff like "Solving problems I don't want to solve such as CSS standards noncompliance and browser rendering bugs just wastes my time...". You're a self proclaimed DBA, so it would make sense to have a web designer doing what you are doing right now, because they would not be wasting their time with CSS standards noncompliance - they would likely anticipate it and work around it. It's cool that your company is allowing you to learn a new skill, but when you come to the HTML forum and basically say that all the nitty-gritty associated with it is a waste of time, you're kinda knocking the trade that we work with every day. If anything is offensive, I would say that is.

I'm not mad about your comments, and I hope you're not mad about mine - I didn't mean to offend you. Rather, I hope you understand what I was trying to say.

And having a place to complain about it a little is stress-relieving!

I know of such a place if you're interested in becoming a member

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]