Forum Moderators: open
I'm reworking a website that someone else created, and have been banging my head against the wall a bit with it.
What happens is that the tables (that were laid out with images and rowspans) display fine in IE but not FireFox. FireFox puts a huge blank space between the first row of the page and the body content. The problem is that almost 25% of our users are using FireFox.
Can someone please suggest how I could go about fixing this?
Thank you,
Ian
[edited by: tedster at 1:48 am (utc) on June 24, 2008]
[edit reason] sorry, no urls [/edit]
From your description, it sounds like the classic quirks mode/standards mode troubles when images are placed in table cells. Check out the third post in this thread - [webmasterworld.com...]
If it is this issue, the problem is that IE gets it wrong when images are displayed inline within a table cell. Either of these CSS rules should fix it.
td img {
display:block;
}
...or
td img {
vertical-align: bottom;
}
[edited by: tedster at 8:40 pm (utc) on June 24, 2008]
I tried inserting the style in my code and the page looks wacked out that way, while FireFox still inserts a huge blank space before the "body content."
So, I don't think this is the problem.
It's like FireFox is ignoring one of the rowspans or something.. ?
W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]
Yes I did, and after moving the <td background> attribute and replacing it with inline styles for the images everything validates fine. However, it still displays the same.
Keep "boiling it down" until you hace a small section that illustrates the problem. And before you post, be sure to remove anything specific that would identify your particular site. Sometimes, just going through this exercise ias enough for you to spot the fix on your own.
There's more information in the thread LINKS and posting CODE [webmasterworld.com], which is always pinned to the top of this forum's index page.
Ok, I've stripped down the code enough to post but still enough to reproduce the problem. The code is below. Now IE and Firefox will display this code uniformly if I put " " in-between <TD> start and end tags where there is no text. So the code I'm pasting below I was able to fix in that way. But the actual page I'm working on has images in-between some of the <TD> tags and also, some of the <TD> tags have background images set with inline styles (style="background: #fff url(../images/nav/right-bg.gif) repeat;"). So even after putting " " in-between the <TD> start and end tags in the actual page the problem still exists. Any ideas?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Company Name</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="29" align="left" valign="top">header-left.jpg<br/>
left-1.gif</td>
<td width="191" rowspan="3" align="left" valign="top">header-logo-1.jpg<br />
nav-top.gif nav-mission.gif<br />
nav-articles.gif<br />
nav-book_nook.gif<br />
nav-digital_issue.gif<br />
nav-advertisers.gif<br />
nav-subscribe.gif<br />
nav-contact_us.gif<br />
nav-web_links.gif<br />
nav-home.gif<br />
nav-bottom.gif
</td>
<td width="549" align="left" valign="top">header-logo-2.jpg header-logo-3.gif<br />
header-2.gif header-3.gif<br />
header-5.jpg</td>
<td width="31" align="left" valign="top">header-right.jpg<br />
header-4-rt.gif</td>
</tr>
<tr>
<td width="29" rowspan="2" align="left" valign="top">left-3.gif left-4.gif</td>
<td width="549" rowspan="3" align="left" valign="top">Body</td>
<td width="31" align="left" valign="top"></td>
</tr>
<tr>
<td width="31" align="left" valign="top"></td>
</tr>
<tr>
<td align="left" valign="top"></td>
<td width="191" align="left" valign="top">Ads</td>
<td align="left" valign="top"></td>
</tr>
<tr>
<td width="29" align="left" valign="top"></td>
<td width="191" align="left" valign="top"> </td>
<td width="549" align="left" valign="top"> </td>
<td width="31" align="left" valign="top"></td>
</tr>
<tr>
<td width="29" align="left" valign="top">left-bottom-corner.gif</td>
<td width="191" align="left" valign="top"> </td>
<td width="549" align="left" valign="top"> </td>
<td width="31" align="left" valign="top">right-bottom-corner.gif</td>
</tr>
</table>
<p align="center" class="Address">• ©2006-2008 Company Name •</p></td>
</tr>
</table>
</body>
</html>
