Whitespace in IE

mattselley · 10-18-2007, 09:10 AM

In my forum, i have created a header graphic that 'stretches' the page width, no matter how wide the viewers screen is. This is using three seperate images, a left img, right img and a center img 1px wide that is set to 100% to fill the 'gap between the two. This all works very well...

untill now...

I have changed the left img, to include two links that i have created using slices with fireworks 2004. I have exported the html as 'single table - no spaces' and put this in with my other two images. Now when it is viewed in Explorer there is a strange whitespace between the center img and right img about 3px wide.

I have played around with the code and just cant remove it, this is only a problem in IE as Firefox is displaying the page correctly

Any help or ideas would be great

Code:

[<html>
<head>
<title>tab.jpg</title>
<meta http-equiv="Content-Type" content="text/html;">
<!--Fireworks MX 2004 Dreamweaver MX 2004 target.  Created Mon Oct 15 13:50:02 GMT+0100 (GMT Daylight Time) 2007-->
</head>
<body bgcolor="#f5f5ff">
<table border="0" cellpadding="0" cellspacing="0" width="600" align="left" >
<tr>
<td rowspan="2"><img name="tab_r1_c1" src="http://www.itsalifestyle.co.uk/header/
tab_r1_c1.jpg" width="200" height="89" border="0" alt=""></td>
<td><table align="left" border="0" cellpadding="0" cellspacing="0" width="400">
<tr>
<td><table align="left" border="0" cellpadding="0" cellspacing="0" width="200">
<!-- SLICE 1 -->
<tr>
<td><a href="http://www.itsalifestyle-toybox.co.uk" target="_self"><img name="tab_r1_c2" src="http://www.itsalifestyle.co.uk/header/
tab_r1_c2.jpg" width="200" height="40" border="0" alt=""></a></td></tr>
<tr>
<td><img name="tab_r3_c2" src="http://www.itsalifestyle.co.uk/header/
tab_r3_c2.jpg" width="200" height="1" border="0" alt=""></td></tr></table></td>
<td><table align="left" border="0" cellpadding="0" cellspacing="0" width="200">
<tr>
<td><img name="tab_r1_c3" src="http://www.itsalifestyle.co.uk/header/
tab_r1_c3.jpg" width="200" height="1" border="0" alt=""></td></tr>
<!-- SLICE 2 -->
<tr>
<td><a href="http://www.itsalifestyle-movies.co.uk" target="_blank"><img name="tab_r2_c3" src="http://www.itsalifestyle.co.uk/header/
tab_r2_c3.jpg" width="200" height="40" border="0" alt=""></a></td></tr></table></td></tr></table></td></tr>
<tr>
<td><img name="tab_r4_c2" src="http://www.itsalifestyle.co.uk/header/
tab_r4_c2.jpg" width="400" height="48" border="0" alt=""></td></tr></table>
<!--  CODE FOR CENTER IMAGE AND RIGHT IMAGE -->
<tr>
<table border="0" cellpadding="0" cellspacing="0"  align="left">
<td height="89" width="100%" style="background-image: url(http://www.itsalifestyle.co.uk/header/tabcenter.jpg);" align="left" border="0"/></td>
<td width="350" height="89" align="left" border="0" valign="top" ><img src="http://www.itsalifestyle.co.uk/header/tabright.jpg" width="350" height="89" border="0" align="left" ></td></table></tr>

</body>
</html>

Costin Trifan · 10-18-2007, 09:31 AM

Your code in IE 7 (view attachment)

I see no white space in there...

mattselley · 10-18-2007, 09:41 AM

very strange, im running IE7 too and still seeing the problem even after deleting history etc.

Its obviously a problem with my machine, so il look further into it.

thanks for the reply, that was extremely helpfull

Costin Trifan · 10-18-2007, 10:21 AM

One more thing, though:

Code:

    <!--  CODE FOR CENTER IMAGE AND RIGHT IMAGE -->
    <tr>
        <table border="0" cellpadding="0" cellspacing="0" align="left">
            <td height="89" width="100%" style="background-image: url(http://www.itsalifestyle.co.uk/header/tabcenter.jpg);"
                align="left" border="0" />
            </td>
            <td width="350" height="89" align="left" border="0" valign="top">
                <img src="http://www.itsalifestyle.co.uk/header/tabright.jpg" width="350" height="89"
                    border="0" align="left"></td>
        </table>
    </tr>

^^ right at the bottom of your code

Wrap the table in a td:

Quote: