Netscape and Internet Explorer handle line-breaks and the spaces between lines differently. In a nutshell, the later Netscape (and successor Mozilla) always "protects" the descender, while Internet Explorer does not. This can produce radically-different looking tables.
For the unitiated, a descener is that thing in lowercase letters like "g", "j", "q", and "y" that are drawn below the baseline of the letter. In printing, some other letters are also occassionally drawn with descenders, like the lower-case letter "f" when it is drawn like "ƒ" (also used as the symbol for "function" or "florin"), and the lower-case "f" also is generally rendered with a descender in italic (i.e., f).
The problem stems from how the <img> element is defined (conceptiually) by the user agent. In-line elements assume that decenders will exist, and therefore add raise the baseline to protect for them. Block elements simply put in a space following the element, with the baseline the bottom of the block. While this can be controlled to an extent through declaring a specific style (using sytle sheets) or through the DTD used, in the absence of a recognized DTD or of a specified style the browsers' default assumptions govern, which can be -- generally -- chaotic. For DTDs, problems occur with non-standard DTDs and with XHTML DTDs; for styles, the "display" property will impact how the table is drawn.
The problem is when the table looks like this (this is manufactured to "break" on all browsers)
| |
| |
| |
| |
when what you really want looks like this (using style sheets: this should display properly on all browsers)
| |
| |
| |
| |
and this (the same)
| |
| |
| |
| |
To get the latter two working examples to render properly in all browser environments on this page (which utilizes an XHTML DTD and validates), the following code was used:
<style type="text/css">
tr.decoration img {
display: block }
</style>
and then in the table
<tr class="img">
<style type="text/css">
td img.demo {
display: block }
</style>
and then in the table
<tr>
<td><img class="demo" ...
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
So this works.
These four examples demonstrate four typical values for the CSS "display" property (and these all differ radically between IE6, NS4/6/7, and Mozilla browsers):
block<style type="text/css">
td img.block { display:block }
</style>
|
inline<style type="text/css">
td img.inline { display:inline }
</style>
|
run-in<style type="text/css">
td img.run-in { display:run-in }
</style>
|
compact<style type="text/css">
td img.compact { display:compact }
</style>
|
||||||||||||||||||||||||||||||||||
Modifying each table in a page may not be practical. An alternate approach is to use a DTD that the browsers regocnizes and that triggers the desired table layout. The following examples each use a different (or no) DTD to demonstrate this probelm. Each utilizes the above graphic. The following code is used for the tables, which includes not style modifications for block display. Each example page validates as appropriate and should display properly on all IE platforms and on Netscape up to 4, but Netscape 6/7 and Mozilla will have various problems due to how the standard on descenders is interpreted:
<table border="0" cellpadding="0" cellspacing="0"
summary="This table is a demonstration table to show how protecting below the baseline can deform presentatins">
<tr>
<td><img src="gifs/A.gif" width="10" height="10" alt="descender demonstration graphic" /></td>
<td><img src="gifs/B.gif" width="10" height="10" alt="descender demonstration graphic" /></td>
</tr>
<tr>
<td><img src="gifs/B.gif" width="10" height="10" alt="descender demonstration graphic" /></td>
<td><img src="gifs/A.gif" width="10" height="10" alt="descender demonstration graphic" /></td>
</tr>
<tr>
<td><img src="gifs/A.gif" width="10" height="10" alt="descender demonstration graphic" /></td>
<td><img src="gifs/B.gif" width="10" height="10" alt="descender demonstration graphic" /></td>
</tr>
<tr>
<td><img src="gifs/B.gif" width="10" height="10" alt="descender demonstration graphic" /></td>
<td><img src="gifs/A.gif" width="10" height="10" alt="descender demonstration graphic" /></td>
</tr>
</table>
Two methods of a fix are provided here. One fix is based on DTDs, which is actually a work-around. In Netscape's words, it gets the browser into "quirks mode" and thus by a somewhat indirect approach generates the desired display. The second fix relies on style sheets, and is the direct means of obtaining the desired display. Both need to be done on all pages. Both will produce the desired result of not exploding tables, with no adverse side effects, in all environments. The DTD approach is easier for existing pages, as it is a single simple and obvious change, and would be a rapid fix. The latter is actually the technically correct change, and while it is far more invasive, it would be routine when generating new pages.
Reference: Netscape, DevEdge, Images, Tables, and Mysterious Gaps
|
Document: http://
Revised: |
