The CSS table-replacement concept sounds nice -

I read through the sample chapters in HTML Utopia, and found that I basically knew all of that already. Yet, the primary problems with pixel differences are not addressed.

MSIE6 displays things drastically different than Mozilla or Firefox - I have given up using <DIV></DIV> to align elements.

It is futile trying to endlessly tweak out the values until they arrive at a middle ground...thus neither browser looks right.

This simply sucks.

Since there is no convention—no W3C standard to unify all browsers, CSS table design with <DIV class="blah"></DIV> is a poor direction to move.

Unless there is a single piece of code placed in the header of all pages that allows all browsers to display ONE SQUARELY WRITTEN CSS DOCUMENT without all the ridiculous hacks and workarounds, then it is not going to stick.

Is there a real future for CSS? I use it for text formatting—setting margins, indenting, etc. but aligning elements is futile.

Just when it looks great in MSIE6, Mozilla looks crappy, and vice-versa.

Why should we begin replacing reliable tables with unreliable CSS? Since so many people are using DSL or Cable rather than old dialup, why should we worry about the added load time for tables?

I don't know, but it seems like CSS browser support is like hobbles on the legs of anyone desiring to go full-blown CSS.

Am I the only one who shares these sentiments?

I love this ... my first visit to the CSS vs. Tables "forum" ... it's art fellas ... just art ... 'course one joker had to drag in gay marriage (an oxymoron by the way since the original concept of marriage was a sanctified union for procreation - which gays cannot - procreate that is) ... anyhow, I digress ... for those that accept the "art" statement my work here is done ... for the others, well, why don't we all just work with the tools that work best for us whatever they are and leave the other guys alone, eh? From a technical standpoint, they're all just tools in the toolbox! Use one or the other or both or none (the NotePad guys are smilin' now). Whatever gets the job done, eh! Instead, let's help folks with questions on the tools we know about and stay out of the loop on tools we don't use. Just my 2 cents.

I figured it would be ok to have a table every now and then. right or wrong?

Tables should be used for tabular data. Period.

Come on everyone. The goal of css is to separate design from content, and i believe it's a noble one. Design and content shouldn't even be in the same room. Granted, css is relatively new so not yet supported verbatim, and yes, designing for cross-browser is harder at the moment with css than with tables. But again, newer technology is gonna have some problems. However, i'm of the opinion that the extra time and effort taken into making an accessible css site is worth it, considering the well recognized benefits over tables. CSS is up there with gay marriage and globalisation. It's going to happen no matter what. It will, however, happen much less painlessly if everyone just accepted it. A few years from now, gays will be married in alberta, and the world will speak in css. csszengarden will be just a "historical curiosity" as design and content will be separated like oil and water.
Stick with it, and eventually you shall reap the benefits. Because in the long run, nothing good will come from resisting the inevitable. Really.

Hello everyone,


I am in the middle of creating an ASP.NET web business application and have been looking at the topic of seperating content from presentation by using CSS to design the positional layout of the page like the CSSZenGarden.com

I've heard however that it might not be a good idea to do this for a web application...only a branding type site.

Can anyone comment on this for me. I'd like to try and learn how to use CSS and a tableless design for speed reasons. I'd also like to seperate the design from the content so my C#.net developers can concentrate more on the functionality of the application rather then the design.

Thanks.

Using CSS for a web application is a great idea! However, ASP.NET can make it difficult to make full use of CSS. ASP.NET makes it very easy to slip into using tables, inline styles font tags etc.

Whoa, calm down.

I just needed an example off the top of my head that showed, W3 specifications or not, that IE does things Firefox does not do (or does not do as well).

About the OS issue...yeah, it slipped my mind at the time. There's a pretty big number of people using Safari on the Mac platform.

this sounds like a classic case of a css novice. why this topic got hi-lighted? who knows. There must be dozens of topics in the css category already that talk about this.

saying css has no future is like saying web standards weren't going to get anywhere.
Here's a quote from HappyCog.com
case closed.

Wow you make a real strong case for Firefox not supporting more of the CSS Spec than IE does by giving us an example of something that's not even in the W3's CSS spec.

IE can't even get the box model right and you're talking about flipH and flipV???

You are aware that there are some weird people using other operating systems than Windows?

I'm not going to argue with you about standards compliancy...laziness is the only thing stopping those who choose not to do so.

The subject here isn't standards compliancy, however; rather, it's whether or not cross-browser compatibility is truly purposeful when the vast majority (I'm sticking to 99 percent) of users are on the same browser.

Agreed, it is a stupid move of Mozilla to support non-standard effects. However, developers relying on them forced a lot of browser developers to do so. Guess why opera identifies as IE by default?

Seriously, I don't care how many percent of my users use Mozilla or MSIE, I make things work according to standards, check in Mozilla, Opera and Safari and fix for IE. If a browser supports loads of seemingly good filters becomes rather unimportant when you see how much of the standards it fails to support properly:
http://www.positioniseverything.net/explorer.html

As shown above in the Opera example, browser statistics are totally pointless, as browsers allow for spoofing and browser sniffing is simply not reliable.
http://www.quirksmode.org/js/detect.html
http://www.pantos.org/atw/f-35448.html
http://www.simplebits.com/notebook/2004/12/17/ie5.html
http://meyerweb.com/eric/thoughts/20...are-dont-care/

Regardless of whether Microsoft created the two filters, Firefox supports them both, just not in tandem. Thus, whereas IE fully supports them both, Firefox only offers limited compatibility.

The data presented at that link are based on the traffic log for w3schools.com. Since this is the case, we are certainly not getting a representative sample, and are not using a statistically significant sample size. Too often I see websites with a purely web-savvy audience boasting statistics that are consequently unrealistic. Yes, this site does claim to monitor other statistics on the Internet to verify its own data; however, the majority of the other statistics I have seen online have come from the logs, again, of web-savvy sites like the W3C and hit counter software companies.

When the design is right, it is no problem. The biggest mistake most people who complain about CSS vs Tables is that their screen design is made for print, not for the web. Fact is that as the designer you don't own any of the measurements of the site, te user can (or might have to) overwrite anything you do. Once you swallowed that, web development is a lot easier.

My site looks identical in IE and FF and in fact, most sites that I've done since making the siwthc to CSS for layout purposes have, and I've never used a browser hack. Really, I'm not trying to sound arrogant or condescending here, but I just don't see why this is a problem for so many people. I code to standards and I've never experienced it. You need to understand how IE and FF apply default margins/paddings to tags and then just specify these properties for yourself. Beyond that, I really dont' see where the confusion lies.

"Look good" is subjective, "work / make sense" isn't. As long as the page has a proper structure it is a joy in a good browser and in a text browser / screen reader.

And pray where is flipH in the CSS specs?
http://www.w3.org/TR/CSS21/

It is a microsoft invention, not the W3, so there is not much surprise that it only works in IE...

Better check your stats there buddy - IE aint no 99% anymore..

http://www.w3schools.com/browsers/browsers_stats.asp

AND POINT OF ORDER POINT - I have had UNTOLD number of clients (we build machines and repair them on the side) call to ask what they can use INSTEAD of IE - they are sick and tired of the viruses, security patches
- (two more yesterday BTW), spyware .... sick and freaking tired of it.... and when newspapers (like the wall street journal) and TV shows start talking about the problems it SCARES the public and yes they change .......... FF and Mozilla are NOT only for the techo crowd!

there is only one (not-extinct) browser where a pure CSS site won't look good.
That is Dillo.

Now who on earth would want to use Dillo?

Dillo is an *nix browser that runs on all *nixes including handhelds.

Dillo is a stupidly fast browser with a very low memory print.
No wonder - it does away with CSS / Javascript / Frames and HTTPS.

There are patches that will allow Dillo to work with SSL and Frames but no Javascript and CSS.

My guess is that the number of Dillo users should surpass the number of Netscape 4.x users as Dillo becomes a more attractive choice for very low spec refurbished PC, handhelds, and Linux mini-CDs or pen-drives.

Some sites like OS News and Slashdot are very Dillo friendly. But it figures these are very very nerdy sites ..

Browsing with dillo gets boring - it is ugly. The zippy fastness is soon given up by the slower but cosmetic and fully-functional browsers.

If you add tables to your site - at least one group will be pretty happy - the dilloers.
If you add CSS only - ... well you would be happier as CSS is piss-easy to maintain. I do not know how tables go against or for accessibility yet.

Point of order...

The Firefox army may be quick to make claims of superior, all-around CSS support, but I'd like to point out that such claims are pretty misleading.

Firefox does not support all the CSS that MSIE does. One significant example I can think of off the top of my head concerns the flipH and flipV CSS filters - you can't use both on the same element in Firefox, but you can in IE. I use this code a lot to cut down on the number of rotationally symmetrical images (e.g. using one corner image, and flipping it for the other three) I use, but it just doesn't work in Firefox.

On the flip side, Firefox allegedly supports code that IE does not. But honestly, who cares if less than one percent of people will be able to use certain syntax? Why does support for code that is usless to the vast majority of users make Firefox a better browser?

There may be a trend among the web-savvy demographic towards using Firefox, but it's downright silly to believe that your average user will understand, let alone agree with, any reasons you might use to purport that Firefox is a superior browser. Most users do not understand IE's flaws, and see no reason to make the switch. The computer came with IE, and it meets the user's needs. If it's not broken, don't fix it.

Across-the-board coding is a romantic ideal, and while it certainly is a good practice, it's just not going to happen when there is syntax that does not work, no matter how much research you do, in both browsers. As long as IE makes up 99 percent of the market, I think IE support should be the priority.

Don't get me wrong...I'd rather integrate Firefox into the operating system than IE. I'm instead speaking from the perspective of the average user.

Hi,

Oh no not the css versus tables debate again I'm all css and tabled out. Anyway welcome to Sitepoint Forumsand for a second time poster you sure jumped in at the deep end

This question has been asked and replied to endless times so pick out my replies from the posts below and apply them to your questions .

http://www.sitepoint.com/forums/show...+versus+tables

http://www.sitepoint.com/forums/show...+versus+tables

I'll finish with a quote from one of the other posters in those threads.

Enjoy your stay here

Paul

Here's some advice that will help you out a lot.

Don't approach a css layout like you would a tabular layout. If you try to create a css layout with table based layout principles you won't get too far. Css layouts and tables just aren't the same thing and need to be treated differently.

After re-reading your post and the comments so far it is apparent you are VERY frustrated with the project your working on at the moment.... and thats OK. Man I cant tell you how many times I SCREAMED at the top of my lungs while making the switch from tables (which I can do in my sleep) to CSS ...... man your not alone! It was one of the most frustrating things I have EVER Had to learn and Im sure everyone here went thru the same thing!

Trust me Paul O didnt become the master he is in one sitting (please tell me you didnt Paul!) he fought and stuck to it to get to where he is and Im sure he can tell some horror stories about the learning curve.

But you know ..... thats what this WHOLE site is about.... helping each other out thru the rough times. You can look back at post I made less than a month ago where I was just as frustrated!

I also agree completely with maxor ..... the minute I stopped looking at my layouts as tables things became quite a bit easier..... its like breaking a bad habit, man its tough but once you do its a GREAT feeling!

You know there was a day that I used the atari for my video gaming needs, the joy-stick and two button mode was seemless, then came such inventions as nintendo with the direction pad and additional buttons, and the shape of the thing, but hey, I got used to it, but in no time came along the playstation with yet a more stylish controller and even more buttons, what was I to do, I could have stayed in my world of bitmap graphics and 2-d gaming all because I didn't want to take the time to figure out the new controller, but I didn't, I struggled, but I moved up and gaming would never go back to nintendo, and eventually nintendo even upgraded to keep up, so...

my point is, CSS is different from the old way of designing/developing a web site, but if you don't move on you will become extinct....

sorry Mario,

I cannot agree with this sentiment.

Just take a look at CSS design galleries such as cssbeauty.com, sylegala.com, cssvault.com, csszengarden.com or at other css based sites such as for example, stopdesign.com, alistapart.com, simplebits.com, jasonsantamaria.com, zeldman.com ... , okay, I am tired of typing, but there are a few more dozen css based sites that work superbly in ALL browsers and MANY of them do not make use of hacks.

It does take more time, it takes reading, researching and a lot more. There are great resources out there. It is possible to make superb designs that look the same in all browsers if you so wish. Just takes a bit of studying to get it right.

I think your mistaking horrible browser adoption of CSS standards with CSS being "unreliable" ..... CSS support and adoption of the standards put forth by the w3c has never been better....... EXCEPT for our dear old friend Microsoft.

The other thing you are forgetting is that IE 6 is now what, 3-4 years old? And again in their infinate wisdom M'soft has decided to wait until Shoehorn (oops) comes out...... Why do you think IE use is dropping liek a rock! By the time IE 7 comes out I honestly dont think anyone will care! Firefox, Mozilla, Safari and yes even Netscape and Opera are SCREAMING ahead with CSS support and adoption of the standards ........ only one GIANT PITA remains and we all know who that is,, uh hmm ... Mr Gates .. would you like to comment?

There is NO magic bullet .... no single line of code that you can put in each page to make ALL browser play nice..... BUT you have to make a decision here.... are you going to stay trapped in the 90s with code loaded with tables or do you forge ahead into CSS, handling the problems now so your code IS compatible with all the new browsers and hopefully someday IE.

You are also completely forgetting all the new devices that are rolling off the shelves that can display websites and things such as RSS ...... old clunky table laden sites arent going to work on them .... period

And lastly you're overlooking all the advantages CSS "tableless" sites allow you...... FAST EASY design changes, SEO advantages up the wazzoo, the ability to reach more marketplaces and people with disabilities ...... and NO the whole world isnt on broadband ... as a matter of fact 50% of the world is still on a modem!

excellent job on that example alexW ..... something I probably wouldnt have thought of up front.

You mentioned (or someone did - this post has REALLY gotten out of hand) creating the markup and then "making it pretty" .... a great idea BUT how many customers come to you with the content and say "design me something around this"? Theres a TV commerical running here in the states right now where a couple takes a fancy bathtub faucet to a big-shot architect and say "build me a house around this" .... interesting comercial to say the least..... and a real life example of what I THINK your describing.

Im not saying your idea isnt sound .... because in fact it is .... I just dont know how well it translates into dealing with customers who want to see something "pretty" before they even think about content (the case in 99% of my clients)

I still have the average customers who want to see photoshop comps for design ideas that can then be translated into a website. Unfortunately this tends to push people back into that old "sliced table mentality" .... something I agree 1000% should be avoided at all costs. So how do you (we) approach these clients...... Im not 100% sure right now BUT I have started looking at the photoshop designs a different way in an effort to move forward.

What Im trying to do (and others may want to try) is creating comps that have elements that I know I can recreate in CSS (with borders, background colors etc) AND Im trying to let the pages "breath" for lack of a better term ........ experimenting with less boxy free flowing designs.

AND I have started something I never did before ..... looking at my photoshop layout designs as an advertisement, something you might see in a upscale magazine (you know full color, full page print stuff) ......... Ive decided to create ONE main focal point that gives the zap eye appeal to the page and somehow translates to what the client may be trying to convey. Then I build on that trying whenever possible to avoid that "box model" website look ... again all the while create elements (in p'shop) that I know will never actually be used on the site because they will be replaced by CSS goodies (but the customer doesnt know that) BUT again remembering I HAVE to recreate them in CSS - so you have to watch for trouble spots.

Im also now looking at these layouts looking for floats and potential CSS (IE mostly) problems .... kind of a preemptive stike on avoiding hacks from the get go....... but the customer is going to have to be re-educated some here too. Hopefully the designs will move towards the tableless "free flowing" look more and more so re-training customers will be easier. (in the states these people runs the fads like they run the bulls in Italy ..... always changing direction)

I can say Ive seen some BEAUTIFUL designs lately that are in this mind set ..... man I hope I see more. The one that REALLY caught my eye was http://browsehappy.com ........... what a wondeful well done CSS site! real eye appeal ........ this is where I HOPE we are going!

You're welcome, jgideon.

Table thinking (as in '3x3 boxes') doesn't usually translate directly across to CSS layout, so it takes a little while to develop the new thought processes. I try to start by getting the cleanest XHTML (semantically) first, and then look at what hooks I've got to hang the CSS on. Sometimes that's enough, but other times you might have to make a concession and add an extra DIV or span to accomplish the look you're after.

I just ran my example above through a few more browsers @ work, and it goes well. Opera PC, and Safari are perfect, but the really surprising thing is IE5 PC, IE5.5PC and IE5Mac all render it close to perfectly too. hehe.. What's up with that!?

Almost tempted to try it in Nutscape 4. Almost.

In fact, only IE6 with it's overrun of the heading border is giving any concern at this stage.

Sorry, one more.

Applying the above.

Is the first table; a list flipped horizontally and the redone after the number per row is reached?

or

A list that is LIMITED by $sql and the reapplied while $row[''] exsists?

Which is the correct css logic to apply?

Wow QNC, what are you on?

life and the web Unit7285 !!!

You like any of it (anybody)?

Seriously it is all about picking the right strategy for the job.

Why spend hours flogging a dead horse (debugging the wrong code principle),

when you can tweak a great fundamental!!!

Is that not why we are all here, to find out how to present our sites:

that we manage develop or just play with…

to a jaw dropping standard, that makes it a better experience for the user.

Who loving how we have done it comes back or passes the word on about our site.

In the struggle we impart what we have learnt to others. So that ease of achievement or, dare I say, inspiration is passed on.

Content is still King…

but with great sensual functionality it’s a Legend!!!

Push the code, it likes it ;-)

Hi qnc,

Your questions are straying a bit off topic and would have been better in a thread of their own where you would likely get more help. However you should only really ask for one or 2 questions at a time as your post will frighten anyone away who hasn't got a week spare to go throught it with you

As to your last question whether database content is tables it all depends on the content. If the content of the database is tabular data suited to rows and columns then yes a table would be best. If the database is articles and headings and titles as in many blogs etc then css will do fine. It all depends on the content.

A lot of your other questions seem like programming and not css questions as you can't change things dynamically with css (e.g. 4 columns instead of 5 depending on some other criteria).

If you want five columns next to each other with content going up and down then either use 5 floats so that the html order is one after the other rather than across as in tables. Or use 5 cells but float each block of items inside one cell at a time.

Sorry thats all I've got time for at the moment

Paul

agreed

The content determins the format used rather than trying to push content into specfic places.

Agreed. I had read somewhere that DHTML is really css and javascript and html acting together and with rescpect to that I wanted to know aspects of css needed to be though about and the depth that could be achieved. I do acept your point and see how it is best served under a new post.


Ok so what is a float? I will look it up but just wanted a brief description as it seems like there are two types you have mentioned above.

Thanks

If you have a look at the FAQ thread there is a long descripption of floats.

Basically a float is similar to the old html align="left" and align="right" attribites when use on for objects, images, tables, frames, etc.

The element is floated to the side specified (float;left or float:right - note that there is no float:center) and following content flows around it rather than starting on a new line.

In css block level elements start on a new line and the onlw way to get block level elements side by side is to either float them or use absolute positioning (or in a few cases relative positioning). The main point being in that if you float elements side by side then you can preserve the flow of the document as absolute elements are removed from the flow and have no effect on the flow.

Paul

ADDITION:

For the third question five columbs

What about five page element holders (esentailly liquid columbs, usually things like vertical nav bar etc..) which echo the <ul>'s independantly could that be a simpler solution can each <ul> element be DOMed?

Even thinging about it of course they can

Its this not a table or place more a elements thinging

i.e.

Not 5 coulmb table with rows dynamically generated (headache) but five <ul> side by side dynamically generated (possible?!)

Getting there or am I?

First off let me say what a great thread. Some awesome links as well.

I really got into css friday 12/01/05 when I read this on another posts advise.
http://www.onlinetools.org/articles/.../chapter1.html

I have the site point utopia book and have read chapter 1 today. I have css already on my site but am an absolute amature and have shyed away from a proper usage because of the rumors!!

I have essentally three table types on my site and have always used <h1-6> now I know I can also style the table tag and will be brave and make the script external.

However I have a few specfic questions that I would like to ask here If I may, to make the big style learning leap ahead of me.

Two of the three types of tables on my site are found on this page:

http://www.qnctv.com/simon/

the picture grid and the logo and menu at the bottom.

Now I have worked out with some help from people here how to call pictures from my database now I want them in rows of 4 as on this page I also want people to be able to chnage how manypictures in a row there are. I also want to keep the mouse over effect and have looked at css options for this as well (see the refernce that blew me away on friday and others)!!

This is the the whole daunting thing there are so many elements that need to come together smoothly for a good site. IMO.

Now using moduls and testing conditions

http://www.sitepoint.com/forums/showthread.php?t=217527

it should be possible to build the table on the fly. My question therefore before I get debugging is should I look to place these elements in place on the fly with css coding instead of tables some sort of picture place holder element?

The second question is more straight forward and with so many articles about curves should be no problem. However I want to know the depth that can be achieved. My logo is a small nested table, compared to some I have even seen on this thread!!

See the following look around the animated gif at the page bottoms
old example: http://www.qnctv.com/trini/
new example: http://www.qnctv.com/testbed/firstphp/movies/

How do I go about placing these elements relative to each other with css? I am not asking for complete code I just want a sence of where to head on these projects.

I like the smart box examples above and will be pouring over the books I have to decode them. For instance where people explain that in the end the elements are still the same i.e. same cell approach.

But obviously having your logo in a sytle sheet that propogates would be awesome. As for futher depth even the elements around it could be drawn dynamically depending on the page viewed.

And, as a complete flight of fancy, with a full DOM apporach moved to different locations as viwers require or moved as other page elements are fully revealled. Even soft fades in brightness and size as a shows start and takes center stage. This is based on the premise that all elements on the page can be DOMs and so can react relative to each other. Could all this be possible or is it just fantasy that the web (65-99%) is not ready for yet???

Sorry about that long one.

The last thing I am think about is my show index page and possibly the most challenging of the three tables. because it is organising a table (currently) vertically and as we all know (http://www.w3.org/TR/CSS21/tables.html#q4) tables are organised primarly across never up and down can ccs help organise the columbs content or is just the boards of the coulmbs here?

I Currently have five columbs: http://www.qnctv.com/showsindex.htm

What I want to build is for each columb to be propagated from a different table in my database. I also want indepenadnt sorting of each coulmb with out reloading the whole page!!! I also want the coulmbs each to have styalised scroll bars and I also want the pictures (conceptually show posters) to be DOM elements that can flip.

The filp will disappear the picture and move the explaining text which is simulataniously reduced to a title to its place (mad smooth animation like for those good browsers that can handle full DHTML) this can be done for shows that have already be seen. The title text will be one colur, probably the same as vistied. Or the info of what was desired can be cashed in a shoping cart/session like facility on pressing a schedlue button so that you can select a program of shows to watch i.e. read a few stories see a few pictures get high score on a game while a movie is downloading in the back ground on your slow connection (off course session don't forget so you can find the shows you didn't see, like the most etc....I want to use sessions as a way to navigate through hoards of data/shows!!!

And obviously I want the ethos of all this remaining for all browsers. Not px perfect I have never designed like that (in my short amature career!!) but sensually relative and features for all even down to using old fashioned frames.

Seriously though could a css variation on frames help or is there a more elegant solution? Might not be a bad way to go certainly for the independanat colums effect. mini table like columbs with one line of code in.

while ($row){
echo "<td><img src=\"$img_url\" height=\"55\"> <br /> $name <br /></td>";
}

where $img_url = $row = $result = $sql="SELECT * FROM $dbtabl";

Thank you so much for getting to the bottom of this!! Take a break you deserve it!!

One last question (LOL, forgive me please) if databases are tables, then is there a case for info called from a database to be displayed as a table or can css really do it better?

But that's only the layout framework. What if you decided that emphasized elements should be shown in red and bold, rather than italics. How would you do that from a template?

Good work Alex Cleverly only using 2 images for the same effect

Why are you sticking to 99%? It's just some arbitrary percentage you've come up with, with no basis in reality. "Sticking to it" is your choice, but it doesn't support your argument.

It's a bit narrow-minded to say cross-browser compatibility isn't "truly purposeful" just because the majority of users use IE. You're basically saying "If you don't use IE, you are meaningless."

Since when is the majority all that matters?

AlexW, awesome!

These examples are giving me a good inside view on how these things are done - very insightful

Thanks for demonstrating your creativity - I have a lot to study.

jgideon

You're off the hooks. Sorry to say so, but you're lacking CSS skills. As easy and simple as that.

CSS is teh future. http://www.csszengarden.com should be an example of that. You just have to know your ****. When you master CSS, you will never ever ever go back to table based layouts. You'll be thinking: WHAT THE F*** WAS I DOING???

CSS is like a new way of life. Makes everything easier. I love it.

Couldn't resist having a go at an alternative.

http://www.sitepoint.com/examples/fancy_box.html

Good points are:
- Semmantically correct (assuming you would want the footer to link - if not, I'd need some spans)
- two images used

Bad points are:
-Only tested in FF & IE6 so far
- IE6 runs the border under the heading a bit wide

I'd be confident of knocking those bugs on the head if I had 20 minutes more, but I'm currently being called to cook a BBQ, and I can't divert them any longer

Absolutely! Thanks so much Paul, that's the answer.

I can see how it works - although it will take a bit of studying to make this sort of thing second-nature.

I appreciate your extra time in showing me this.

For the sake of this thread, I'll leave the table example intact for anyone who wishes to see it.

Again, thanks Paul O'B - that's it!

jgideon

Thanks for your post.
This is the discipline I ought to strictly adopt.
I shamefully admit I have too much to "unlearn" ..

The dot.com boom generated a breed of idiots that regarded themselves as the best webdesigners of all (and still do)
then a breed of gullible followers (which I am included) .. who were spoon-fed a catalogue of bad practices ..
because web is very visual - the average person get awed with anything "flashy"
further encouranging more bad practices.

Reminds me of sci-fi films with no story lines but amazing effects Zzzzzzz ...

The real purpose of hypertext markup is document structure first and foremost - embellishments are secondary and should be made mutually exclusive.
Which finally brings light to what methodology I should take when designing (oops I mean writing) a page

Musicbox, you must have missed my 2 other posts in this thread. The reason I said:

...is because I have been frustrated at how many top-level websites are littered with tables, and this is the way I have learned. It is frustrating trying to revamp everything I have done thus far and shift gears in my thinking.

I am not the only one who shares my sentiments. As I have been searching this thing out, many have felt this same sensation where one wants to pull his hair out.

There's no need for posturing. I expressed my honest lamentations about a particular situation, and many have commented adequately—contributing constructively and have proven very helpful.

Try reading the whole thread and you'll see how my understanding developed through the full length of the discussion. I have set out on a new course to rediscover CSS and make the painful shift from poorly designed HTML to neatly formatted CSS.

with sincerity and goodwill,

jgideon

(**afterthought** I never said CSS was poor - but the horrible morass of browser compatibility [namely MSIE] is the reason some of my problems with CSS. In practice, a tabular layout tends to show more consistant results in multiple browsers, whereas attempting the same thing with CSS has caused some horrendous glitches. I did use a browser sniffer javascript to load a separate stylesheet for Mozilla, and one for MSIE - each with their own respective differences, which seemed to solve the problem - but this turned out to be more work than simple tables.)

Thats not the way to go its far to much trouble. Browsers support is a pain at first I agree, but now I don't need to think about it and have little problem in all the major browers. However it is a skill that has to be learned and it of course it would be nice if everyone played the same game but lifes not like that

Paul

BTW I put a demo up of the question you asked abot a bordered element (see my post above)- hope its of some use

Exactly ! you are the only one who says using CSS is poor, either you need to purchase CSS books or get to know more about CSS and how easy it is!

I don't buy any of this.
First off, you mention that " everything is controlled from one spot." Well, if you read my post, this can easily be achieved with a master template as well. Everything controlling page layout is in 1 spot (this master template).
As far as search engines, they are pretty complex beasts, and have been dealing with tables for years. Why do you think that all of a sudden they can no longer deal with tables.
Now, don't get me wrong, I'm all for CSS for styling in general, I just don't see any need for it for page layout. Use a master template (ie, using Smarty templating engine, for instance), and your page layout is in 1 place, and can easily be changed site-wide.
I think messing around with Div tags for layout simply isn't necessary. Yes, in some cases, you can achieve something that cannot be done with tables. In those cases only does it make sense to use CSS for layout.

That is what I typically do, it is much easier. Visualizing the construct of a page rather than the design always makes styling it easier when the time comes.

HI,
Without delving into more advanced techniques as already mentioned by Alex above it basically boils down to the fact that 8 images are needed to make the borderd box if you use normal methods. So whether you use a table or css the outcome is going to be much the same because you will need 8 elements into which you can place the background elements.

So this type of design in css will not have great benefits over a table design except for that a fact that its not a table.

You can reduce the number of elements needed by using existing elements depending on your layout but you will end up with some non-semantic structure.

Here is an example using your images to prodice the box in your example.

http://www.pmob.co.uk/temp/borderedbox2.htm

That's just a basic method of putting a background image into each element. However once the css is put into an external file the page isn't that bad.

If you want more examples and (probably better examples) the have a look here:
http://css-discuss.incutio.com/?page=RoundedCorners

Paul

If you're looking at things from that perspective, I think you'll be struggling with CSS for a long time.

Ponder this as an alternate way of doing things:

Start with marking up your content correctly (from a semantic point of view). Then think: how can I style this to make it pretty? All of a sudden, CSS is much easier to apply, and your freedom of design imagination is a lot greater.

I do realise that it's a quantum leap in your outlook of the world, and I don't expect you to adopt it overnight, but why not toy with the idea and experiment a little?

This may not work for everyone, and I'm aware of that. It works quite well for me, although I'm not a graphic designer by any means.

I would argue that it is easier to do with CSS. If you separate all of your style from your html and put it into a stylesheet, and you use that stylesheet to define the layout of your HTML, everything is controlled from one spot.

You mention 'well-structured', which is what CSS and XHTML are all about. Using valid XHTML with no table tags for the layout, and all your style info in a linked stylesheet, leaves you with a well-formed document that is (should be) constructed in a logical format. This makes it easier for search engines to crawl, and gives importance to headlines, titles, and the content of your document. The search engine can dig more deeply into your site because there is nothing extraneous to get in its way.

If a search engine comes to your page only to find a bunch of nested tables used for layout with font tags and spacer gifs, it is less likely to crawl as deep and find the actual content. Even if you use a table for the layout anput all your style in a linked stylesheet, there is still more non-content related markup it must wade through.

I don't know of any actual proof of concept links to point you to, but it is generally accepted by the web standards and SEO communities that the logic behind this theory makes sense. Perhaps someone else has some good links that back this up.

I wanted to add one thought here.
A well-structured site should really be making re-use of a "template" file for layout.
If you only have 1 template file, is it easier to maintain with a table layout or css?
Either, right?
One thing I will make note of is that someone mentioned that CSS sites are more search engine friendly. Can anyone point me to an article that verifies this?

There are quite a few approaches. S?ren Madsen put together this version a few years back now. It uses a little more markup than you probably really need, but it's relatively easy to follow the logic, so it's a good start.

http://www.alistapart.com/articles/mountaintop/ is much better, but relies on having enough 'hooks' in the markup. Obviously, if the box is a set width rather than liquid, things get immediately simpler.

Using a combination of the two should cover any situation.

Our own Simon Willison has devised a radical method using 'unobstrustive javascript' . It has markup so clean it looks like it's made of stainless steel, and relies on JS to 'post-render' the corners into position. Not sure I'd personally run with it, but it's an amazing idea.

The main thing I'd recommend is, whatever method you use, don't put the corner graphics in the foreground (i.e. <img src="corner-lt" />). They aren't illustrations that explain or contribute to the actual content of the document (unless the doc is actually about corner graphics), so they shouldn't be floating around around in amongst the real content that gives the page it's value.

Your corner graphics are just there to decorate the document in the current color and style that browsers see. In 18 months time someone is going to be looking at that page on their smart phone with your new layout design, and that little inline corner image will mean nothing to them.

Drop it into the background of the CSS and it's gone the next time you change the stylesheet.

Is it just me or is the link you provided using huge background images, in hopes that the images will be wider than the table?

Soren's original example?

Yes, that original example uses a huge background graphic because it has soft shadowed border effects, along with the round corners. As far as 'huge' graphics go, it's a 2.9k gif - so I don't think it's anything to cough and splutter about.

It would be quite possible to separate the corners from the border effect to give you unlimited scaling if you wanted to re-engineer it slightly. But with the other 3 graphics clocking at .86k, 1.27k and .88k respectively, I don't think I'd bother in most circumstances.

The key is, now it's out of the HTML you are free to make decisions like 'y'know, maybe a guy looking at this on his web-enabled phone paying high bandwidth charges might not appreciate the subtleties of my curved corner finery?'. I can do something about that now!

That was a nice little speech. Then I go to your Web site only to find it uses HTML tables for layout!

Here is a good link that I refer people to often:

http://www.hotdesign.com/seybold/

JT

Heya friends - thanks again for all your responses -

I have a practical question:

How can I create a CSS equivalent (probably using <DIV>) of a table -
3x3 grid with images in the corners and sides?

here's an example done with tables:

http://superlynx.net/tables/tables.html

I bet this is so very simple - but I agree, the markup needed to display this sort of thing is ridiculously large.

Any suggestions?

Thanks again,

jgideon

"CSS is up there with gay marriage"

LMAO...I'm sorry...the wording of that just made me laugh out loud. I'm pro gay-marriage and I'm pro-CSS, but that really makes my day.

I love css-based design and agree with all the principles it stands for, and its great when you manage to get a css design that works ok is most browsers.... but sadly from a financial point of view, I don't always have time to mess around with hacks and spending hours getting it to look right in IE. Sometimes I give in to temptation and whack a table in... I feel bad about it afterwards but sometimes you can't justify the extra time.

haha, nice, that will learn!

Anyway, using CSS for all your styling and designing will feel so nice if you have the feeling you got everything under control.

The steap learning curve is just something to get over. Think about it. Let's say your client wants a new website. But the dynamic content and menu structute is ok and doesn't need to be changed.

Wouldn't it be nice to just go change the stylesheets instead of messing within all your table tags that drive you crazy?

Ow man, you're really feeling powerful if you only need to change something in your stylesheet

Welcome to Sitepoint!

Before you knock CSS table replacement take a look at one page that uses CSS where a table could have been used: http://www.gisske.com/GroupQuote.aspx To my knowledge this displays fine in all major browsers.

Have you ever been responsible for sites that continually change? I am. I can tell you with out CSS based layouts I would spend 10 times the time it takes to modify a layout, especially if the site is a couple hundred pages.

Just like any craft it takes time to learn. When I first learned designing with tables I didn’t understand anything. The same goes with CSS. Once I mastered them it was great.

This is just silly really. You don't say that physics is useless because you don't fully understand it (and things may act different in different situations).

CSS is difficult to use, but you have microsoft to thank for that. The only way is to just use the work arounds or the IE7 javascript files. I've gotten to know the hacks out of habit and I usually get things right the first time now cross browser (with maybe one or two differences).

Really... people make a big problem out of something that has a very simple solution.

Then again, I do recall constant pulling of my hair and screaming trying to get things working right with CSS. I first desined my home page with CSS and it displayed PERFECTLY in standard conforming browsers... but in IE it was so horribly messed up I just said "screw it... it's my blog, and I dont care about IE users" and simply sent the page as application/xhtml+xml and used PHP to send IE users to a page with a big IE icon and a big red X over it. I know. Immature. But I didn't really care at the time.

samwalton , this isnt quite the place to post that question . Being a Gates fan (muhahaha) , I feel Microsoft can still release something truly world class and upto the standards we are looking for today . Despite having FF on my computer, my hand naturally edges towards IE 6 , althought probaby due to the time I have been using it . I look forward to what Msoft will make of IE 7 and I think they have what it takes to FINALLY deliver.

Web design is not pixel-perfect. Get used to it. Web design is about adaptation, and making things look as good as possible AND still usable in any given environment. They will not look the same across all environments, and there is nothing you can do about that.

If you want precise control over how things look, go into print design.

Misinterpreted, so I guess I owe you an apology too for sounding harsh.

My point is just that there are many ways in constructing alternative layouts while still remaing structured text. So if you got away from re-creating tabular sites, you would inevitably discover that tables aren't the right tool for the job when it comes to layout and structuring content.

As far as I am aware Filter is proprietary IE only code. I haven't seen (or can't find any) references to mozilla supporting flipv or fliph.


lol - This topic regularly pops up which is why I avoid joining in these days You have some good answers above to keep you going anyway. You might benefit from posting the specific problem you encounter with css (with real code) and we can show you the easy to way to solve it without pulling your hair out. Almost all the problems you describe can be solved relatively easily armed with the correct knowledge .

Paul

nice post!! can see your very passionate about tabless design....
me too...

Yes, it is true that I am frustrated - and am willing to take the steps necessary to shift from intermingled design & data to neatly separated design & data.

I value all the opinions and insights from everyone here. Although, since I am rather new at this, I wanted to express what I was seeing, wondering if I am alone, and since sitepoint is a great resource, I assumed I would find a reasoned response - not slack answers.

In fact, I love the neatness and ease which CSS affords us, and this is why it is important to me. If I were ready to chuck it all, I would not bother crying out in desperation to someone who knows what they are talking about.

I recently picked up an XML textbook, and I am rediscovering CSS, and this is where the inevitable friction started. After reading a few sample chapters from HTML Utopia, I am interested and have heard the glowing reports of experts that make future prognosticative declarations that CSS is here to stay. I needed this confirmation before I purchased the book from Sitepoint (I'm not Mr. Moneybags)

Thanks so much for all your responses - I didn't realize it was a topic of contention and debate ad nausium. Otherwise, I would have searched a bit more thoroughly before ranting—unnecessarilly spamming the forum.

Thanks again,

jgideon

(I'm going to resist frustration, slow down, and rethink it all)

I never claimed you didn't... Sorry if that came across as an attack.

I'm well aware of the benefits with column-based layout and structured text, thank you.

Microsoft...Microsoft...

I'm a little surprised (and slightly disappointed I admit) that FF/Moz try to support 'flipv fliph' at all. I've had a look at some examples around the place and my Firefox seems to ignore the tag completely - http://www.domedia.org/oveklykken/css-vertical-link.php

Anyone else.

Again, CSS has nothing to do with divs really, that's a major misunderstanding. So stating CSS vs Tables while meaning Divs vs Tables i just wrong due to the fact that divs hold content wich CSS doesn't.

However, my main complaint (translated excellent into words by a guy named Malte) about "todays CSS" is that a very vast majority of people (including me) is re-creating tabular homepages with divs and adding CSS to them as if it wasn't possible to do that with tables. According to me, as long as everyone are stuck in table and column thinking, it's not more to using divs instead of tables than a mere principle of the right way to use elements. When you start to create alternative layouts, then you can really understand what it's all about.

The main thought process is to understand that web development is not "painting a layout". The structure of the document is as important (if not more important) as the visual representation. After all, it is text, not a bitmap. You start with the proper structure and then use the layout fit for this purpose, not the other way around.

Can't find much to disagree with, dc.

Clients will always want a pretty picture they can identify with - it's the part of the job they feel most able to comment on - 'ooh I like that color..... wow our logo looks so cool!...'

I don't think CSS particuarly changes the way we interact with our clients. I would generally make a judgement early on whether it was relevant and interesting to them.

With less web-savvy clients it probably would never come up. With more sophisticated clients I might go through some of our methods and the thinking behind it - just in terms of 'what are the advantages to your business'.

In terms of the boxy design, I think you're right that people are moving away form it. I think initially when CSS layout technique was being worked out, people used the simplest thing that could be made to work (e.g. SP was designed in late 2002). After that, it kinda became a style, almost a badge of honour to have a slightly boxy site - it showed off your CSS cred.

Web design has moved on since then and as the techniques have become more sophisticated, people have got bolder with their layout shapes. It's great to see.

Don't feel threatened by those who say that coding in tables vs CSS is doomed to become extinct like the dinosaurs. First of all, there is nothing in the future that says tables will become obsolete. Tables will always be there for creating tabular data for the simple reason that they are a whole lot more efficient at that task then CSS. Plain and simple.

In response to the debate that IE screws things up and Mozilla is God and statements like that, too many webmasters miss the point of their jobs. The world is a messy place and it is your job to see to it that visitors to your clients' sites are able to see the site with reasonable correctness and that they are presented with a clean design and decently organized information.

If this means that you have to use tables as needed to ensure cross browser compatibility, then so be it. In my opinion, it is not a sin to use tables to create a basic site skeleton and then use CSS to decorate and organize the content within. I have had much greater success with this approach and my sites' layouts stand fast regardless of the browser. Using strictly 'DIV' tags for everything, while cool and techie sounding, can get you into trouble with some browsers not properly handling width values and things like that, usually resulting in the whole layout blowing up in one way or another.

When I refer to the skeleton of the page I usually restrict this to a top area for the logo. Below this there is the menu area on the left (or right) and the main content area next to this. At the bottom I have the standard footer area. By using a simple table layout for these basic elements and specifying the widths involved, I am assured that at least the orientation of the vital elements (logo, menu, content, and footer) are in their proper place.

For all the content within this structure I use fairly exhaustive style sheet instructions that define borders, text decorations, margins, all that sort of stuff. This is a strategy that allows me to quickly and accurately build pages for my clients and one that ensures that they load properly in the broadest range of browsers possible.

For me, entertaining the argument of 'complient browser this' and 'noncomplient browser that' is not what my job description is. My customers don't care about these issues and I am not being paid to complain about them either. What I am being paid to do is to create good looking, easy to maintain, and functional sites that make my clients money. Like I said, it is a messy world out there and you are expected to produce results because you are the professional and pros do what it takes to get the job done. That's why we get paid the big bucks. LOL ! ! !

Certainly no-ones predicting the imminent demise of the <TABLE> tag, so you're right that table based design will undoubtably continue.

Similarly, propellor-based planes still work fine. They were a brilliant idea when they were invented and still play an important niche role today, mainly with small regional airlines and 'mom and dad' aviators.

But the big international, high-volume carriers know the power and flexibility of the commercial jet and we, as customers, expect and demand jet speed and performance when we travel now.

No authority is ever likely to outlaw propellor technology and it will probably always have an element of romance, but is it likely to play a big ongoing role in our collective futures? Probably not.

I definitely fall into the "understand and use CSS well but still will resort to a simple table based layout in the interest of saving time and frustration." I really have not branched into CSS-P. But I am nearly religious about making pages as semantic as possible as well as offloading all formatting to the stylesheet.

I am developer, far more than a designer, and I find CSS to be a wonderful templating solution in many ways. Just have the app stream simple, vlaid XHTML and let the CSS take care of the rest. Rather than going the PHP BB route. Which is quite, quite ugly.

You see, I am in the midst of "cleaning up" the stock PHP BB templates (subSilver) into HTML I can live with for my site. And it is a true horror of table based design and rampant misuse of CSS. Nearly everything is wrapped in a table, oftentimes nested several layers deep. What is not in a table is in a span.

In fact, for those of you in the HTML education field, having students generate a semantic, CSS based PHPBB template would probably be a wonderful exercise for your students.

Just for kicks, some rough ideas of the table-based bloat:

Now, the CSS file will probably land in the 20kb range, with a separate 5kb print sheet, once all is said and done. Versus 8kb for the stock version. But that will almost certainly be cached in general, given the way people use forums.

In addition, this tactic will save alot of processing and memory overhead due to much lighter template files. Not too bad for a day's work.

For those of you having difficulty making the jump to CSS orientated design, I highly recommend Zeldman's Designing with Web Standards. The second half of that book did wonders for my understanding of the whys and hows of CSS based design. Definitely worth the $15 and four hours of your life.

You can fix that easily Alex by leaving the height out of the h1 style.
e.g.
Now its 100% perfect

Paul

Totaly agree. I looked at the css files of this site to try and understand how they put it together and on the way I noticed the difference css makes.

look

with css http://browsehappy.com

the same page with out css http://qnctv.com/css

Really remarkable difference...

wow. i posted somewhere on the first page of this thread...
if anything came good of this topic, it shows yet again, the need to keep writing about css. It may seem like we've beaten this topic to death, but it's good that newer folks have current resources rather than reading something from eric meyer written 3 years ago. There are even times when he has corrected himself.

props to SP for hilighting this discussion even though it seems like "hello, the answer is obvious."

...always empowering the web developers

OH BOY did you hit that nail right on the head! This is another one of the problems that REALLY needs to be fixed by the "big boys" ..... people like ebay, phpBB etc etc ....... OH AND THE CMS PEOPLE!

I had a client come to me a few weeks ago for SEO and they had used a cms w/ template to create their site ...... I looked at the code and just about died! When the SEO report came back from me the client was horrified to find out that a site that had cost them MAJOR DOLLARS and the code to content ratio was so far off the scale I couldnt even count it! Tables nested almost 6 layers deep! THIS is one thing that wakes a client up to a clean layout in about 10 seconds ... all of a sudden they want to know exactly WHY and HOW code SHOULD work! Its not subjective then ........ its "business".

Some of these other big sites are also pumping out some code that looks like it was "thrown across the room at the page" ....... the one that I had to chuckle at was that ebay "powerlister" ........ it allows you to add listings from your home computer. It has an html mode window ......... oh my lord, how about html 3.2 tags and a table nightmare..

Im really thinking this is going to be the "year of clean layout" ..... Im hearing it over and over from clients .... clean fast and VERY SEO oriented, which CSS does a wonderful job of.... Ive also seen stories and sites that list some of the "big boys" converting to css tableless designs........ Im thinking they are all seeing the new devices coming down the road (PDAs, Cell Phones, RSS etc etc etc) and are positioning themselves to make sure they have a BIG piece of that marketplace ......... these type companies are usually the ones that pull off those amazing marketing coos and like any great marketing team should do, they are "moving into postion" now... then when this type stuff hits I THINK your going to see a major panic by the ones that weren't prepared to get into the "ballgame" ...... those designers that are poised, prepared and ready to do these type conversions will come up BIG winners .....thats one reason why my company "made the switch" this year and will be pushing both our clients AND our staff to know how to do it right ... the first time.

Hopefully when more of these major sites start making the switch and more of these devices become commonplace more and more of our customers will start asking how to get THEIR site / product into the limelight and will care (even though they dont understand it) how their site's layout is created...... thats what Im "banking on"!

Ah, Excellent.

Thanks Paul!

BUT HOW CAN YOU EXPECT MARIO; OR ANYONE TO 'MOVE ON', WHEN EXPLORER WON'T 'MOVE ON'?!?!?

Alex, glad you mentioned these things. Look at the other end of the spectrum to the Concorde. It was touted to be the wave of the future and look what happened to it. While it was running it was too expensive to operate based on ticket sales alone so the French govt had to kick in about 50% of its operating costs just to keep it aloft. Also, it could only land at a few select airports worldwide not to mention that while flying over populated areas it had to cut its speed to below 700mph for obvious reasons. Put this all together and it became obsolete for the simple reason that it was not a justifiable form of transport regardless of how high tech and great it was to look at.

What happens in industry, and in life in general, there will always be a broad spectrum of approaches to getting things done. People on one side of the road might choose one way of doing things because it suits how they work and think and meets their requirements in an efficient way. People on the other side of the road might choose a perfectly valid way of doing things differently. Who knows, one might have plenty of sun and can generate power using solar panels and the other is on a river and can take advantage of that for hydroelectric. Neither side is wrong, infact, both are right, given their individual perspectives.

My argument is that it is wrong to say that CSS is the only way to go. Too many people are extremely evangelical over this issue. My point is that, because of the large number of people who use browsers that fail to properly process CSS instructions, it is often wise to default to at least a skeletal structure using tables that permits proper displaying of the website's basic content in these browsers. You can then rest assured that you have achieved a maximum in terms of getting the site's content in front of the viewers. Failure to do this will only result in a certain percentage of potential customers coming to your sites going some place else to spend their money.

Now, when the vast majority of the general public is conforming to CSS 2.0 or better (I am talking 99%+ here) then we can talk about using total CSS design over tables. Based on past experience I believe we are probably 5 or more years before we are at that level. Why do I say this? Well, at least 25% of computer users are still using Win98SE. As you will recall, this shipped with IE 4.0 and at best these users have upgraded to IE 5.0 or 5.5. They represent a huge sector of the population that is running a flawed browser in terms of properly handling CSS.

The biggest issue with these browsers is that they do not properly handle the width values of many CSS elements and therefore will likely screw up a great looking layout that is totally dependant on CSS. This is why I use tables for the skeletal design of my sites and then use CSS for everything else. At least every browser I know of will take a basic table layout and understand width values which, to me is vitally important for the placement of the 4 major components of a webpage: logo, menu, content, and footer.

I will have to add that I do not nest tables at all when making my pages because I do appreciate the bloat and confusion that this causes. As I said, when the vast overwealming majority of browsers out there are CSS 2.0 compliant or better, then I will consider totally eliminating tables from my pages. For me the need is not to take a purist approach to how my code is created but a more elemental one of seeing to it that my clients' sites are all rendered accurately regardless who the visitor is on the other end.

Roxanne, Explorer simply isn't a massive issue. It's a slight annoyance.

Wired.com, Amnestyusa.org, FastCompany.com, etc couldn't afford to be building their sites in a way that compromised the view in 90% of browsers.

Check them out. They've got know standards/CSS barrow to push, but they are fast, clean and look great.

If you think it's desperately important to support Netscape 4, then you are going to battle with CSS. Personally we now get more Nokias browsing SitePoint than NS4 in an average month and that percentage increases every month. I know which I'd prefer to support into the future.

Uhm, have you been reading. And can you find your caps lock key?

Yes, IE has some issues with CSS. However, if one pays attention to a few gotchas from the get go, one can make an IE6 CSS friendly site with little extra effort.

And even if one does not want to all the way into the depths of CSS-P and tableless design, there really is no excuse for constructs like this:

All that code literally displays the forum index, aligned centered. I replaced it with:

Now, if I need to center that H3, I can always set H3s in that section of the page to be centered in the stylesheet. Then, one day, I decide that link should really be on the right. So I align it right. In one place. Using maybe a dozen characters.

Or, to be more precise, minimalize on markup, maximize on CSS. Watch bandwith costs drop, rendering speeds shrink and search engine ranking rise.

I think 25% is a bit high, especially if you are dealing with mainly business users. Moreover, I would content that you will see two groups of 98/IE users:

1) Never patched ones using 4.0
2) Patched ones using 6.0.

I see very few IE 5.5 users these days (on a half-dozen sites). Most of them are running 2000 or NT4. Which indicates they are corporate users with incompetent or lazy netadmin.

@import and semantic markup are your friend. Yeah, that 4.0 user might not see anything but a very basic site. On the other hand it is still quite operable to them.

EvilDog, I dip my hat Concorde is a nice (but rare) example of a more advanced technology that didn't replace the old one. Getting slightly off-topic, I'd think that Concorde's problems were simply the violent physics of the sonic boom, and the fact that they weren't able to 'design it away'.

But looking at an example like the Counter's stats, it's pretty hard to see all these supposed IE4 users. Unlike a lot of other tech site samples groups, Counter's samples have never been particularly 'techie'. Counters clients are small to medium sized sites catering to small to medium sized niche audiences -- exactly what the majority of us code for.

I'd love to know what numbers 3 and 4 are, but, whatever they are, since nothing has changed in the IE market, I'm tipping they're not IE users.

I too have built all my recent sites using CSS-P and CSS 2. All my sites view fine in IE6 as well. They are usable in IE5.5, and have troubles with IE5/NN4.7. But these are browsers that are 0ver 10 years old? Give me a break.

There are browsers out there like Avant, Enigma, SlimBrowser, CrazyBrowser that can work and show good CSS on older PCs. Then there are the other freebeies like Firefox. So there is no reason to be using old browsers..... we have to move on or do we still find Ford marketing parts for Model-T or even 65 Mustangs?

So I hardly see the old IE5/NN4.7 arguements as relevant. I have not registered either browser in well over a year in any of my sites. Even the German Government is moving to XP and IE6. Netscape7 and Firefox...... anfter completely taking them apart looking for securits holes.

CSS 2 does not lock out IE6 when written carefully. But we are looking at a new Legacy Problem in my view. We all hope IE 7 will finally support CSS2 completely and standards and Positioning. But IE7 will only be available to Longhorn users. So until most people switch to that monster....... unlike all the browsers before, IE 6 will hold the market, no XP users can upgrade to 7 any more, so all the hold out XP, mellinium, Win2k and win98 users will still be using 6 at best. So keep your hacks handy for quite some time until they get fed up and switch to Firefox/Opera.

well this is an interesting thread since firefox/mozilla has been ignored until recently and webdevs have concentrated on the generic mozilla 1 point somethings(horrible IMO), I feel the current state of firefox(finally getting it right) has made it impractical to ignore as it is getting a good reputation as a safer browser, this css versus tables thing has made me respond to a nice css image layout under text here at :

http://wellstyled.com/files/css-nopr.../example2.html

the interesting thing I did with this example is I hacked it and it breaks both IE and firefox the same way except they interpret top and bottom borders differently, otherwise it brings an interesting concept to css that before tables could only do with ease, you will notice below I added an extra image(no red x when the image is not there btw) and that by using a br tag the images come out diagonally(very weird) I wonder if this is gonna open up a new can of worms on standards myself, here is my example(works the same in xhtml or as html) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Fast rollovers, no preload needed - Example 2</title>
<style type="text/css">
body {
margin:0; padding:0;
}
#menu {
height: 25px;
margin: 0; padding:0;
border-bottom: 1px solid black;
}
div.outer {
float: left;
width: 120px; height: 25px;
margin: 0 3px 0 0;
background: url( 'bars.gif' ) 0 -50px no-repeat;
}
div.outer a {
display: block;
margin: 0; padding:0;
width:100%; height:100%;
overflow:hidden;
font: bold 13px/1 Georgia, serif;
color:#039;
text-decoration: none;
background: url( 'bars.gif' ) top left no-repeat;
}
div.outer span {
display: block;
margin:0; padding: 7px 0 0 13px;
}
div.outer a:hover {
background: url( 'bars2.gif' ) top left no-repeat;
color: yellow;
}
div.outer a:active {
color: black;
}
</style>
</head>
<body>
<div id="menu">
<div class="outer"><a href="#"><span>First</span></a></div><br />
<div class="outer"><a href="#"><span>Second</span></a></div><br />
<div class="outer"><a href="#"><span>Third</span></a></div><br />
<div class="outer"><a href="#"><span>Fourth</span></a></div><br />
<div class="outer"><a href="#"><span>Fifth</span></a></div><br />
</div>
<p lang="en">Check the source code to see the solution.</p>
<hr />
<p>This example belongs to an Wellstyled.com article.
Please read <a href="/css-nopreload-rollovers.html">the article</a> before using this example.
Do not link this example from other web sites.</p>

</body>
</html>

Not weird at all You have placed a break after the float tab so the next float floats left from where it now is which is about 18px lower than the tab to the left due to the height of the break. This is not high enough for the float to clear the whole tab, so it floats against the bottom right corner of the tab to the left and so on....

You realise that by adding another image on hover you have killed the fast rollover effect. The point of the example was that you didn't need to load an image on hover you just made the top one vanish and then the one below shows through.

Paul

oh! I guess I do not have that much experience to realize it is not weird, thanks for pointing out to me also about the intended effect I messed up, I guess I was looking past it's simplicity(it's great css) and making too much of it, thanks for replying.

Some of you people just don't get it. So what if you have the latest browser on the market on your machine and 90% of everyone else does. There still remains at least 10% that you are willing to ignore by going pure CSS and these represent potential customers to your clients.

If you could tell your clients that making some small adaptive changes to their website will allow them to reach these extra 10% of older (and faultily compliant) visitors, I would dare say that most of them would jump at the chance. In fact they would probably ask you why you didn't tell them sooner about this. Hell, any business would jump at the chance to get a 10% boost in sales, no doubt.

This is my main point that some of you seem to be steadfastly missing and that is that your job is to see to it that no stone is left unturned when it comes to providing a website for your clients that draws in the largest potential customer base possible. Using strictly CSS and ignoring the certain small percentage of browsers that are out of date just because they are not in the majority view, is wasting opportunity. In fact I would say that you might even be able to go out and steal business away from some webmasters by pointing out to existing site owners that by expanding their sites exposure through careful coding they can increase visibility across that last 10% of browsers that are not state of the art and get more business as a result.

Saying that those people out there running older browsers should upgrade is really quite stupid. The fact remains that they are there and still run older machines and older non-complient browsers and they do represent potential customers to your clients. So, what is it going to be? Remain hard headed and stick by the principal that these outdated systems should just be ignored or really do something to help your clients' business and embrace the largest crowd possible. It all depends on how much you are willing to to your job and that is to see to it that the sites that you design for your clients are ones that make the most money possible for them.

So to repeat my earlier posts, I will continue to make a basic skeletal design for my sites using table coding to position the principal elements of my sites (logo, menu, content, and footer) and use CSS to provide the styling necessary to make the page look pretty. The total amount of table coding I use is really not that much at all -

<table>
<tr><td>[logo]</td></tr>
<tr><td>[menu]</td><td>[content]</td></tr>
<tr><td>[footer]</td></tr>
</table>

Even Netscape 4.7 understands this layout. Within this framework everything is totally CSS but even browsers that fail to interperet some or all of my CSS coding, at least they will be able to display the critical elements properly positioned for the visitor, undecorated as they may be.

One of us doesn't get it, that's correct.

By using pure CSS, I don't ignore the 1% or so that uses ancient browsers or text-only browsers. The CSS degrades gracefully, which means that those users may not get a stylishly designed page, but they will get exactly the same content as a Mozilla user. Unless you have a site explicitly about graphic design, it's the content that matters. And if you need cross-browser pixel perfection, HTML isn't the optimal format anyway.

I'm not "forcing" anyone to upgrade, and I know there are people who just can't, for various reasons (I've been consulting at a place where they couldn't abandon Netscape 4, because their whole intranet was dependent on it). But people who use really old technology will have to accept a lesser surfing experience.

If I use a 1974 Blaupunkt radio in my car, I can't expect it to track radio stations like a modern RDS radio, right? So if I use a pre-HTML4, pre-CSS browser, I shouldn't have the right to expect modern sites to look as good as they do in Mozilla. I definitely have the right to expect those sites to work, i.e. that the content is accessible, although the design and layout may be lost.

There's an old joke about a guy who's wife always made roast beef by first cutting the ends off. He asked her why, and she said: "because that's how my mother did it." One day, the had the opportunity to ask her mom, and she said: "because that's how my mother did it." Finally, the asked the grandmother, and she said: "because I only had a pan this long."

HTML was designed (ironically) to separate the content from the formatting so that reports could be shared among researchers, but that was when P, H1, H2, TABLE, TR, TD, and a few more were pretty much all there were to choose from. SGML was far too complex, but its syntactic model was adopted for HTML. We've forgotten what HTML was originally intended for, and have asked it to do way too much, but the bigger mistake was leaving it to the browser writers to make the finer decisions regarding alignment, which almost guarantees incompatibilities. This is important now, but was a non-issue back in the Mosaic days.

In my opinion, the CSS model using DIVs is actually truer to the original HTML intention, only now instead of the browser rendering a relatively few tags the way it wants, we have a new language to tell that browser or device how we want it to be presented. I think CSS is arcane and extremely difficult to learn (could be that I'm too old), but I applaud the concept in principal. I'd hold the browser writers' feet to the fire to ensure CSS compliance by refusing to support browser-specific hacks, thus fewer people will use that browser, etc. Sooner or later, they'll get the message.

I agree that within a few years those who are not yet writing web code will only know the CSS model and wonder why it was ever any other way. They'll also be using WYSIWIG tools that don't force them to remember the CSS syntax, and will support a clear distinction between content and presentation without making a big deal out of it.

Very nicely said.

Hey Dorsey - one of the best arguements I have seen on the subject, well done.

We are in the process on taking an old HTML table based design (which also has Flash) http://dev.bg4b.com and doing the same design but using CSS/XHTML http://dev.bg4b.com.au/xhtmlized/ - we are much happier with the later. It's letting us seperate the .asp code better and it loading faster. CSS/XHTML is beautiful.