EZSingle - a note on HTML for best results

Previous  Top  Next

Most people will use the single image slices created by EZSingle by applying them to their web development software.
In these cases the web designer has little or no control over how the image is HTML coded as the background image.


However if you are a hand-coder, there are some other considerations to be aware of.


The following is a "Best Practice" method for using EZSingle images as background objects when you are hand coding. The goal here is to ensure maximum cross browser compatibility and consistent results.


Using the CSS STYLE attribute is the best option(see sample code below on this page).


When adding an image as the background for a <TABLE> you may be tempted to simply use code like this:

<TABLE BORDER="0" CELLSPACING="0" WIDTH="50%" BACKGROUND="your_image.gif">

You should avoid this practice and use the CSS STYLE attribute instead.


Internet Explorer would render the image above like you expect it to - one image as the background for the entire table.

However Netscape will NOT render the image as you expect.

Netscape displays the image inside each separate field of the table. If your table definition includes 4 columns and 5 rows, then the same image will repeat 20 times (once in each field).

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.


Using the CSS STYLE attribute

If you 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.

In this case, STYLE is an inline style attribute that is tied to this specific TABLE element only. Any 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'); ">


Using STYLE will ensure that:

·	Internet 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.