SitePoint Tech
TimesFebruary 28th, 2008 
Issue 185 

Newsletter Archives | Advertising | Contact us  
Tips, Tricks, News and Reviews for Web Coders

In This Issue...

ektron
What do you want your website to do?

Ektron CMS400.NET gives you all the tools you need to create, deploy, and manage your Web site - all rolled into one application

  • Corporate Web Site: Put authoring in the hands of your subject matter experts
  • Intranet: support inter-departmental communication
  • Social Networking Platform: Make your site an online destination
  • Web 2.0 Toolbox: Make your site more interactive & engaging
  • Ektron Starter Sites: Build your site faster and smarter.
Version 7.5 now available! Watch an INSTANT DEMO or download a FREE TRIAL now

Top


Introduction

Kevin YankSince SitePoint published its first book seven years ago, I've dreamt of the day that we would publish the ultimate desk reference for Cascading Style Sheets. As a kid I collected atlases, and with The Ultimate CSS Reference, I now have the definitive atlas of the world of CSS.

The book is every bit as detailed and comprehensive as I imagined it could be. Each and every feature of CSS is explained in exhaustive detail, accompanied by complete browser compatibility information that goes well beyond mere compatibility tables, instead describing at length the particularities and bugs present in every major browser from IE 5.5 to Safari 3, Firefox 1.0 to Opera 9.2.

This book was a labour of love for everyone involved including myself. I spent two solid weeks working 18 hours a day, 7 days a week to write the code responsible for the internal design and layout of the book, and the finished product is worth every second.

Whether you design web sites on a daily basis or—like myself—you simply love the idea of owning a detailed atlas of the world of CSS, The Ultimate CSS Reference deserves a place on your desk.

Top


Table-Based Layout Is The Next Big Thing

The recently-launched SitePoint CSS Reference (and its print version, The Ultimate CSS Reference) contains extensive coverage of some of the more obscure areas of CSS. One such area that is going to become very important with the release of IE8 later this year is CSS tables.

For years now, enlightened designers who have embraced CSS layout have had to bend over backwards to produce complex designs that would have been trivial to produce using the HTML table-based layout techniques of the past.

The lengths to which designers must go to produce, say, a simple three-column layout using CSS techniques are so extreme that many web designers simply give up on CSS and resort to HTML tables for their layout. The Tech Times #142 and #143 were devoted to this issue.

With the release of IE8 coming this year, the stage is set for all that to change. IE8 will be the last of the major browsers to add support for CSS tables, which will enable designers to use table-based layout techniques without misusing HTML table markup.

To demonstrate this, I've produced the following 3-column page layout example using CSS tables:


View the example in your browser

This layout is hardly unique; what makes it special is how easily it has been achieved. Rather than using absolute positioning or fragile and counterintuitive floating techniques, I've produced it using relatively easy-to-understand CSS tables.

Each of the three columns in the layout is a <div> with a unique ID. From left to right they are "navigation", "content", and "sidebar". All three are contained within another <div> with ID "body".

The magic comes in using CSS to make these three unremarkable <div>s display as if they were cells in a table row. First, we set the containing <div> to display as a table:

#body {
  border-collapse: collapse;
  display: table;
  table-layout: fixed;
}

And then we set each of our three <div>s to display as a table cell, with the width we're after:

#navigation, #content, #sidebar {
  display: table-cell;
}
#navigation {
  width: 200px;
}
#content {
  width: 66%;
}
#sidebar {
  width: 33%;
}

With the addition of a few borders and background colors, as well as a little padding to give it that final polish, we've got ourselves a perfectly usable layout.

Not only is this code exceedingly simple, but the result is also far more robust than your typical three-column layout achieved with earlier CSS layout techniques. Each column extends the full height of the page no matter which column has the most content, and the layout doesn't fall apart at extreme font or window sizes. The layout just works—in the same way that HTML table-based layouts have always just worked.

As soon as IE8 is out and we can begin to justify leaving IE7 behind, we can start to use these simple and powerful techniques, since all other major browsers already support CSS tables. Suddenly, CSS-based page layout will be something almost anyone can understand!

Of course, we can’t just throw away current CSS layout techniques the day IE8 is released, can we? After all, IE7 and its predecessors will be around for years to come. If you want your site to look as good in those browsers, you’ll still have to break out the more complex and fragile layout techniques that work with them.

But if you can justify letting the experience slip just a little for users of IE7 and earlier, you may be able to minimize the amount of twisty CSS you need in your site. If you view the above example in IE7, for instance, you’ll see a simplified, two-column version of the layout that avoids the need to mix pixel-width columns with percentage-width columns, thus simplifying the code required to make the layout work in IE7 and earlier.

CSS tables will finally make page layout with CSS every bit as easy as the HTML table layout techniques of yesteryear. Barring support for older browsers, there will no longer be any excuse for designers choosing to abuse table markup for quick and easy layout work. And as shown in the above example, with a little extra planning, you should even be able to give a reasonable experience to users of older browsers while taking advantage of CSS tables in your layout.

Leave your comment on the blog entry:

kev JavaScript & CSS Blog: Stylish Scripting
by Kevin Yank

Table-Based Layout Is The Next Big Thing

Top


ColdFusion Hosting by ColdFusion Experts

HostMySite.com ColdFusion 8 Hosting. 2
months free. Click HereHostMySite.com’s ColdFusion hosting is trusted by many CF gurus: Forta, Corfield, Horwith, Buntel... and possibly YOU! Starting at $19.95 per month, HostMySite.com’s ColdFusion hosting plans give you the power of ColdFusion 8 for an affordable price!

  • 4-8 GB Hard Disk Storage
  • 240-360 GB Transfer
  • ASP.NET 2.0 & AJAX support
  • MS SQL Server 2005 with CF Builder +
  • Custom tag support
  • 24x7x365 expert ColdFusion technical support

