Page Layout with CSS - Web Development and Design Foundations with XHTML - page 217

Disadvantages of Using CSS for Page Layout

If you review the screenshots of a site that uses CSS for page layout (Figures 6.1 and
6.2) you'll see a very obvious disadvantage. Visitors using older browsers will not expe-
rience your Web site in the same way as visitors using modern browsers. If you are
using tables for page layout, this is not an issue. Why then are developers beginning to
code mainstream Web sites using CSS for page layout? With good support of CSS by
modern browsers and the increasing use of modern browsers, the advantages of using
CSS to configure page layout usually outweigh the disadvantages. Of course, the target
audience of a Web site should be a deciding factor. For example, if your target audience
for an intranet site is a company that for some reason has standardized on Netscape 4.7
for the desktop, none of the advantages would be realized and it would be better to
design the site using tables for page layout. You'll also learn about a CSS page layout
technique in Chapter 8 that uses the CSS display property to configure a table-like layout,
but versions of Internet Explorer earlier than Internet Explorer 8 do not support this
technique. The projected (and eventually actual) target audience should be considered
when deciding on a page layout technique.

Even with the increased CSS support of modern browsers, there are still differences and
bugs in their implementation of the W3C Recommendations. This is a disadvantage for
Web developers, since coding and testing time is increased. Leading developers have cre-
ated Web sites that document and discuss these issues (see http://www.quirksmode.org
and http://www.positioniseverything.net). The CSS techniques in this chapter have been
tested with Internet Explorer 8, Opera 9.64, Firefox 3, Google Chrome 2.0, Safari for
Windows 3.2.3, and Safari for Mac 3.2.1.

Another potential disadvantage is the fact that experienced Web developers who are
adept at coding pages using XHTML tables for layout will see productivity drop tem-
porarily as they learn about CSS techniques and properties. Using CSS positioning is
different from configuring pages with XHTML tables. Time and practice are needed
when learning something new.

At this point you've seen some examples of using CSS for page layout and are aware of
the issues related to using this technology. The next section discusses the CSS Box
Model —a crucial building block of CSS positioning.

FAQ

Should XHTML tables never be used?

Many commercial Web sites still use XHTML tables for page layout. This is for a very good
reason—tables are widely supported by browsers. As a Web developer you will most likely
work on sites that use XHTML layout tables and you'll work with these in Chapter 8. However,
a growing trend is to configure pages using CSS (sometimes called table-less layout). This
does not mean that tables are bad, ineffective, or that they are never coded on Web sites that
use CSS for page layout. Even Web sites with so-called “table-less” layouts may include tables
to present information in a tabular manner or facilitate design of a small portion of the page.

6.2 The Box Model

Each element in a document is considered to be a rectangular box. As shown in Figure
6.4, this box consists of a content area surrounded by padding, a border, and margins.
This is known as the Box Model.