1. Home
  2. Forums Index
  3. Browser Side / Firefox Browser Usage and Support 11:41 am May 18, 2026

Forum Moderators: open

Message Too Old, No Replies

Firefox/IE Table Rendering Issue

Strange issue: IE displays correct, Firefox doesn't

         

MattHock

6:01 pm on Jun 16, 2005 (gmt 0)

10+ Year Member



As I said in the subject, IE and Firefox are rendering this very differently. There are a series of short <tr>s used for spacing in the code, and IE displays the correctly, but FF makes them far too tall. Compare in IE and FF - in IE, there is a small space between where the banners are supposed to be, and in FF, there's a big gap (spacer.gif and greyspacer.gif are just single-pixel images I was using for testing). I know this isn't the best way to format the page (I'd much rather use CSS, but I've got an odd requirement with this project that it work even if the browser doesn't support CSS *grumble*), hence the table abuse.

Any ideas? A stripped-down page and CSS are below. They both validate properly.

Page code:
<?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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title!</title>
<link rel="stylesheet" href="./inc/common.css" type="text/css" />
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" width="750">
<tr bgcolor="#000000"> <!-- Top Black Spacer -->
<td bgcolor="#000000" width="10"><img src="./images/spacer.gif" alt="" width="10" height="10" border="0" /></td>
<td bgcolor="#000000" width="730"><img src="./images/spacer.gif" alt="" width="730" height="10" border="0" /></td>
<td bgcolor="#000000" width="10"><img src="./images/spacer.gif" alt="" width="10" height="10" border="0" /></td>
</tr>
<tr> <!-- Top White Spacer -->
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" /></td>
<td width="730"><img src="./images/spacer.gif" alt="" width="730" height="10" border="0" /></td>
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" /></td>
</tr>
<tr> <!-- Local Banner -->
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
<td width="730"><img src="./images/greyspacer.gif" alt="" width="730" height="50" border="0" /></td>
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
</tr>
<tr> <!-- Banner/Content Spacer -->
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
<td width="730"><img src="./images/spacer.gif" alt="" width="730" height="5" border="0" /></td>
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
</tr>
<tr> <!-- Main Content -->
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
<td width="730"><p>Nothing to see here... (yet)</p></td>
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
</tr>
<tr> <!-- Content/Banner Spacer -->
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
<td width="730"><img src="./images/spacer.gif" alt="" width="730" height="5" border="0" /></td>
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
</tr>
<tr> <!-- Bottom Banner -->
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
<td width="730"><img src="./images/greyspacer.gif" alt="" width="730" height="50" border="0" /></td>
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
</tr>
<tr> <!-- Bottom White Spacer -->
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" /></td>
<td width="730"><img src="./images/spacer.gif" alt="" width="730" height="10" /></td>
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" /></td>
</tr>
<tr bgcolor="#000000"> <!-- Bottom Black Spacer -->
<td bgcolor="#000000" width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" /></td>
<td bgcolor="#000000" width="730"><img src="./images/spacer.gif" alt="" width="730" height="10" /></td>
<td bgcolor="#000000" width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" /></td>
</tr>
</table>
</body>
</html>

Contents of common.css:
BODY {
MARGIN: 0px;
BACKGROUND-COLOR: #000000;
FONT-SIZE: 11px;
COLOR: #000000;
FONT-FAMILY: Arial, Helvetica, sans-serif;
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}

coopersita

6:26 pm on Jun 16, 2005 (gmt 0)

10+ Year Member



FF doesn't really support height as an attribute. If you apply the height with css, it should work.

Another thing you can try (if you can't do it with css) is to set the font-size for those cells to 1px. (sometimes FF gives the default height of the font).

Sathallrin

6:32 pm on Jun 16, 2005 (gmt 0)

10+ Year Member



There are 2 main things that cause this. FF uses extra space around the <p> tag that IE doesn't. Plus your doctype usage causes FF to use Strict mode, while IE to use Quirks mode.

Here is your code without the <p> tag and the doctypes changed so both browsers use strict mode. FF and IE render this identically. (without the extra space) 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Title!</title>
<link rel="stylesheet" href="./inc/common.css" type="text/css" />
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" width="750">
<tr bgcolor="#000000"> <!-- Top Black Spacer -->
<td bgcolor="#000000" width="10"><img src="./images/spacer.gif" alt="" width="10" height="10" border="0" /></td>
<td bgcolor="#000000" width="730"><img src="./images/spacer.gif" alt="" width="730" height="10" border="0" /></td>
<td bgcolor="#000000" width="10"><img src="./images/spacer.gif" alt="" width="10" height="10" border="0" /></td>
</tr>
<tr> <!-- Top White Spacer -->
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" /></td>
<td width="730"><img src="./images/spacer.gif" alt="" width="730" height="10" border="0" /></td>
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" /></td>
</tr>
<tr> <!-- Local Banner -->
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
<td width="730"><img src="./images/greyspacer.gif" alt="" width="730" height="50" border="0" /></td>
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
</tr>
<tr> <!-- Banner/Content Spacer -->
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
<td width="730"><img src="./images/spacer.gif" alt="" width="730" height="5" border="0" /></td>
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
</tr>
<tr> <!-- Main Content -->
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
<td width="730">Nothing to see here... (yet)</td>
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
</tr>
<tr> <!-- Content/Banner Spacer -->
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
<td width="730"><img src="./images/spacer.gif" alt="" width="730" height="5" border="0" /></td>
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
</tr>
<tr> <!-- Bottom Banner -->
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
<td width="730"><img src="./images/greyspacer.gif" alt="" width="730" height="50" border="0" /></td>
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" border="0" /></td>
</tr>
<tr> <!-- Bottom White Spacer -->
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" /></td>
<td width="730"><img src="./images/spacer.gif" alt="" width="730" height="10" /></td>
<td width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" /></td>
</tr>
<tr bgcolor="#000000"> <!-- Bottom Black Spacer -->
<td bgcolor="#000000" width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" /></td>
<td bgcolor="#000000" width="730"><img src="./images/spacer.gif" alt="" width="730" height="10" /></td>
<td bgcolor="#000000" width="10"><img src="./images/spacer.gif" alt="" width="10" height="1" /></td>
</tr>
</table>
</body>
</html>

MattHock

6:53 pm on Jun 16, 2005 (gmt 0)

10+ Year Member



Thanks for the help! I've been trying to get this to work for hours - I tried the thing with setting the font down to one pixel, for example, in addition to a wide variety of combinations of CSS and HTML options, etc.

Is there anyplace that has a good reference for how to know what rendering mode a browser will be in at what time?

MattHock

7:02 pm on Jun 16, 2005 (gmt 0)

10+ Year Member



Yep, it was the incorrect slashes in the Doctype. I wonder why the validator didn't catch that, you'd think that's the sort of thing it would look for :)

Sathallrin

7:03 pm on Jun 16, 2005 (gmt 0)

10+ Year Member



Basically as far as strict mode vs quirks, it depends on the browser. The doctype layout I gave you puts all browsers in strict mode, and using no doctype puts all browsers in quirks mode.

If you get the web developer extension for firefox, it will tell you whether the page is rendering in strict or quirks under firefox.

tedster

7:48 pm on Jun 16, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Just want to chime in with a vocabulary note - there is no such thing as a "strict"mode - only "standards mode"

So it's quirks mode versus standards mode for rendering...
and strict DTD versus transitional DTD for mark-up

The two areas are certainly related, but not at all the same. For example, you can write transitional mark-up that is rendered in standards mode.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / Firefox Browser Usage and Support 11:41 am May 18, 2026