Site looks fine in Firefox, has unneccessary spaces in IE

[tillerna]

Hi all,

I was wondering if some of you could take a look at my source at http://www.tealriver.com and figure out why it looks terrific in Firefox, but has spaces in Internet Explorer? I figure it might have something to do with some CSS, or the "leer.gif", but I'm not too sure.

It has something to do with the way the browsers assemble the pages, I'm assuming, but this is driving me up a wall. Any help will be greatly appreciated.

Thanks!

[spirelli]

<tr><td valign="top" colspan="2">
<table height="115" width="100%" align="left" valign="top" background="img/background/bgheader.jpg" cellspacing="0" cellpadding="0">

<tr><td valign="top" align="left"><a href="http://www.tealriver.com"><img src="img/background/tealriverheader.jpg" border="0" alt="Teal River. Media for your imagination."></a>
</td></tr>
</table>
</td></tr>
<tr valign="top" align="left"><td valign="top" width="150" height="100%" align="left">X<table width="150" height="100%" valign="top" align="left" cellspacing="0" cellpadding="0">
<tr valign="top"><td align="left" valign="top" background="img/background/bgnav.jpg">
<img src="img/background/navheader.jpg">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr bgcolor="#4A5966">

I'm not so sure, but maybe where the red X is, should'n there be a <td> tag?

[tillerna]

There is a <td> tag right before that X, it's just got a few attributes tagged onto it.

[Karla]

Some kinda wierdness with IE6. If you File->Save As... and examine the rendered source, you get this code:

Code: Select all

<TD vAlign=top align=left><A href="http://www.tealriver.com/"><IMG 
            alt="Teal River.  Media for your imagination." 
            src="Teal River, Inc_  Media for your imagination_files/tealriverheader.jpg" 
            border=0></A> </TD></TR></TBODY></TABLE></TD></TR>

Notice the singlespace between </A> and </TD> ?? That is causing the horizontal white line. In Firefox1.0 the File->Save Page As... renders this:

Code: Select all

<td align="left" valign="top"><a href="http://www.tealriver.com/"><img src="Teal%20River,%20Inc.%20_%20Media%20for%20your%20imagination._files/tealriverheader.jpg" alt="Teal River.  Media for your imagination." border="0"></a>
</td></tr>
</tbody></table>
</td></tr>

The vertical white space from IE6 comes from this code:

Code: Select all

<IMG 
      src="Teal River, Inc_  Media for your imagination_files/contentheader.jpg" 
      align=left valign="top">

Removing the align=left gets rid of that. Firefox doesn't care either way!

[spirelli]

There is a <td> tag right before that X, it's just got a few attributes tagged onto it.

ah, sorry.
was a bit late last night.
...or I'm too stupid.
All the best.

[tillerna]

Thanks though, it gives me a lot less to worry about now!

[fury]

hi, i seem to have the same problem as stated above. my site looks perfect in firefox, but it looks like crap in internet explorer.

ive got some excess space under the header, and my shadow doesnt show on the right side of the page.

any help would be greatly appreciated.

thanks for the awesome script!

*fury*

[Ben]

I would simplify the header, fury. It looks like the image with a star in the upper left may be taller than the 'grid' background image that stretches across the banner. Try creating one image for the banner and setting it as the background of the header in your pagelayout. Then, user {SPACER} to move your text around or to create a hyperlink in the area where the star is.

I would add your right shadow image as the background or the 'right' block in the pagelayout. Other than some extra spacing under the star and the missing shadow on the right, your layout doesn't appear to have any other issues in IE6.