Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 

Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format



Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

HTML Tip:
Avoid Table Background Image Bugs

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
June 2000
Vol. 3, No. 6
 • HTML Tip
 • Usability Tip
 • Load Time Tip
  

If a colored table background looks great, won't an image background really make your table stand out? It might. Colors are relatively reliable across browsers, while browser incompatibility makes table background images more risky than they appear at first glance.

Internet Explorer fully supports background images in tables. Netscape Navigator displays them, but you could be unpleasantly surprised by the result.

A Table Background Image Primer

Developers frequently use colored table backgrounds to add visual impact and interest to Web pages. In forms, background colors that delineate text fields from input fields make the form easier to read and understand.

Of course, color is one way to attract attention, but pictures can be even more effective in enhancing the look and feel of your site. For instance, a site devoted to movies might use popcorn as a table background image.

Both Explorer and the Preview Release 1 of Netscape 6.0 fully support the use of background images if you use the inline style sheet attribute "STYLE". Keep in mind though, even when the full version of Netscape 6.0 is released, it will take years for most Netscape users to upgrade.

Sample Techniques For Background Images

Review the following techniques before you include a table background image on your Web page. Each one will display a background image - and each limits your options in different ways. Your choice should depend on your audience, their browsers, and the table's function.

  • Internet Explorer-specific code
  • Single cell tables
  • STYLE attribute

Internet Explorer-specific Code

At first glance, this is the obvious method. However, use it only if the vast majority of your visitors use Explorer (in a company Intranet, for example). In Netscape, your table display will be a mess. Yes, it will catch the eye - but for the wrong reason.

<TABLE BORDER="0" CELLSPACING="0" WIDTH="50%" 
    BACKGROUND="your_image.gif">
  • Explorer displays the image as you expect - a single background picture. NOTE: Explorer will tile the image if the width and height of your table exceeds the size of the image.
  • Netscape displays the image inside each separate field of the table. If your table definition includes 4 columns and 5 rows, then the same slice of your image will repeat 20 times (once in each field).
figure1
Internet Explorer
figure2
Netscape

The difference is striking.

The Single-Cell Table Option

You CAN work around the Netscape problem described above by creating a table with only one row and one column. However, without TD & TR tags, the browser decides how to display the table's content. The table background looks fine, but Explorer and Netscape rarely display the content consistently. If your table contains a lot of text or FORM elements, the unreliable display can make your layout look very confusing to visitors.

Note: The obvious solution at first seems to be nested tables: nest a multi-cell table inside a single-cell table that has a background image attached. Unfortunately, in Netscape, the nested table inherits the background image from the single-cell table and displays the image in each individual cell.

The STYLE Attribute Is A Better Option

There is a partial solution: use the STYLE attribute to include your table background image. The image will display perfectly in Explorer and Netscape 6.0 - without confusing Netscape versions 4.x and below.

STYLE is an inline style attribute that is tied to this specific TABLE element only. Browsers that don't recognize CSS commands will ignore it in the table and still display the rest of the page as you expect.

<TABLE BORDER="2" CELLSPACING="0" WIDTH="50%" 
   STYLE="background-image: 
     url('your_image.gif'); border: 
       2 ridge #800000">

The results:

  • Explorer displays the image and tiles it if the table is larger than the image.
  • Netscape 4.x and below ignores the image completely, but still displays the table contents as you have them defined.
  • Netscape 6.0 displays the image and tiles it if the table is larger than the image.

Consider Using Background Colors Instead

Table background colors are your most reliable option until the vast majority of your visitors use either Explorer or Netscape 6.0. Colors load more quickly and display more consistently across browsers. Base your decision on your site's design and expected audience - and remember to ALWAYS test your site in multiple browsers (and browser versions) before you post it!



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.