To see how prevalent the use of this kind of spacer image is now, follow
these steps:
- Open Internet Explorer, type msn in the Address field, and press
Ctrl+Enter.
Internet Explorer fills in the http://www. and .com and other necessary redun-
dancies (as if you were looking for this in some other location than the
World Wide Web, and as if it didn’t have a com extension).
You go to the msn.com site.
- Choose View➪Source.
Notepad opens, displaying the source code for the MSN Web page.
- In Notepad, choose Edit➪Find.
The Find dialog box opens.
- Search for c.gif.
- Press F3 repeatedly and notice how many times you find this graphic
referenced.
You’re likely to find quite a few references to this image (although the
width and height are variable):
<img src=”http://hp.msn.com/c/home/c.gif” width=”25”
height=”20” />
By changing this image’s width and height, you can create space. You’ll find it
inside table elements, too. Lotsa times.
Or look at the source code for other sites such as http://www.cnn.com, where you
are likely to find mystery .gif files that have no visible content (but do have
widthand heightattributes). They’re often located inside tables, as you’ll
see. I found an interesting one named px.gif.
Before I get into how CSS enables you to design pages without using tables as
a backbone, first consider the table-layoutproperty, a feature that CSS
brings to actual tables. By actual tables, I mean tables that behave like tradi-
tional tables: displaying information to the user in tabular format, as opposed
to tables hiding behind the layout of the Web page, merely providing the
framework upon which you hang your page’s visible content.
Employing the table-layout property .............................................
The CSS table-layoutproperty allows you to specify whether your table
cells should expand to display their entire contents, or remained fixed. The
default value is auto, which means that the browser is burdened with the job
214 Part III: Adding Artistry: Design and Composition with CSS