It’s been over ten years since I first started to build web sites. Ten years isn’t a long period of time, but when it comes to the Web and web browsers, much water has passed under the bridge in the last decade. I can remember when Netscape 4 and Internet Explorer 4 brought us exciting new ways to embellish our web pages. I can also remember, all too clearly, the pain of trying to support Netscape 4 as the rest of the Web moved on.
Our current situation with Internet Explorer 6 reminds me of those days of wanting to move forward and use CSS for layout while also trying to support the ailing Netscape 4. On the one hand, we know that there is still a significant number of users using Internet Explorer 6; on the other, we know how much more potential we could have, and how much easier our lives would be, if we weren’t forced to patch up our sites with alternate style sheets to cope with that dinosaur.
In this book, we take a good look at what’s just around the corner with the impending launch of Internet Explorer 8. The layout methods that I’ll demonstrate in this book aren’t new; they have been included in browsers such as Safari, Firefox, and Opera for a good while. However, the launch of Internet Explorer 8 will tip the balance in favor of these under-utilized techniques. Now is the perfect time to take stock of the current methods considered best practice for CSS layout, and determine how they can be improved upon.
Updating and refining the techniques we use to build web sites is part of the business of working on the Web, wherever you stand on the utility of CSS tables. This book is an opinionated book, written to inspire debate and experimentation in a time of change and development.
With the long-awaited launch of Internet Explorer 8 not far away, it is time for us all to rediscover CSS.
This is not your average book about CSS. This book is aimed at web designers and developers who:
-
need to work with CSS layouts—from those just beginning to those who possess a good working knowledge of CSS layout techniques
-
have a desire to stay ahead and keep their CSS knowledge fresh and relevant
-
want to explore the future possibilities provided by increasing levels of CSS compatibility in modern browsers
For these web professionals, this book should be required reading.
- Chapter 1: The Problem with CSS
-
Chapter 1 sets the scene for what will be a milestone for CSS compatibility in browsers: the arrival of Internet Explorer 8. Here, we explore the current problems with CSS layout techniques, as well as the mismatch between what designers want and what CSS provides.
- Chapter 2: CSS Table Layout
-
Chapter 2 is all about CSS layout techniques. We first explain the current techniques that use absolute positioning and floated elements, and the complexity involved in getting them to work reliably. We then introduce CSS tables, spend some time exploring how CSS tables work, and provide some examples of how easily they can be used to create a grid-based layout. This is the chapter that will put the final nail in the coffin of HTML table-based layouts.
- Chapter 3: CSS Table Solutions
-
In this chapter, we test the limits of what CSS tables can do, explore the edge cases, and deliver concrete solutions. After your initiation into the science of CSS tables, you will probably be bursting with those “But, how do I…” questions—this chapter seeks to answer them for you.
- Chapter 4: Considering Older Browsers
-
Is the use of CSS tables an unreachable Utopian dream? This chapter will convince you that CSS table-based layouts are ready for prime time by providing practical solutions for supporting IE6 and 7.
- Chapter 5: The Road Ahead
-
While CSS tables can be used today, what’s around the corner? CSS3 will provide a substantial increase in layout control, and this chapter is a preview of what’s to come. We take a detailed look at three CSS3 modules for layout control: the multi-column layout module, the grid-positioning module, and the template layout module.
Located at http://www.sitepoint.com/books/csswrong1/, the web site that supports this book will give you access to the following facilities:
As you progress through this book, you’ll note a number of references to the code archive. This is a downloadable ZIP archive that contains each and every line of example source code that’s printed in this book. If you want to cheat (or save yourself from carpal tunnel syndrome), go ahead and download the archive.
No book is perfect, and we expect that watchful readers will be able to spot at least one or two mistakes before the end of this one. The Errata page on the book’s web site (http://www.sitepoint.com/books/csswrong1/errata.php) will always have the latest information about known typographical and code errors.
If you’d like to communicate with us or anyone else on the SitePoint publishing team about this book, you should join SitePoint’s online community. The CSS forum, in particular, can offer an abundance of information beyond the solutions in this book.
In fact, you should join that community even if you don’t want to talk to us, because a lot of fun and experienced web designers and developers hang out there. It’s a good way to learn new stuff, get questions answered in a hurry, and just have fun.
In addition to books like this one, SitePoint publishes free email newsletters, including The SitePoint Tribune and The SitePoint Tech Times. Reading them will keep you up to date on the latest news, product releases, trends, tips, and techniques for all aspects of web development. Sign up to one or more SitePoint newsletters at http://www.sitepoint.com/newsletter/.
If you can’t find an answer through the forums, or if you wish to
contact us for any other reason, the best place to write to is
[email protected]. We have a well-staffed email support
system set up to track your inquiries, and if our support team members are
unable to answer your question, they’ll send it straight to us.
Suggestions for improvements, as well as notices of any mistakes you may
find, are especially welcome.
You’ll notice that we’ve used certain typographic and layout styles throughout this book to signify different types of information. Look out for the following items:
Code in this book will be displayed using a fixed-width font, like so:
<h1>A perfect summer's day</h1> <p>It was a lovely day for a walk in the park. The birds were singing and the kids were all back at school.</p>
If the code may be found in the book’s code archive, the name of the file will appear at the top of the program listing, like this:
If only part of the file is displayed, this is indicated by the word excerpt:
If additional code is to be inserted into an existing example, the new code will be displayed in bold:
function animate() {
new_variable = "Hello";
}
Also, where existing code is required for context, rather than repeat all the code, a … will be displayed:
function animate() {
…
return new_variable;
}
Some lines of code are intended to be entered on one line, but we’ve had to wrap them because of page constraints. A ↵ indicates a line break that exists for formatting purposes only, and should be ignored:
URL.open("http://www.sitepoint.com/blogs/2007/05/28/user-style-she
↵ets-come-of-age/");
Tip: Hey, You!
Tips will give you helpful little pointers.
Note: Ahem, Excuse Me …
Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information.
Important: Make Sure You Always …
… pay attention to these important points.
Warning: Watch Out!
Warnings will highlight any gotchas that are likely to trip you up along the way.
Thanks to the team at SitePoint, and particularly Kevin Yank for his contributions to this book. In the course of writing this book, I have become even more aware of how much we lowly web developers owe to those who write the specifications and build the browsers. So thanks to those unsung heroes, in particular the people within browser companies who really do understand web standards and work to produce the best browsers possible. Finally, as always, grateful thanks to my long-suffering family for enduring yet another book project.