Random Image Question/Problem

Okay, so hopefully I'll explain this without confusing you all too much!

I'm designing a new layout for the website I run, and as part of that layout, I've decided to use a Random Image code, just to spice things up!

Anyhoo, the code works fine, that's not a problem. The problem is:

I have my random images loading in a table cell, and beneath that cell, i have another cell containing the graphic for the menu bar.
Instead of the menu being directly under the random image (which is what I want), something is causing it to leave a small gap between the bottom of the random image and the next cell.

I have used the Valign tag to align the images to the top (so thats not the problem).
I have also set the cellpadding and cellspacing properties to "0" - so that's not a problem either.

But it's still leaving a gap between the random image and the cell below, and I have no idea why! Can anyone help me? :confused:

Here is a sample of the html for the tables in the page:

<table width="524" height="100%" border="0" bgcolor="white" cellpadding="0"

cellspacing="0" align="center">

<tr>
<td width="12" background="images/left.jpg">&nbsp;</td>
<td width="500" valign="top" height="30">
<img src="images/top.jpg" width="500" height="30"></td>
<td width="12" background="images/right.jpg">&nbsp;</td>
</tr>

<tr>
<td width="12" background="images/left.jpg">&nbsp;</td>
<td width="500" height="200" valign="top">
<SCRIPT LANGUAGE="Javascript"><!--

function image() {
};

image = new image();
number = 0;

// imageArray
image[number++] = "<img src='images/main001.jpg' border='0'>"
image[number++] = "<img src='images/main002.jpg' border='0'>"
image[number++] = "<img src='images/main003.jpg' border='0'>"
image[number++] = "<img src='images/main004.jpg' border='0'>"
image[number++] = "<img src='images/main005.jpg' border='0'>"
//

increment = Math.floor(Math.random() * number);

document.write(image[increment]);

//--></SCRIPT>
</td>
<td width="12" background="images/right.jpg">&nbsp;</td>
</tr>

<tr>
<td width="12" background="images/left.jpg">&nbsp;</td>
<td width="500" height="20" valign="top">
<img src="images/menu.jpg" width="500" height="20" align="top"></td>
<td width="12" background="images/right.jpg">&nbsp;</td>
</tr>

<tr>
<td width="12" background="images/left.jpg">&nbsp;</td>
<td width="500" valign="top">

<!-- START PAGE CONTENT -->

<p>the page contents will go in here!!! </p>

<!-- END PAGE CONTENT -->

</td>
<td width="12" background="images/right.jpg">&nbsp;</td>
</tr>
</table>

If anyone can help i'll be your bestest friend for life! If you need more info, then just pvt me and i can send you more! :)

Thanks, Andy

Hi there andiuk,

and a warm welcome to these forums. :)

I assume that this problem is occuring in IE. :eek:
IE creates 'whitespace' when the </td> tags are not closed up to the <img>
So change...

increment = Math.floor(Math.random() * number);

document.write(image[increment]);

//--></SCRIPT>
</td>

...to this...

increment = Math.floor(Math.random() * number);

document.write(image[increment]);

//--></SCRIPT></td>

...and see if that provides a cure. :D

coothead

Hi there andiuk,

and a warm welcome to these forums. :)

I assume that this problem is occuring in IE. :eek:
IE creates 'whitespace' when the </td> tags are not closed up to the <img>
So change...

increment = Math.floor(Math.random() * number);

document.write(image[increment]);

//--></SCRIPT>
</td>

...to this...

increment = Math.floor(Math.random() * number);

document.write(image[increment]);

//--></SCRIPT></td>

...and see if that provides a cure. :D

coothead

i don't... it... i... it works.... :eek: *swoons*

thanks sooooo much... if only we could have spoken before i'd pulled out enough hair to make a small bald patch...

that's cool - i really can't thank you enough, i've been pulling my friggin' hair out tryin to fix that!!! i'm such a moron!!!

a pox on IE... :P