rollover effect works in 1st table but not 2nd

[liunx]

I have a ton of thumbnail images in a gallery that I wanted to put a rollover effect on without having to make a second image for each one.

The code is supposed to just put a white border around each picture when you mouse over it, by changing the background. I don't understand how that makes a border around the pic, but it seems to work fine for the first table.

What is aggravating me is that I have 4 tables, one under the other, and the rollover works fine in the first table but doesn't work in the following tables. Any help or advise in this matter is greatly appreciated! (And I haven't learned enough CSS to dump the tables yet)


In my .css file I have:

.rollover { background-color: #B3B3B3; }
.rolloveron { background-color: #FFFFFF; }


In my code I have in part:

<td valign="top" bgcolor="#B3B3B3">
<table cellSpacing="0" cellPadding="0" border="0">

<tr>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" height="44" alt=""></td>
</tr>

<td valign="top" align="center">
<table cellSpacing="0" cellPadding="1" border="0">

<tr>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" width="40" height="86" alt=""></td>
<td align="center" valign="top" onmouseover="this.className='rolloveron'" onmouseout="this.className='rollover'" class="rollover">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"java scriptopUp('portfolio/int1big.jpg', 'int1')"><img src=http://www.webdeveloper.com/forum/archive/index.php/"portfolio/int1.jpg" border="0" width="108" height="86" alt=""></a><br></td>

<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" width="40" height="86" alt=""></td>
<td align="center" valign="top" onmouseover="this.className='rolloveron'" onmouseout="this.className='rollover'" class="rollover">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"java scriptopUp('portfolio/int2big.jpg', 'int2')"><img src=http://www.webdeveloper.com/forum/archive/index.php/"portfolio/int2.jpg" border="0" width="108" height="86" alt=""></a><br></td>

<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" width="40" height="86" alt=""></td>
<td align="center" valign="top" onmouseover="this.className='rolloveron'" onmouseout="this.className='rollover'" class="rollover">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"java scriptopUp('portfolio/int3big.jpg', 'int3')"><img src=http://www.webdeveloper.com/forum/archive/index.php/"portfolio/int3.jpg" border="0" width="108" height="86" alt=""></a><br></td>

<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" width="40" height="86" alt=""></td>
<td align="center" valign="top" onmouseover="this.className='rolloveron'" onmouseout="this.className='rollover'" class="rollover">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"java scriptopUp('portfolio/int4big.jpg', 'int4')"><img src=http://www.webdeveloper.com/forum/archive/index.php/"portfolio/int4.jpg" border="0" width="108" height="86" alt=""></a><br></td>

<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" width="40" height="86" alt=""></td>
</tr>

</table>
</td>

<tr>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" height="44" alt=""></td>
</tr>

<td valign="top" align="center">
<table cellSpacing="0" cellPadding="0" border="0">

<tr>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" width="45" height="86" alt=""></td>
<td align="center" valign="top" onmouseover="this.className='rolloveron'" onmouseout="this.className='rollover'" class="rollover">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"java scriptopUp('portfolio/int5big.jpg', 'int5')"><img src=http://www.webdeveloper.com/forum/archive/index.php/"portfolio/int5.jpg" border="0" width="108" height="86" alt=""></a><br></td>

<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" width="44" height="86" alt=""></td>
<td align="center" valign="top" onmouseover="this.className='rolloveron'" onmouseout="this.className='rollover'" class="rollover">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"java scriptopUp('portfolio/int6big.jpg', 'int6')"><img src=http://www.webdeveloper.com/forum/archive/index.php/"portfolio/int6.jpg" border="0" width="108" height="86" alt=""></a><br></td>

<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" width="44" height="86" alt=""></td>
<td align="center" valign="top" onmouseover="this.className='rolloveron'" onmouseout="this.className='rollover'" class="rollover">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"java scriptopUp('portfolio/int7big.jpg', 'int7')"><img src=http://www.webdeveloper.com/forum/archive/index.php/"portfolio/int7.jpg" border="0" width="108" height="86" alt=""></a><br></td>

<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" width="44" height="86" alt=""></td>
<td align="center" valign="top" onmouseover="this.className='rolloveron'" onmouseout="this.className='rollover'" class="rollover">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"java scriptopUp('portfolio/int8big.jpg', 'int8')"><img src=http://www.webdeveloper.com/forum/archive/index.php/"portfolio/int8.jpg" border="0" width="108" height="86" alt=""></a><br></td>

<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" width="44" height="86" alt=""></td>
</tr>I realize you posted only part of your code, but the code you posted has incorrectly nested tags. Things seldom work if you don't have correct HTML.

If you would care to post a link or attach the whole file in text format, it would make it a lot easier for someone to help you.

EDIT: I just finished creating two tables with your basic idea. The second table works like the first table. Apparently, you have not posted the code that is relevant to the problem you are experiencing.Gil -
Thanks for your reply. I have attached the code and relevant files.

I wrote this code about 6 months ago, and pretty much thought the job was dead until the guy walked in with the pics this week.

I think I have learned a lot since then, and am not particularly happy with this code, but don't have time to rework all 80 pages of the site. I would however like to redo this portfolio section, so any help you can give is much appreciated. I am pretty much looking for a way to do a white border rollover around the thumbnails without having to create an extra image for each one, as I am now in a time crunch on this job.

Thanks again.additional filesIn your first table of rollover images, you specify cellspacing=1. In the other rows you specify cellspacing=0. With cellspacing=0, there is no room between the edge of the image and the edge of the cell, so no bgcolor will show through.

You are also missing a few </tr> tags.

BTW, your spacers have diifferent widths on each row as well, so the cells don't line up. In the first row, the spacers are all width=40. On the other rows, the first cell spacer width=45 and the others width=44.That's it! The cellspacing! Worked on this page too much the last 2 days to see it. The rest of it is in progress, so the numbers are off. Thanks so much! Now I can give a fresh eye to the rest of the code without worrying abouy the rollovers.