|
HTML Tip:
Cross-Browser Table Formatting
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
Be careful about ending a table cell with text formatting elements such as (no-break space), P, and BR. These elements can cause your table to be rendered incorrectly under older versions of Microsoft Internet Explorer.
If you use a table to control the layout of your Web page, then at some point you've probably used a text formatting element as the last thing in a table cell. This lets you add extra white space at the end of the cell.
For example, suppose you want to use a table to create an inset box to emphasize a point. You might use the code shown below:
1: <table width=100 cellspacing=0
cellpadding=0 border=0>
2: <tr>
3: <td bgcolor="black">
4:
5: </td>
6: </tr>
7: <tr>
8: <td>
9: <br>
10: <font size=5 face="arial">
11: This is an important point
12: </font>
13: <br><br>
14: </td>
15: </tr>
16: <tr>
17: <td bgcolor="black">
18:
19: </td>
20: </tr>
21: </table>
|
This code creates the inset box shown at right.
The key here is the use of the BR tag on lines 9 and 13. These tags force white space between the text and the black cells. If you didn't do this, your text will butt up against the black cells.
Unfortunately, this technique isn't 100% reliable because older browsers handle trailing format elements differently. If a BR tag is the last thing in a table cell, Netscape Navigator will always insert the break; many older versions of Internet Explorer ignore the break.
The picture to the left shows our table as rendered by MSIE Version 3.0. Notice that browser ignores the tags on line 13 of our code, so the black cell at the table bottom runs into our text.
This problem occurs in MSIE Version 3.0 and earlier, as well as some versions of MSIE 4.0. More recent versions of Internet Explorer changed the rendering engine to correct the problem.
How significant is this problem? Keep in mind that MSIE 3.0 currently makes up about 4% of the browser market. Even including the few versions of MSIE 4.0 that have this problem, the total number of browsers affected is probably less than 10% of the market.
So one approach is simply to ignore the problem. However, if you want your page to be fully compatible with older browsers, you might consider using a different approach. You could achieve the same formatting effect by using a transparent GIF or by setting the HEIGHT attribute for the TD element. Both of these approaches are compatible with the Version 3.0 browsers. Try these approaches and see how they work in your page.
Read our browser compatabilty tutorial to learn how to make your site compatible with all major browsers.
|
