Everything is changing. This weekend, I read a very interesting book: "Everything You Know About CSS is Wrong". The book illustrates how, now that IE has passed the ACID 2 test, we can finally begin to build our websites the proper ways. Up until now, we've been forced to implement hacks to form the perfect layout - absolute positioning, precarious floats, etc. But that's all beginning to change! I'll show you how in twenty minutes.
CSS tables are so much easier to use that it's worth adopting them as soon as you possibly can.
-Kevin Yank
This tutorial will show you how you'll be building your layouts in the future. Actually, you should be using these methods right now! Rather than relying on floats and absolute positioning to build our layouts, we'll instead focus on utilizing css tables.
Step 1: Creating A Two-Column Layout the Current Way
Knowing that IE7 and below do not recognize the CSS table properties, we first need to build our incredibly simple site the "old" way. Paste in the following code into your "index.html" file.
<body>
<div id="wrap">
<div id="header">
<h1> My Header</h1>
</div><!--end header-->
<div id="main">
<ul id="nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div id="primaryContent"> -- dummy text-- </div>
</div><!--end main-->
<div id="footer">
<h1>My Footer</h1>
</div><!--end footer -->
</div><!--end wrap-->
</body>
There isn't too much that we need to go over. We've created the content for our two column layout. The navigation (#nav) will be floated to the left of the main content (#primaryContent). Let's go ahead and add some quick styling. I'm going to use background colors (ugly ones too!) so that you can easily determine where each div begins and ends.
Step 2: Adding the CSS
/* Just resetting a few elements */
h1, ul, li {
margin: 0; padding: 0; list-style: none;
}
p {
margin: 0; padding: .5em 0;
}
/* Main content styling */
#wrap {
width: 800px;
margin: auto;
}
#header, #footer {
background: red;
}
#nav {
background: gray;
width: 150px;
float: left;
}
#primaryContent {
background: yellow;
margin-left: 150px;
padding: 0 .5em;
}
We've set a width to our sidebar (#nav) of 150px and have floated it to the left. Rather than floating the primaryContent section as well, it would be better to simply add a left margin that is equal to the width of our sidebar. We'll also add a bit of padding to push the text away from the edges of the div.
#primaryContent {
background: yellow;
margin-left: 150px;
padding: 0 .5em;
}
You should end up with something similar to this:
Immediately (after the glare from those awful colors goes away) you'll see that the gray background in the sidebar isn't stretching to the bottom. This is because floated elements only take up as much space as is necessary.
One solution would be to hard-code a specific height, but this is a bad idea. What if the main content changes? You'll have to go back into your CSS file to adjust the height value again. So don't do that! Instead, the accepted solution is to create a background image and tile it vertically. This is referred to as creating faux columns" Simply move to Photoshop, create a 800x10 pixel canvas, and insert the appropriate colors. You know that the sidebar has a gray background and is 150 pixels wide, so simply use the marquee tool to the select that area, and fill it with gray. After you do the same for the awful yellow, you'll end up with this:
Save it into the root of your solution and call it "bg.png". We can now vertically tile this image, thus creating faux columns.
#main {
background: url(../bg.png) repeat-y;
}
Now, we've successfully created the illusion of equal columns.
Step 3: The New Way
So that wasn't all together too difficult! But it still required too much time to create something as simple as a two column layout. We even had to go into Photoshop to complete the look! This time, let's recreate the site using CSS tables. Don't worry, very little needs to change!
Keep reminding yourself, IE7 and below don't recognize CSS tables. So, at least for now, we still need to use the method that we performed above. Create a new stylesheet and call it "ie.css". Then copy and paste all of the CSS that we've written into this file. Now don't delete it from "default.css". We'll simply remove a few styles. We won't be implementing any hacks or floats to create our columns this time.
Remove the following styles from your "default.css" stylesheet.
/* Because we'll be using a "table" layout, we won't need to tile a background image! */
#main {
background: url(../bg.png) repeat-y;
}
/* No floats! */
#nav {
float: left;
}
/* No floats = no left margin. */
#primaryContent {
margin-left: 150px;
}
Implementing the CSS Tables
Now that you've removed the unnecessary styles, let's add some new ones! First, we need to create two columns within our "main" div: one for the navigation, and the other for the primary content. Let's set the display type of #main to be a table.
#main {
display: table;
}
Next, we should declare the #nav and #primaryContent elements to be table cells.
#nav, #primiaryContent {
display: table-cell;
}
Believe it or not, that's all that we need to do to create our column layout. We already set the width of the navigation to be 150px wide. The primaryContent div will simply fill the remaining space. Here is a snapshot of our layout using CSS tables.
It looks exactly the same! But we didn't use any floats or absolute positioning! However, as I said before, if we now view our site in IE, we'll see.
Though IE8 will display the site correctly, IE7 and below will not. To compensate, we need to include a conditional stylesheet. (That's why we saved the CSS from our original layout and placed it into "ie.css").
<!--[if lte IE 7]> <link href="css/ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
Now, all is well! Modern browsers will render the site using CSS tables, and IE will use the traditional float method.
The True Power
The true power comes into play when we make modifications. For example, let's imagine that, down the road, we decide to add a third column to our site. We can accomplish this in about thirty seconds.
Step 1: Add the Additional Markup
After the closing tag on the primaryContent div, add your new column.
.... </div><!--end primaryContent--> <div id="secondaryContent"> -- dummy text -- </div> ...
Step 2: CSS
Access your stylesheet and set the display property of secondaryContent to "table-cell". You'll also need to determine how wide it should be. In this case, I chose 90px.
#secondaryContent {
width: 90px;
display: table-cell;
background: orange;
}
That's it. No floats, no zeroing out margins, no browser inconsistencies.
You should start using this method today! The IE devs finally listened and gave us the tools that we need to build sites the way we want to build them. So, we must utilize these tools - even if it requires a bit more work for a couple of years. If you start today, you'll be ahead of the pack!
-
Everything You Know About CSS is Wrong
If you'd like to learn more about css tables, and other CSS 3 tricks, I highly recommend that you purchase Rachel and Kevin's book. It can be read in a day.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Nick December 3rd
Cool, but man, if IE7 and some other browsers don’t work with this, there is pretty much NO point in using it, until IE7 is at the same status IE6 is (i.e. most people are not even coding for it anymore).
( )h-a-r-v December 3rd
I usually don’t read webdev books, but I made an exception for this one, read two weeks ago and I don’t regret the hour spent on it. It presents a bright future a webdev as myself is looking forward to see.
( )Shane December 3rd
Things are certainly improving in the world of CSS/browser support – thanks for posting.
( )Gavin December 3rd
This is of course irrelevent because people still use IE6 and IE7! Then you have two sets of CSS you have to look after!
( )chris simpson December 3rd
im scared…
can you really imagine a world where you don’t hate IE?
Really?
it will be years and years before people even stop using IE6, so for them to update to a standards complient browser will be a fair way off yet… great book and article
( )insic December 3rd
glad to know this stuff. great article.
( )Mike December 3rd
It’s a nice idea but, judging by how slowly IE6 users have adopted IE7 it will literally be years before IE8 takes over. So we would have to build two versions of every site, one for IE7 users and one for everyone else, and charge clients accordingly. I’m sure they will love that.
It will be fun (and frustrating) to play with CSS tables but not really practical for commercial sites.
( )duellsy December 3rd
agree with Nick… as awesome as it is, if there needs to be fixes to cater for the current version of IE… that to me equals fail (for now anyway).
( )We still support IE6 at work which is why we aim to have as few ‘fixes’ as possible, and no cross browser fixes at all for current versions of browsers.
Cito December 3rd
It is not a revolution… I would rather to hear that IE6 had beed destroyed by Aliens and I must not compete with it any more. There are a lot of methods delivered to us by new CSS 3 standard, but until all of modern browsers support them there is nothing to say about…
( )Jayphen December 3rd
This does indeed depict a bright future ahead, but along with other articles & books advocating a similar approach of developing for standards-compliant browsers & then creating an alternate stylesheet for IE6/IE7, it is rarely suited to a professional environment. I will be doing this for my own personal projects & for intranet pages that I know will be viewed in Firefox, but for clients it’s just not really possible yet.
( )h-a-r-v December 3rd
#1 Nick: WRONG.
1) Most people ARE coding for IE6. Maybe some of your friend’s with their blogs don’t, but all the business sites simply have to be cross-browser to reach everyone. IE6 has still 20% of the world market, while IE7 has another 27% (according to W3 browser stats). That differs in various countries of course, but in overall you can’t just ignore 1/5 of people when you run a business site or a portal, or a web 2.0 service, whatever.
2) IE7 is going out of market faster than you think. Windows 7’s coming soon with great impact and ACID2 passing IE8 on board.
2-3 years and you won’t mention IE6/7 name anymore. Until then..
You can make your site fully CSS2 compliant, hack-free and future-ready at last with css tables flexible and logical grid while using standard tables for IE6/IE7 users instead, IF YOU CAN’T CONVERT THEM INTO THE BOX MODEL VIA CONDITIONAL COMMENTS (as the book suggests).
“Ze eVuL TableSss? Nooooo! Nevah! YOU’re such a n00b even thinking of using zem, you haven’t r34d on teh internetz ze’re eVuL? ” – you say.
Well..
1) Semantics problem: tables were meant to present tabular data, not design.
2) Accessibility problem: tables are not screen readers (blind people) friendly.
Apparently, the box model seemed to solve both issues in a cross-browser way (no wonder it gainded such popularity), WHICH DOESN’T CHANGE THE FACT that floats were not meant to be used as layout bricks just as tables weren’t meant to be used as layout grids. Display: table-cell property was in the end.
That’s why “All you know about css is wrong”.
Now, to prove why using standard tables for IE6/7 instead is ok: (again: IF YOU CAN’T CONVERT THEM INTO THE BOX MODEL VIA CONDITIONAL COMMENTS as the book suggests)
ad. 1) The semantics problem: That’s right. But.. Semantics are false idealism in today’s bad browsers reality. Otherwise go shout at Google for using dangerous and xhtml-cut-off IFRAMEs / EMBEDDED (not OBJECTs) and zero-accessibility-care Ajax. You think why they’re using both? ‘Cause it works! And that’s how you do it in this business. For what sake should they abandon that? What would they gain? Nothing, but some respect from semantics psychofans and a big loss in the market (i’m talking iframe mostly – maps, ads, etc.).
ad. 2) The accessibility problem: Unfortunatelly there are no serious and complete blind people browser stats. At least I haven’t seen any in past 10 years I’m in the business. We may only assume that because of their dissability they are much more aware of the browsers market and choose alternative browsers like Firefox and Opera more likely than an average PC user. I hate to say that but the rest, IF THERE’S NO OTHER OPTION (box model) will have to deal with the non-well-linearizing site UNTIL they upgrade. Hey, in the end they’re internet users just as me and you – if they use a 7 year old browser or refuse to make high-priority update that’s their problem. Sorry.
Soon I’ll be taking a big portal I’ve made into another level (next version) and I’ll use display: table-cell along with normal tables for IE6/IE7 for sure. Alternative box model will be impossible for such a big and complex structure, especially that there’s an advertisement model requiring layout partial / inner horizontal fluidity – impossible in IE6 without tables usage.
In next 2-3 years you’ll use it anyway so if you’re making a long-term project (not likely to change the whole code withing next few years or more) then READ THE BOOK, or if you know the issue well enough, just do the right thing.
Stop using “the great box model hack”.
( )h-a-r-v December 3rd
Cito: Yeah, the CSS3 “abc” model looks promising but that’s a distant future ahead.
( )James December 3rd
The book itself is probably not worth spending any money on – the title is misleading and they’ve only named it in that way to generate maximum sales. – Nothing wrong with this but like I said it’s misleading and takes advantage of the lack of confidence in newcomers to CSS/HTML. Plus there are no real benefits associated with using the methods demonstrated in this book. It’ll probably just take longer because, as you’ve suggested, one will have to create two versions of every layout!
They should’ve named the book, “Introduction to CSS tables”…
( )h-a-r-v December 3rd
“It’ll probably just take longer because, as you’ve suggested, one will have to create two versions of every layout!”
Or just browser-detect and replace proper DIVs with proper TABLEs/ TRs / TDs.
( )John December 3rd
Basically wanting to say “Ditto”. Sure, good information if you’re calendar says 2012.
( )Jeffrey Way December 3rd
Hey everyone.
I’m shocked to read some of your comments.
I understand that this may not be practical for huge business applications. But for smaller projects, you should be using this method. If not now – then definitely in the next year or so.
@James – No real benefits? Are you kidding? I can’t believe you would say such a thing.
I do agree that, to some extent, the book’s title is meant to get people interested. But, if you’re not building sites using css tables in 2010……
( )Kevin Quillen December 3rd
CSS Tables? That’s a joke right?
“Or just browser-detect and replace proper DIVs with proper TABLEs/ TRs / TDs.”
If that’s sarcasm, I love it.
( )tom December 3rd
my opinion… people will use ie6 and ie7 as long as the pages they use are developed for them. ie6 isnt going any where for a while and neither is ie7 because the people using them dont know any better. if the pages were to stop working because of their browser they would fix their browser. and just because there is a new windows doesnt mean that people will switch to ie8 any faster then they did to ie7 from 6…. so keep making your pages ie6 friendly for a while it isnt going anywhere fast
( )Jeffrey Way December 3rd
I can only assume that the readers who seem ambivalent simply haven’t played around with this new feature.
Do you realize how much this will speed up you your development time? Maybe not now, sure. It’ll actually increase because you have to create an additional stylesheet for IE7 and below. (For smaller projects, this is hardly a big deal.) But in a couple of years, it’ll save you sooooo much time.
( )yo December 3rd
So in fact, to stay compatible with the world, I’ve got to
* forget everything I know
* then Remember everything I know
It’s double task:
* one stylesheet with css-tables
* one traditional stylesheet for IE6-7 ( just 75% of overall navigators
So what’s the point of your article?
* Hey Hey, forget everything you know ‘coz i’ve discovered an old css property, and now conditional is the rule!
Conditional stylesheets are pain in the ass for large, complex website, that most developpers rather find other solutions insted of making conditional stylesheets
( )Lubes December 3rd
Look, its great that IE has finally caught up with the rest of the world — but their primary users have not.
I’ve stopped caring about IE6, unless I have to for a very good reason to care, but to think that IE8 is the dawn of some Golden Age for web design will only lead to disappointment as the user base will not be an IE8 majority until probably years from now — and years from now, who knows what CSS features are going to available to us that we will still NOT be able to implement fully without setting up separate style sheets for IE.
The browser wars, and IE’s 5 year stagnation hurt us a lot more than we realize, as it will continue to make things harder for years to come, I predict.
Screw this all, I’m going over to all-Flash
( )Lubes December 3rd
Oh and just as another note so I don’t sound like a miserable bitch as much — for personal and other appropriate projects, this all actually great.
I just wish it were the case across the board.
CSS tables is yay!
( )Craigsnedeker December 3rd
Wow, that’s great!!!!! I might use this!
( )h-a-r-v December 3rd
Kevin Quillen: Indeed, I am a sarcasm and black humor fan, irony as well, but not in this case – see my pretty long comment above? Learn what I mean and then we may discuss.
I’m an old-school designer who started before CSS1 was even there and I know all the benefits of table layout grid that box model simply can’t provide.
>> If for some reason it’s impossible to provide alternative stylesheet converting table-cell divs to floats <<, then I see no problem in using standard tables instead for IE6/7 users whose amount will start to decrease after IE8 and/or Windows 7 is released.
2-3 years from now there’ll be no one viewing your page using IE6/7 and you’ll be happy with your CSS2 compliant code without having to rewrite anything if ’cause you’ve already done it before (present time).
But before you reply, please, read the long comment of mine above, especially if you’re “born” in box model times.
( )Zarathustra December 3rd
Well what did they have to term them “tables” for ffs? Reminds me of the Java/Javascript debacle! “They are both tables, but don’t worry…ones a table the other one’s a table but not the same thing”.
“Grid” is a word too you know!
Anyway, once I heard those magic words “not supported in IE7″ I filed it under the “worry about it in a year and a half part of my brain”.
( )Javier Centeno December 3rd
Note to self: Come back to read this tutorial in 2011.
( )ryan j December 3rd
The only difference between css tables and the much-maligned layout tables is that the table structure will live in your CSS file, muddying up the relationship between style and content all over again.
it’s on a par with calling a class .blue_bold_text when it comes to completely missing the point.
personally i can’t wait to see people using inline-css-layout-tables. that will be the day i turn the pc off and pursue my dream to be rolled naked through broken glass, as it’ll irritate me less than the internet.
( )David P Crawford December 3rd
How much is sitepoint paying you guys to feature their book?
( )icomir December 3rd
Hey don`t you think that is way we get paid so much, if it was that easy everyone will do it. I can not imagine not fighting IE. It will take me a hell less time to maintain or create something and that means that somebody else will be doing noting therefore earning no money.
( )We should stop this before it even starts
Jeffrey Way December 3rd
What if no one jumped on the standards band-wagon because they knew that they’d have to create an additional stylesheet?
What if no one used Javascript because they’d also have to compensate for when it was turned off?
–
Though I agree that this may not be practical for anything more than personal and small sites for the next year or so, it’s still something that we should be reviewing!
–
By the way, there is a big difference between using CSS tables and HTML tables. HTML tables describe what the content is. If you’re using HTML tables for layout purposes, there can be many fallbacks – including a possible search engine hit.
CSS tables refer to how an element should look on the page. Very different.
( )Jeffrey Way December 3rd
@David – They’re paying us nothing. This article is about the concepts explained in the book. It’s not a review.
( )ryan j December 3rd
then css tables are not tables at all.
( )Mark Priestap December 3rd
I’m excited about the possibility of using this. The only question I have is related to the ordering of content. For example, if you need to have your center column above your left column in the HTML for SEO reasons, how would CSS tables treat that? Any insights would be apprecitated.
( )Jeff December 3rd
Wow, I am going to have to do some research on weather or not this is actually supposed to be used this way. My understanding of the CSS table model, was that it was an alternet to the box model to be used for tabular data, as a replacement for html tables specifically for screen readers. Doing this almost seem to me like saying we may as well go back to html table layouts.
I believe that this is why Microsoft decided to leave the support of this out in IE 6, 7. That the floats, and other positioning elements are supposed to be used for positioning.
Anyway, I could be wrong. This was just my understanding of the CSS table model initially.
( )Jeffrey Way December 3rd
@Jeff –
No that’s not right. Why would you not use HTML tables if you were displaying tabular data? That is exactly what they’re for.
When using CSS tables, we’re not changing our semantic markup. We’re not sending false information to screen readers. We’re only speaking about the visuals.
Keep in mind that you using floats and absolute positioning to create your layouts is somewhat of a hack. It’s not what they were initially intended to do.
( )h-a-r-v December 3rd
Mark Priestap: it’s in the book.
1) Columns order doesn’t really affect SEO at all or in a super little percent. – I felt that’s worth mentioning first. There was a research on that. I’d say it’s more important for screen readers but not even that, in fact.
2) display: table-header-group / -row-group / -footer-group solve the issue, if it matters to you.
( )James December 3rd
@Jeffrey, that “no real benefits” comment was a bit off mark. I don’t think I really meant it in that way. Sorry. I agree with you on the potential usefulness of the demonstrated methods but I have to say I’m against books like this, maybe it’s the title, maybe it’s the fact that it’s a Sitepoint book; I don’t know…
I guess my anger is compensating for the fact that I won’t be able to use these methods for another two/three years. As people have said older browsers still make up a relatively large proportion of used browsers so until such a time when this isn’t true, using CSS tables will probably end up slowing development down – maintaining multiple versions of sites (especially if only to cater for browser differences) will become a nightmare.
I agree with you on the fact that we need to keep the industry moving forward instead of immediately dismissing new and original ideas – In this out of all the industries of the world innovation is imperative!
( )h-a-r-v December 3rd
Jeff: as someone’s already mentioned it should be named as “css grid”, not “tables” – it brings the same behaviour but these are still divs intended to contain your design elements, not tabular data.
( )Alvaris Falcon December 3rd
Overall, I love the idea in this book and article, and it’s really cool. I can feel Jeffrey’s passion to share about something interesting for us.
Thanks for sharing from you all.
( )Jeff December 3rd
I know I am going to get flamed for this one, but on the whole IE6, IE7 debate. I feel that if your creating something large like a web based Line of business app, or SaaS. There is nothing wrong in telling people that they need to upgrade there browser, this might be because I come from a software design standpoint and we have always had system requirements. If I am developing an intranet or some app for a client. It is all about maintainability and ease of support. If it makes it easier There should be no problem in saying that they need to have the newest version of Firefox, opera, or even IE (but it is in beta now so I wouldn’t suggest that).
I would actually say, fact of matter is unless you give someone a reason to upgrade they wont. It also helps educating clients and end users.
That being said, if your developing the next amazon or ebay, were it is a come one come all use me, then I can see the issue, the don’t shop here unless you upgrade doesn’t really work.
But by all means if you developing somthing that is subscription based, or for a companies internal use. By all means make them upgrade. The rest of the web will end up loving you for it.
Anyway just my opinion.
( )Mark December 3rd
This is pretty interesting, but I’m still going to be developing with IE6 in mind. It’s mainly because many our of clients at work still want IE6-compatibility on their sites, especially the larger more well-known brands. Just think of a company like HP. Are they going to just stop supporting IE6 even though a new IE is out (or coming out)? Many people didn’t move to Vista, or downgraded from it to XP. XP comes with IE6 by default and many less computer-savvy people don’t know why IE6 is so bad.
It’s a pretty good idea to start to consider coding differently *when* and only when you’re no longer required to comply to IE6.
( )Mark Priestap December 3rd
Thanks h-a-r-v. That is helpful.
( )Jeffrey Way December 3rd
@h-a-r-v – You’re right. It really should be. It would cause much less confusion!
@James – I agree.
@Mark – Well in this scenario, you’d need to compensate for IE6 and IE7.
Though it would require more work, I’m merely stating that you can in fact use these methods today. You’ll just need to use conditional stylesheets – which most of use anyways.
–
Ultimately, whether you want to use these methods today or tomorrow – it doesn’t really matter. The article simply presents something that you should think about.
( )Jeff December 3rd
@h-a-r-v: Yes I see these still are divs, but they don’t need to be. I was just reading the CSS spec. And although they don’t truly specify there intended use (that I can tell). A CSS grid would have been a better implementation as grid are often considered as layout tools. However the CSS table model is a table complete with all of the borders, header, captions, footers, etc. that we see in the html tables. A layout grid would have only needed rows and columns. This is why i question what the actual intent of the spec really is.
An example would be how XAML handles grids (maybe not the best, but closer i think to a truer layout grid).
But in the end, I wasn’t really trying to argue, just that I had to go try to look up what the original intent of the spec actually is.
( )jason December 3rd
I am amazed at how much attention this is getting!! As for IE 6, I work for a LARGE school district in VA and ALL of our student/teacher computers have IE 6. That means any site not developed with at least some thought to IE 6 our students can’t use.
That being said this is a great article and something to think about. I can see this saving a lot of time in the future and I’ll try using it on some smaller projects, but i will also continue to develop for IE 6 & 7 along side of these “new” designs.
( )Robert December 3rd
So as of October IE7 commanded 26% of the market and IE6 20% according to W3. Until IE6 commands a much lower share I’d say ignoring it is a fools choice.
( )Jeff December 3rd
@Jason – Wow, my question is this. Are the sites that you develop intended for internal use only? Is the only thing holding you back the fact that student/teacher computers are running IE 6? Do you need IE (do you make use of active x controls)?
If designing this sites for the schools would be simpler, and easier to maintain if they had a different browser it should be able to sell the on upgrading. It’s should be all about ROI, ease of development an implementation. If the sites aren’t only internal, then scratch what I said. Or if they have stuff that requires IE (like active x).
I mean I guess this debate isn’t really on this topic of CSS table but more on the when to force end user to make a change. Fact of the matter is that at some point you need to force a change. Otherwise new technologies never get adopted. Flash is only prevalent know because some people decided hey this is cool, I am going to make the decision that people or going to have to install an add-on to browse my site. Now everybody has the flash player. No reason not to look at browsers in the same light.
( )Anthony Bruno December 3rd
Im actually a fan of this method. I would say that it would be beneficial to start doing stuff like this for best practice. I will also agree that it might not be the most efficient method due to IE support and what not.
With that said, developers should always be building with the future in mind while still supporting an older browser with graceful degradation.
Well done Jeffrey! I really enjoy reading your contributions to NETTUTS.
( )James Laws December 3rd
Let’s be honest. IE6 was released in 2001. It is going to be a long time before these browser versions disappear completely.
I actually wish all browsers would follow Google’s lead and push their updates to the user. At least then we would only have one browser per vendor and not half a dozen. Just my two cents.
( )GlobalHans December 3rd
Great article and will buy the book
would love to use some more “modern” ways of designing for modern browsers. For small sites it is doable to have double stylesheets. so i will go and experiment with my new site. We webdesigners have been fighting these crappy browsers for a long time and it is really nice to see a little light at the end of the tunnel.
As for the skeptics for small sites it doesn’t take much time to create 2 stylesheets i think. For larger sites maybe it is a bit to early but nice to experiment with so you are ready for the day that dealing with crappy browsers is over.
( )Steve December 3rd
What’s really crappy is that CSS layout tables weren’t included in CSS2 from the start.
( )Jeff December 3rd
@James – Very true, old browsers will be around for a while. Witch is why i like to try to force people to update, if it is possible. The Google push this is great. Any something I hope other browser really consider as well. Fact, of the matter is I believe that older version of safari, firefox, and opera will have problem rendering the css tables as well.
( )Nino December 3rd
Ok lets get this straight. You CANNOT get some people to update from IE6:
1.They don’t care
2.They think if it works its good enough
3.(The most popular one) They have NO idea what IE6 is, they just call it…the internet.
4.They’re forced to
We know about standards, browsers and how a website works…they just don’t care.
IE6 is not gonna die unless you have google to stop working for it with a huge florescent button saying CLICK ME.
( )Matias Niemela December 3rd
You are aware that you can automatically (without the margin-left property) set the right div to move itself to the side of the div.
#left { float:left; width:150px; }
#right { overflow:auto; padding:0 0.5em; }
#container { overflow:auto; } /* this makes sure that the div size adjusts to the float or the other element */
IE6 doesn’t like this, but you can always fix it by enabling hasLayout.
* html #right, * html #container { height:1px; overflow:visible; }
( )Sean December 3rd
1. Floats weren’t meant to position elements? Perhaps it wasn’t, but it works remarkably well. Computers weren’t meant to play games, but they do a great job at that also.
2. Display:table has one very annoying drawback. The table model completely ingores the position property. You want to absolutely position something inside a table cell, and you’re screwed.
3. You also CANNOT re-arrange the location of the columns. The table rows/columns will appear in the order they appear in the XHTML. That can be troublesome when source order matters, but you want something on the right side of the screen, or what have you.
Floats work just fine. Their not hard to understand.
It’s honestly not so hard to CSS a website in very short amount of time. And you don’t need to do weird background imagery like this post suggests, it’s not difficult to get faux-columns working.
( )mike December 3rd
I’m pretty baffled by the negativity in this thread, I see this as a great opportunity to be ahead of the learning curve. Tons of people are going to have the “screw it for the next couple years” attitude, so why not be ahead of the pack?
I rarely find sites that don’t use conditional stylesheets so I am pretty surprised that people would be throwing a fit about having to do one, since you probably already are anyhow.
I have to agree that the books title is a bit misleading but that’s basic marketing, and it clearly works because it seems to have received everyones attention.
And for those that think IE6 is dead and you don’t need to develop for it you are dead wrong, perhaps in some applications you can eliminate, but I personally know of companies that still use IE6 and they have strict policies about upgrading, they update company wide and they have rules/regulations on when to do it. There are plenty of people who still use it, who don’t know how “bad” it is because they aren’t web developers. And when 8 is released people are still going to use 6 and 7 because realistically not everyone upgrades right away. So developers are STILL going to have to develop for older browsers, which is most likely going to result in conditional stylesheets being used.
For me, like I said, I see this as a great opportunity to move ahead of the curve and learn something new that will without a doubt save hours of developing time in the future, yet everyone seems to only complain that it may cost them a couple hours today to make some changes to accommodate this new method. I don’t really get that….
( )Lubes December 3rd
Can everyone please just read Andy Clarke’s take on CSS tables, please?
http://forabeautifulweb.com/blog/about/are_css_tables_ready_for_prime_time/
@ Jeff, you said: “I know I am going to get flamed for this one, but on the whole IE6, IE7 debate. I feel that if your creating something large like a web based Line of business app, or SaaS. There is nothing wrong in telling people that they need to upgrade there browser”
YES EXACTLY!
People can’t upgrade if they don’t know they should for crying out loud! We’re so terrified to put in a little script that will prompt users to upgrade but huge websites like Hotmail do exactly this!
( )Jeffrey Way December 3rd
@Sean
In response to #2 – it definitely is a drawback. But I would hardly say that we’re screwed. If you wrap the set in a parent div, you can then set the positioning properly.
It adds an extra div – which isn’t ideal.
( )sean steezy December 3rd
well. after everyone cools down, I just want to say, I only code for the latest browsers. People should upgrade their stuff, it’s free after all.
I usually just put a little disclaimer, “This website will look stupid unless you have the latest version of Blah Blah and Blah. Download them here.”
Then you don’t have to worry if they have IE6 cuz you told them your site will look dumb with it and it becomes their problem.
easy.
( )Dice December 3rd
“2) IE7 is going out of market faster than you think. Windows 7’s coming soon with great impact and ACID2 passing IE8 on board.
2-3 years and you won’t mention IE6/7 name anymore. Until then..”
Vista has been out for almost 2 years and you don’t see IE6 disappearing all that fast. So that statement makes it invalid.
Nice tutorial, but I don’t think this is really practical.
( )Jeffrey Way December 3rd
Hey guys. I want to clarify one quick thing.
In no way am I suggesting that you should ignore IE6. That decision is entirely dependent upon your situation.
I’m actually suggesting that you implement these modern techniques, and then create an alternate stylesheet to make IE6 and IE7 happy.
( )Kevin May December 3rd
I think that anyone who is using anything below IE7 when IE8 comes out.. should just get a site with no css at all on it. Big pages of text, thats all they get.
( )Sean December 3rd
@Jeffrey
Granted, you could do that. But it’s less than ideal in a situation where you don’t have access to the markup. In a CMS I develop, I sometimes help the CSS coders to fix their template. But the XHTML is generated by the CMS, so we can’t go changing that around. I tried doing a table layout as a pet project, and it broke some stuff that I haven’t taken time to fix.
but my other points still stand. In my pet project, I couldnt throw the left column on the right real easily (or at all) like I can when everything is floated.
And I didn’t feel that it was much easier than floating everything anyways. Floats are so simple.
( )James December 3rd
@sean steezy, Is that because you can’t be bothered?
( )Chad December 3rd
Thanks for the article. I’m curious, where do all these web design blogs get their content (articles + beautiful pictures)??? I’m lost how each blog has unique articles with all these related pictures. I’ve tried Googling about this, got nothing much but generic article repo sites with no pictures.
( )mike December 3rd
@sean
I have to disagree with that completely, if you have clients that simply don’t care that is one thing, and they are losing potential visitors/customers as a result I’m sure, but to me that just sounds like the easy/lazy approach.
I would bet money if you had clients that were serious about their website being accessible you would get fired if their site looked like crap in a browser that is still used regularly.
Personally I don’t know of any developers who don’t test down to IE6, I’m sure there are plenty, but to me that is a very bad habit because even with IE8, people are still going to be using 6 & 7 which means that for at least a few more years people are going to have develop sites more multiple browser versions, I don’t see an end to that any time soon.
( )Brian K December 3rd
CSS Tables! I can see a huge benefit to this now and in the future. You people are nuts and are obviously stuck in a hole.
This is a wonderfully useful technology that will be featured in more books in the future because it will most likely simplify workflow.
How could you ignore saving time in the long run?
I don’t know about you, but Time=Money for me
If you will not consider this ‘method’ as a new technology than…. Leave the market now!
( )dfunkydog December 3rd
@nino
Maybe google should take you up on that, I’d like to see how fast ie6 would die if all the big websites including microsoft.com drop support for it.
( )sean steezy December 3rd
@james:
i wouldn’t freelance if I didn’t want to be bothered… it’s because I like the latest technology. I want to implement the latest technology on my websites. People who don’t update their browser prevent me from using the latest technology. They’re doing a dis-service to themselves and designers who want to make cool stuff cuz some dufus wants to disable scripts or something.
For that matter, if I were making something that needed to be accessible to everyone, then for sure I would make sure it’s at least compatible with the last browser version, or 2 versions back. I would not make a complex, high tech website compatible with an old browser. Those hours of coding are better spent elsewhere.
Geez, you could make a whole article about how much IE eats code and all the f–ed up stuff it does… standards. thats all i want…standards.
( )Jarod Taylor December 3rd
I spent 5 minutes reading the article.
I spent 30 minutes, with a bag of popcorn, reading the World War Web comments.
Good article. The reality of this is, use it if you want to and use it if you can, otherwise keep doing what you’re doing and keep all this in mind for future use.
( )Sean December 3rd
I reviewed this book a few weeks back on my blog.
Review: Everything You Know about CSS is Wrong.
Long story short, it’s overpriced and not practical.
( )Henry December 3rd
Great post, thank you
http://www.crea-t.net
( )Afe December 3rd
Wow, I’ve just started thinking about dropping support for IE6 and already I can see IE7 is going to be the next pain in the butt.
The CSS tables are pretty cool, and it would make my life a lot easier. What concerns me is that users will not adopt IE8 for another five years so we’ll be stuck doing conditional styles for another age. I really hope it’s only a couple of years as you say. I will experiment with this, but probably not adopt it just yet as the extra styling just creates more work.
( )Adam Hawkins December 3rd
I’ve also written about this on my blog (www.broadcastingadam.com), but using these techniques are so far away. It will most likely be 3-4 years before IE7 slowly moves away. By then hopefully CSS3 will be ready. Around and around we go!
( )Derek December 3rd
I ordered this book a few weeks back and was a little disappointed in it’s short length, but then again it really doesn’t need to be much longer.
I have the benefit of building a small app for my office where the majority of users are on the latest version of FireFox. I’ve been using the css table technique for my recent designs and it’s working out great!
( )Ben Carroll December 3rd
Hmmm yeah i’ll pass on this idea. I will continue to use what works and what i know. I have evolved beyond tables and no longer use them except for when i need to present data. I don’t care if the tables are css based or html based they don’t work for me 90% of the time.
As long as what I do looks the way I want in all browsers I am not changing. When browsers evolve I will.
( )secretmode December 3rd
Nothing is practical for now in this screencast. The solution creates extra problems which is not what anyone would recommend to try.
( )Jeff December 3rd
I still hold on to the stance ther is nothing worng with telling people they need to upgrade.
Anyway back on topic. I definitly like this, but I am still looking for information in the CSS spec that would point out that CSS Tables areintended for layout. Even if they work well, ther is no need for the headers, footers, and captions if the intent was layout. Those are all things traditionally used for tables the define tabular data.
Also, if the floats weren’t suppost to be used for positioning, what were they supposed to be used for. It seems to me the floating somthing to the right or left is exacly telling the item how to be positioned.
Also it seems kind of funny that if CSS tables were supposed to be used for positioning then the wouldn’t negate the position: attribute. I know you can overcome this, but adding extra divs just because is a workaround not somthing I suspect the authors of CSS intended.
( )Nick December 3rd
To some of the people who responded to my comment – I did not mean that nobody is coding for IE6 anymore, I just mean that it is debatable whether or not you should code for it or just tell the user they need to upgrade their browser.
That being said, maybe there should be some sort of web initiative that promotes ALL websites big and small to make a universal message for people on IE6. Right now, some sites will simply work with it, others will prompt you to get a new browser. It’d be nice if we all could decide on a way to go with this.
Also, I work at Geek Squad, and restore a lot of computers. Most XP recovery discs have IE6 on them. I know that if it wasn’t me doing the restore, the customer would just restore and stop, thinking IE6 was fine.
Meh.
( )Jeff December 3rd
@Nick – True about the XP restore. There are a lot of techs that want an update to the new browser to be in the criticle update list for this reason. AS for right now they just make the security update for whatever browser that is installed part of that list.
It would be great if there was something for older browsers like there is for HDTV. Hey people if you don’t correct your problem by this date don’t cry to us. That would be great, especially since there are security uses involved with using older browsers. Even if your using Firefox V1, or old Opera version.
( )Jarryd December 3rd
I personally would love to try to use this new way of creating website styles, but it will have to wait for smaller web sites, just because of the time it will take the understand the display attributes better and converting to them.
Nice to see such a large comment base!
( )Eneza December 3rd
I agree with James!!! Its more tedious to have another css file. About the title, its misleading and yes its totally for sales….. and there are still many users of IE6 and IE7 (IE6 sucks). It will be a matter of choice, the MAJORITY of users or IE8 users?
still the answer is FOR THE CLIENTS! hehehehehe
( )I like the comment more….. yay!
John Sanders December 3rd
Jeffery, thanks for the article.
I’m sure by the time you’re reading this comment you’re probably ready to shoot yourself in the head with these debates. However, keep something in mind. Not all IE6 users can upgrade. I worked for a very large telecom company, and when I left them in July 08, the standard browser was IE6 with practically no options to upgrade, nor was any other browser acceptable (Firefox, Opera, Safari). That’s over 1/4 million PC’s on IE6 from just one big company.
I like the idea of informing users that they’re using IE6 and offering links to upgrade, however that could be annoying if you’re a corporate user and you have no option to do so.
Ultimately, your approach will be dictated by your user base. There’s no right or wrong approach.
( )h-a-r-v December 3rd
Jeff: I’ve gone through the specs as well and I totally get your point, especially that they mention of using it as tables with tabular data in xml driven apps (no html tags). But ask yourself this:
1) What is the ‘display’ property of a div for? And what is a div for? – both for design purposes, of course. So it’s just another display property bringing particular behavior to divs – exact with normal tables (that’s why it’s called the same).
2) Who said that nowadays box model is the right way? No one but ourselves. There was a designer who found out it’s the best way at a time and everyone agreed. But is it in the specs? No. You won’t find me a single sentence from W3 that YOU SHOULD design using box model. What you’ll probably find is that you should do it in A VALID way (with newest markup) – that’s why they gave you a validator. You will also find that you should not use normal tables due to accessibility issues (screen readers confusion) + the fact that tables are intended to present tabular data only, which’s been out of speculation since the very beginning (what btw. affects search engines behavior in result).
3) Using table-cell display property:
a) does not any harm to screen readers
b) doesn’t harm your site in terms of SEO
c) passes all kinds of validation (including WCAG)
So.. Again, it’s up to us to decide whether this way is better just as we did years ago about the box model to replace html tables. With that decision we opened the door for another group of problems:
1) browsers imperfection in CSS2 interpretation which made us using tons of hacks ’til this day (not only IE.. Opera e.g. still doesn’t understand body background bottom property)
2) making design process harder and code bigger by replacing complete, logical and fluid grid with individual “puzzles” that needs to be placed and defined from zero one by one + bringing limitations (there are atleast few importan things you simply can’t do in box model no matter how hard you try).
That’s why css tables are revolutionary. They give you back the old good grid WITHOUT all the flaws that were reasons we abandoned it.
So.. no, it’s not in the specs, but on the other hand – it doesn’t break any rule, so it’s free to use without being told to.
The choice is yours.
Ps. If you need to be told the right way, you’ll have to wait for full css3 browsers support and use css3 grid positioning module:
http://www.w3.org/TR/css3-grid/
( )h-a-r-v December 3rd
Sorry for all the typos and grammar flaws, it’s kinda late
Goodnight.
( )h-a-r-v December 3rd
Oh.. and Dice: read more one Windows 7, read more on Vista market failure reasons, read more on IE7 slow implementation reasons, read more on XP still-popularity reasons, read more on IE8, get the goddamn big picture and then make comparisons ’cause the one you’ve made, my friend, is an epic fail.
( )Buzu December 3rd
When I first got the news letter from site point in which they introduced this book I thought “this is the most stupid thing I’ve read.”
I still think the same way, but I think it depends on many things. For example, if you use a lot of hacks to build websites (bad idea) then you’ll think this is great. It just depends on your developing habits.
I develop using no hacks, following the standards and recommendations the W3C gives us. I don’t think any hack is worth using. I rather stick to the browser capabilities, but again that’s just the way I develop.
( )Buzu December 3rd
BTW, everything I know is not wrong at all.
( )Jeffrey Way December 3rd
@John – I’ve never once suggested that you should make your IE6 users upgrade. I’ve mentioned that many times. So, I’m in total agreement with you.
This is exactly why I advocated the use of conditional stylesheets.
( )Jeffrey Way December 3rd
@h-a-r-v – Well said!
( )Andrew Larcombe December 3rd
@Lubes: “People can’t upgrade if they don’t know they should for crying out loud!”
Most of the 20% of IE6 users are corporates laptops/desktops using XP pre SP2. It’s not the users choice to upgrade or not. In one office I was in this very morning it was IE6 all the way – users (even up to Director level) can’t even install Firefox or Opera. You want to lose 20% of your viewers for dogmatic reasons, fine. I’d never be able to sell that to any of my clients though…
( )Raphael Caixeta December 3rd
Looks good, but until at least 70% of users upgrade to IE8, I don’t see why waste the time to build 2 versions of a website.
( )Jeff December 3rd
@h-a-r-v: Very good points. And i agree with most of them. I like the table model. But usually you can find information on what the spec was written for. In the end your absolutely right. But I would just hate to design up some websites with a CSS table layout and say this is standard and validates, then have the client talk to another design who trashes it and says that it was designed poorly. A table based layout will validate but when someone else looks at the code they will most likely trash it.
anyhow, this is great because you can get the table like ease of layout. but with the flexibility and pros of css. Also you markup can remain clean with tags that truly describe the element. Witch is all great.
I don’t don’t want it to come down on us from somewhere “hey guys, we never intended you to use CSS tables for layout purposes”. Thats all.
( )Jeff December 3rd
@h-a-r-v: CSS grid support is exactly what we need. I don’t know how I didn’t read up on the spec yet. thanks for that link.
( )Josh December 3rd
I actually think this is fascinating. I’ve never heard of CSS tables before, but by the looks of it, they can greatly speed up my development. I’m still a student at college, and think learning these techniques may give me an edge in the business world. Thanks!
( )icomir December 4th
I guess Microsoft made it very hard for us when making Windows XP so good. Most of the world(including me) do not want to upgrade to Vista and they just stay stuck with IE6. I completely agree with Jeff that we need to tell that user should upgrade(they can do it with even Windows XP) to a newer browser. Unless Windows 7 is something worth spending money for over XP(and Vista is not) i don`t see us out of that mess for a decade.
( )gasbag85 December 4th
Its unfortunate that a lot of the corporate places still use IE6 (20% of web browser base) and therefore view their sites we’re developing in it.
( )*html hack for the win.
abhijit December 4th
CSS3 has lots of promising stuff. One such is the border-radius property. It makes rounded corners so easy to achieve and the thing is that its supported in Firefox as well as Safari. I think the problem still is IE and Microsoft’s policies regarding it. Whenever we talk about browser inconsistencies we generally talk about IE’s lack of support towards some standard property.
( )h-a-r-v December 4th
Jeff: to build your own brand you need to know things for sure, have your own style and opinion, and consequently execute it – if someone else thrashes it, just tell your client he should be careful with choosing advisers
I believe you can sleep tight seeing how 10000% sure you wanna be, hehe.
I had enough “arguing” with such people. They never won. Unless the company president is an idiot, but I never worked with one. There was one compromise only, but that was not such an essential thing, but more of a detail they wanted against all standards (regarding printing). I agreed ’cause that was easy to do, didn’t break the contract and they had ( underline ) some ( / underline ) good arguments. One might say it worked for them despite being a VERY uncommon solution. Still, I’ve learned something new ’cause I had to figure out how to do it first before I accepted doing this, so it wasn’t that bad
Ok, I’ve gone off the track a little.
So anyway, don’t worry Jeff – css table model isn’t anything new, it’s in css2 from the very beginning. If they didn’t want it to be used for layout purposes they’d have already written that just as they did everywhere about html tables. I tried hard but couldn’t find anything about css table layout being e.g. inaccessible.
I only found one girl’s blog who complained about height property for css tables being not treaten as min-height by default. Women..
It’s plain and simple just as Wiki says:
“CSS also specifies a “table model” which allows the semantics of “tabular representation” to be applied: The “display: table” element. In this way the decision and definition for tables is tranfered from the HTML code over to CSS.[2] One reason this distinction is sometimes overlooked is because of the lack of support for the CSS table model up to, and including Internet Explorer 7; Internet Explorer 8 however does support the CSS table model.”
Breaking news: I find this guy speaking with common sense as well:
http://blog.ale-re.net/2007/10/css-21-and-tables.html
It’s my impression I’ve said enough in total on that matter. Lemme get back to work
( )Mike December 4th
I still think the reason why IE6 is around is because developers continue to provide hacks, fixes and workarounds to get site working in it.
Surely if we stopped supporting it so readily it would encourage [read 'force'] users to update to at least IE7 – ideally to Firefox, Opera, Safari or any of those other free browsers out there – consequently allowing them to view the latest methods of web development technologies, while being more secure and at the same time reducing the work for us and the amount of files on our FTP servers just to combat these inconsistencies that have been around for years.
Just goes to show that the web is not that ‘fast moving’ as some say it is in my opinion.
Before I get flamed as to why people don’t upgrade IE6 – I am aware that there are organizations that can’t just do an ‘update’ and all being well, systems needing to be rewritten etc, then shouldn’t they have kept up with this over the years?
I’ll also point out that downloading and installing a free piece of software and keeping it up to date [particularly with the seemingly standard practice of having an auto update feature built in], is not a trial to achieve.
IE6 is outdated by several years – people buy / upgrade their mobile phones and cars more than this – usually at great expense. So why they complain about things not working in IE6, in my opinion is their own fault…
I can argue on more points but I’ll leave it at that for now…
( )ryan j December 4th
now i’ve had the chance to have a proper play with css tables, i can honestly say they’re okayish.
they’re blatantly primarily intended for displaying tabular data, just like good old fashioned html table tags, and far from being an entirely new concept in webdesign they’re just a quick way of assembling a table.
they’re also shifting structrual markup into the css, which isn’t just pandering to the blogging-amateur-webdevs mentioned all over the place here – at the most simplistic level it means you need the css to make any sense of the html, which isn’t a good thing.
That said, there are some very interesting possibilities here…
i’ve been having a play with class-switching css table elements and i’ve been able to produce some very interesting results. it made me remember how cool i though ye-olde Suckerfish Dropdowns were when i first saw them!
it also makes properly dynamic tables a viable option without resorting to mind-numbingly dull/complex node transversal. don’t underestimate how useful this could be in a rich webapp.
think in terms of different media-specific style sheets too. since your HTML doesn’t have a dirty great table stuck in the middle of it, you can choose who gets the table, or even completely flip your beautiful static non-table layout down into a mobile device specific mini-table for users on the move.
so, css tables: breaking all the rules, but doing it in interesting new ways.
thinking outside the box(model) isn’t a bad thing, but don’t make the mistake of assuming these tables are just going to be The New Layout Table – thats for the hard of thinking, and isn’t really taking advantage of css tables benefits over layout tables,
here in the office we’re already starting to Prototype (har har) up some awesome bits and pieces. You should to.
disclaimer: layout tables will always suck on some level.
( )kepenk December 4th
good ads about sitepoint book
…
( )CK December 4th
Isn’t it possible to make this simpler, by only including what’s different in the ie.css?
Maybe I’m misunderstanding something here.
However, if this is possible, then it allows a designer to change the default.css to fine-tune colors etc. without needing to do much, if anything, to the ie.css.
LIKE THIS:
/* Main content styling
* Just the stuff that’s not in default – CK adpated
*/
#main
{
background: url(../bg.png) repeat-y;
}
#nav
{
float: left;
}
#primaryContent
( ){
margin-left: 150px;
}
Jeffrey Way December 4th
@CK – Yep. That’s exactly what you should do. I spoke about that in the screencast. Only move the unique differences into ie.css. I just did it this way to expedite things – and because it’s a super simple example.
( )jason December 4th
@ Jeff sorry I didn’t get back to you sooner… I am a technology integrator for the school system… that means I train the teachers how to use their computers to better engage and teach the students. I do this by modeling lessons and through staff development. I do not develop for the school system on a large scale. That being said as of right now the people who make tech decisions here have chosen not to upgrade the county yet. I think that they will roll out IE 7 next year.
All of our internal web apps are IE only though.
I read this BLOG b/c i freelance too NOT ON SCHOOL TIME… and I use information that i learn on all the TUTS sites to further my education as well as to find solutions to problems that confound some of the art and design teachers here in the county.
As for forcing someone to upgrade… I don’t know if you can do that. I thought about dropping support for IE6 on my last project and decided that it would not be a good idea as the target audience was largely people over 50. I think that as a developer/designer/trainer I have to consider the audience that the target is geared toward and their technology savvy. In education we often give our students the tools and the knowledge but in the end it is up to them to put them together to really learn.
( )Benjamin Schulz December 4th
Well for the future i think this is awesome, but for now i hate using extra css just for the IE family, i count them as “hacks” and prefer to ignore hacks absolute. for example, even if you can add a new column for all other browsers easily, you still have the headache with the IE, so in the end you won nothing.
( )Sean December 4th
Perhaps 20% of IE6 users can’t upgrade because of their corporation.. That sucks. But you what doesn’t help them? Continuing to serve web-sites to IE6. If it was practically impossible for a user to keep IE6, the corporation would be required to upgrade everything.
They stay behind because they can. Developers (mostly out of fear of our clients) let them.
( )Taylor Satula December 4th
Yay for bad color schemes.!!!
( )Good tut i jus glased over it but it looked good
Steve December 4th
I bought that book a couple weeks ago. I love Sitepoint’s books. IE8 sounds promising, but the slow adoption rate will continue to make us have to put off this kinda stuff for a few more years.
( )Ignas December 4th
people do not use IE, save the life of designers
( )Mr. Magic December 4th
Only if this site’s PHP articles quality was as good as the CSS article’s quality is. Good work on this one.
( )gordon December 5th
U read too many books
and whats worse u get too excited about its content.
IE 8 will be popular in few years. Now people still using IE6 and IE7. Because IE 8 is coming soon it doesnt mean that we will be able to use css tables in near future
I bet that in 2 years there will be still more users of IE6 and IE7 than IE8.
( )Lubes December 5th
@ Andrew, you said:
” Most of the 20% of IE6 users are corporates laptops/desktops using XP pre SP2. It’s not the users choice to upgrade or not. In one office I was in this very morning it was IE6 all the way – users (even up to Director level) can’t even install Firefox or Opera. You want to lose 20% of your viewers for dogmatic reasons, fine. I’d never be able to sell that to any of my clients though…”
I should perhaps clarify what I meant by not supporting IE6: I do not employ hacks or tear my hair out of my head to get a site to look great in IE6. The content will still be accessible and coherent but it will not necessarily “wow” anyone. A user visiting one of my sites will get a message letting them now that they are using an outdated piece of equipment, that they need to upgrade to the latest version or download Firefox if they can’t upgrade their version, and that they are welcome to continue on to the site but that it may not look exactly right.
And that’s it. HUGE corporate websites do this, so can I.
I do not block anyone or force them to upgrade before continuing. But I make them aware and I feel it’s my responsibility to do so.
Our problem is that technology advances more rapidly than the populace, and this will always be the problem; but, instead of succumbing, or catering the lowest common denominator, we can do our parts as developers and designers to educate and inform.
( )Lubes December 5th
And while I’m on my soap box — 20% is not across the board for every site or every business or every person.
Understand your demographic, understand what statistics mean, but do not be blindly led by them or just accept them without your own input or voice.
( )Buzu December 5th
We need to continue providing support for IE 6 Why? Just because behind every IE6 is a potential client. It’s not about forcing people to change their browser, but about educating them so that they can make the decision themselves. Avoiding the use of hacks is just as good as avoiding the use of technology that is not a standard yet (ie CSS3) as well as technology that despite being a standard is not well implemented or adopted.
Gordon said:
“U read too many books
and whats worse u get too excited about its content.”
I totally agree.
Some companies were once a good source, but now are just a shame. I read some of the good sitepoint’s books, but I think their latest books are just bad. They might just want to have something new to sell. Hopefully their next title is worth buying it.
( )Nick J. Fessel December 6th
Can someone please explain why we always have to make exceptions for the Internet Explorer browser? Why doesn’t it just work! We shouldn’t have to wait for some “Acid” test; browsers should just render (X)HTML properly. What is so difficult about this?
( )Anto December 7th
So if i wanted to add another box in the nav, how?
I try doing the same div right below it like.
1234
1234
I added a margin-bottom to the nav, and it wont break it up..it appers beside it.. any idea’s ?
( )ryan j December 8th
@nick j fessel
because lots of people use internet explorer?
sites shouldn’t be telling people to change to XYZ-browser to view them properly, they should just work. a web designers job is more than making alpha-transparency gradients in photoshop all day.
@Lubes
if you roll out an intranet you might – MIGHT – persuade the IT dept to push IE7 out six months to a year after it worked its way into auto-update. You will never in a million years persuade a large corporate to roll out IE8, no matter how well it renders Acid2.
it’s inevitably part of the spec that they use XYZ-browser 1.0, and the rollout of XYZ-browser 2.0 is road-mapped for six months time. they will want it to render perfectly in 1.0, then render perfectly in 2.0 – if you tell the project manager you want them to change their browsers across the company so your three-column layout aligns properly they will just tell you to make it work.
Even with public-facing sites, every corporate website i’ve worked on has explicitly targeted the browsers that represent the largest visitor demographic (that’d be IE6 + 7 these days. count yourself lucky ie 5.x no longer represents a sizable proportion of web users!) as much higher priority than a handful of Safari visitors. The only standards compliance they give a sh*t about is the WAI stuff on the off-chance somebody tries to sue them.
making beautiful sites that work perfectly in every browser is the goal, making sites that meet the client’s spec is the priority.
( )Takumi86 December 8th
Why IE 7 and below can’t showing this script correctly? though i’m glad that you’d out the code for IE 7 but still wondering why
( )ryan j December 9th
@Takumi86
Because ie6 and lower don’t support CSS2, which is the spec that sets out the css table functionality. The “display:table-cell” attribute would be ignored because they would not recognize the value of “table-cell”.
However they would see the HTML, so unless you provide alternative CSS attributes it can recognize (failure cascade?
) or hide the table’s HTML it won’t display as a table.
( )BubbaHoTep December 9th
Time for a coalition of small site owners to stop supporting <IE8.
Sure it sounds crazy, but revolutions are revolutions. If users of IE6 and IE7 begin hitting site after site that pop up a message saying you can not view this site unless you upgrade your browser to IE8 or use FF then we could start a wave.
Just imagine the possibility.
yeah I know… It’s like clapping with 1 hand.
So, we will carry on with the wave instead of taking control.
So stop your bitching, and constantly wanting some one else to make a change.
Besides, this is all for IE anyways. Because Microsoft decided to be idiots, they are now loosing in the Browser war… well almost. So while we all suffer, perhaps Microsoft suffers the most. And they should. They should die, they should go to hell and die.
( )Adam December 12th
Good luck waiting for another 12 years for IE8 to become the standard.
( )Adam December 12th
This was a great tutorial and although very cool, its obvious that flash is the future of the web. One word, “consistency”.
( )Marios Sotiriou December 14th
Could someone make an example using this technic in an unordered horizontal menu?
( )freddy December 14th
The title of this book itself is irresponsible, inaccurate, and a blatant attempt to get attention. I’d even go as far to say it’s childish, even if the subject matter is interesting.
I’ve been coding static sites, RIAs, blogs, etc for a while now and have never had to worry too much about IE when it comes to CSS or display issues (knock on wood). I don’t need this recommended technique and using tables for layout simply because it’s valid CSS isn’t good enough. No offense to proponents of this, but it’s the lazy way out.
( )husien December 31st
good tutorial man !! thanks
( )RealToughCookie January 5th
This is awesome!
i don’t seen no reason why developers can’t start using this technique straight away, IE will just have to make do with a regular faux image for now.
Im fed up of holding back for IE to be honest, if a better technique is available i will be dammed if im waiting years for IE to sort itself out.
( )Dennis February 1st
I agree, we should be using css tables for our layouts while still using floats, margins, etc. for IE (for now…. you live for now IE). When Windows 7 and IE8 is released; screw IE7 and below. We need to force users to upgrade. We need to push the web forward, for our sake, for our user’s sake, and for the whole god-damned internet’s sake!
( )Anraiki February 1st
Even if IE8 passed the Acid Test, I will still hate it. Simply because in the “past” it still won’t pass it :\
1. MSIE 7.x 24281645 (42%)
2. MSIE 6.x 19726981 (34%)
3. FireFox 10038015 (17%)
I don’t see Ie8 gaining a large margin over firefox, and the audience for ie6 + ie7 is not going to vanish over night.
Until Ie11 or Ie12 comes out, I still HATE IT
( )Damien van Holten February 5th
Wouldn’t this be semantically incorrect the same way using tables for visual layouts would be incorrect? We should use tables to display tabular date and nothing else. Even if we do it from the CSS.
Following that the question arises: why use CSS tables at all? What’s wrong with actual HTML tables (for tabular data)?
( )Jeffrey Way February 5th
@Damien – No, it wouldn’t. You’re confusing HTML and CSS tables. When we refer to CSS tables, we’re merely referring to the look.
To answer your second question, you should use HTML tables for tabular data.
( )Aaron February 20th
ISSUE 1:
I think what’s confusing everyone is the term “CSS tables”. The word tables is right there, and tables are for tabular data. But what CSS tables are is basically saying “display this element *like* a table”, not that it is a table, just acts like one. I think that’s totally the wrong naming convention to use. What if it was “grid” as was suggested, which is what designers could easily associate with layout structure?
display: table; = display: grid;
and
display: table-cell; = display: grid-cell (or grid-block)
If it were named this way, there’s be a lot less confusion. But as far as the usage of the CSS table attribute goes, it will be VERY useful once the majority of users have browsers to support it.
ISSUE 2:
It will be years before the majority of users’ browsers will support its usage. Those saying that the Windows 7 roll-out will help get IE8 out there in large percentages are missing something. The amount of IE6 and 7 users won’t decrease as much as we would like because many machines out there won’t be capable of running Vista or Windows 7 even if they wanted to. Hardware purchases are much less frequent for the “average” user in comparison to us designers/developers. Add in all the businesses that are stretching out the lives of their old PCs to save on expenditures, and it’ll be a while friends. So again it will come down to specific sites and their user statistics determining what we can do.
( )Joe Schmoe July 2nd
Can’t say its not interesting, but why do i need to pay $9/p month to get teased by a book review ?
( )InsiteFX September 15th
First off I want to say this, It’s your choice to decide what to do about the older browser.
I am running IE8 and have always use IE, And if you think that Jeffery is wrong think again. I have a 3 column layout useing javascript that will resize to different widths and change to 2 columns right or left header footer menu bar etc all using css tables.
If you read the book as qouted it’s up to us make the change now that microsoft has.
All my systems are running XP Vista etc and all are running IE8.
All you have to is make a comment on your site stating that if you want to get the most out of this site you will need to upgrade your browser to one of the new ones.
And if you have not worked with the css tables then you do not know what your missing.
Build your css table layout and then copy all your ie6 7 stuff over to it not hard to do.
But remember us as web designers have to make the changes no else will do it for us.
All new browsers support css2 so there is no reason not to start making the changes, but it is up to all of us to do are part.
Oh and Jeffery great aricles on CodeIgniter thank you.
InsiteFX
( )Chey November 19th
Man I like Your Article very much, heard it about four times in a loop.
To me You described the whole problem confusing people anywhere
on the planet, in just some nice words and even a very cool pronounciation.
… Please do more tutorials, maybe sell them but stay doing them
I like Your words ” Let´s change a few things.” … “… a couple of lines”
“there is a big differnce” Anyone Who wants to know an easy way-out
of the confusing browser trouble should watch or just listen to this article.
Chey
( )