Click Here For: 2 FREE months, FREE setup, & a FREE domain name!

Top


IE8 Version Targeting: Microsoft Considers Feedback

In the Tech Times #183 I covered Microsoft's plans to support browser version targeting in IE8, which will default to rendering a web page the same as in IE7 unless Microsoft's newly-proposed <meta> tag instructs the browser to render the page in the browser's new "super standards" mode.

Also as previously mentioned, these plans have ignited a debate within the web standards community. While some leaders like Eric Myer and Jeffrey Zeldman have come to embrace Microsoft's approach, many respected voices like Jeremy Keith continue to cry foul, particularly over Microsoft's plan to forever render HTML 4.x documents as they appear in IE7 unless they contain the new X-UA-Compatible <meta> tag.

Far from clear cut, the issue continues to divide the community, and Microsoft is listening intently. Just a week ago, members of the Web Standards Project (some of whom were involved in working with Microsoft to develop its browser version targeting plan) got together with Microsoft's Chris Wilson for a round-table discussion about the community's reaction to the company's plans for IE8, and some of the ideas that have been proposed to adjust those plans for the better.

The discussion is certainly worth a listen (or the transcript is worth a look) if you're interested in the debate, but it all comes down Chris Wilson's parting words:

"[...] we haven't seen anything that would protect our user experience as well as what we've come up with, but we're certainly trying to reduce the pain on web developers."

So, at least for the time being, it sounds like Microsoft is standing firm on its plans for the "IE7 by default" behaviour that has so many people so upset.

But it's not all bad news: the discussion did contain a few interesting tidbits that may hold some promise.

  • Aaron Gustafson made it clear that Internet Explorer's version targeting feature will apply to JavaScript just as much as it will to CSS, which is enabling Microsoft to make some long-overdue improvements to its JavaScript standards compliance.

    For example, Internet Explorer's implementation of document.getElementById has always selected elements by both the name and id attributes. Fixing this would completely break existing web applications that relied on Internet Explorer's nonstandard JavaScript behavior if it weren't for the planned version targeting feature.

  • According to Chris Wilson, the public beta of IE8 will include a feature that will let developers test the rendering of all sites in "super standards" mode. This will provide both developers and Microsoft the opportunity to gauge just how much breakage would be caused by IE8 defaulting to full standards mode.

  • Many incompatibilities that come with a new browser release, frustratingly, still just come down to the browser's user agent string. Consequently, Microsoft is looking at providing a user-accessible option that will make IE8 announce itself as IE7 in the user agent string.

The hope is that the IE8 beta will make it clearer than the IE7 beta did when a compatibility issue is a result of IE8's improved standards compliance. According to Wilson, many developers simply assumed that rendering issues with their sites in IE7 beta were bugs in the beta, and therefore didn't bother fixing them until after IE7 was released.

Is Microsoft doing the right thing? Let us know what you think by commenting on the blog post:

kev JavaScript & CSS Blog: Stylish Scripting
by Kevin Yank

IE8 Version Targeting: Microsoft Considers Feedback

Top


Have an excellent two weeks. I'm going back to reading my copy of The Ultimate CSS Reference!

Kevin Yank
techtimes@sitepoint.com
Editor, The SitePoint Tech Times

Top


Morae 2: Usability Re-Imagined. Morae Usability Testing for Software & Web Sites

  • See how people interact with sites & applications.
  • Automatically calculating usability measurements.
  • Look like a pro with informative graphs & videos.
  • Gauge user satisfaction with integrated surveys.

Click here to find out more

Top


Help Your Friends Out

People you care about can benefit from the wealth of information on new and maturing technologies available on the Internet. Help them learn how to do it by forwarding them this issue of the Tech Times!

Send this to a friend
 New Technical Articles

Get Specific with Your CSS Styles

Paul
O'Brien
By Paul O'Brien

Specificity is a word that's even more difficult to understand than it is to pronounce! But until you�ve mastered the concept, you�ll never really understand how your CSS style rules are being applied. In this article, Paul presents the facts about specificity clearly, so you can apply them to your own CSS today.

ColdFusion 8: Believe The Hype

Brian
Rinaldi
By Brian Rinaldi

ColdFusion 8 made a big splash when it was released -- it gave die-hard fans something to get excited about, and forced the naysayers to stand up and pay attention. Here, Brian talks us through the most useful features of this landmark release, and explains why you should take another look at ColdFusion.

 Techy Forum Threads
 More Techy Blog Entries

JavaScript & CSS Blog:
Stylish Scripting

Web Tech Blog:
Technically Speaking

ColdFusion Blog:
InFused

.NET Blog:
Daily Catch

Industry Links Blog:
SitePoint News Wire

Manage Your Subscription Here.

!You are currently subscribed as to the HTML edition of the Tech Times.


CHANGE your email address here

UNSUBSCRIBE from the Tech Times here.

SUBSCRIBE to the Tech Times here.

SWAP to the 'Text-Only' version of the Tech Times here.


SitePoint Pty. Ltd.
48 Cambridge St
Collingwood, VIC 3066
AUSTRALIA


Thanks for reading!

 © SitePoint 1998-2008. All Rights Reserved.

Back to the archives

Newsletter signup

Design, coding, community or marketing? Select the right newsletters right for your needs...