whitespace and slices [Archive]

View Full Version : whitespace and slices

mattselley

10-16-2007, 03:04 PM

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 a browser there is a strange whitespace between the center img and right img about 4px wide.

I have played around with the code and just cant remove it, It only appears when the new img with the slices are added to the header, so im assumming its something to do with the slices.

Any help or ideas would be great

Xipher

10-16-2007, 11:23 PM

Its the way that you sliced your image. Those gaps are called "spacers" and they are a designer's worst enemy. The only way to actually get rid of them is to manually recode your images, or go back and reslice the image. To avoid spacers in the future, make sure that your slices are horizontally even. Also preview your sliced image in your browser, and it will show the image, along with the html code. If the code has "spacer.gif" anywhere, then odds are, it will produce gaps.

I hope this helps you.

mattselley

10-17-2007, 02:23 PM

Thanks for the reply, i have checked everything and there are no spacers.gifs. The file has been exported from fireworks as a single table - no spacers and the two slices are horizontally even.

Here is the code, everything is uploaded, so should be visible in a browser.

[<html>
<head>
<title>tab.jpg</title>
<meta http-equiv="Content-Type" content="text/html;">

</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">

<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>

<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>

<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>

Analogpoint

10-17-2007, 02:49 PM

PM me with your URL and I'll take a look.

mattselley

10-17-2007, 10:37 PM

it seems that the 'problem' only exsists in IE7 but its ok in firefox.

has anyone come across this before?