adding image map puts image out of alignment

Hi,<br />
I have a table with 2 columns. The left ontains an image, the the right contains another image.<br />
<br />
The two images are both the same height. I have added image maps to the image on the right hand side, but it moves it out of alignment with the left hand image. Is there a way round this?<!--content-->Can you show us the code? Just the bit that relates to your problem.<!--content--><table width="800" border="0" cellspacing="0" cellpadding="0"><br />
<tr><br />
<td>&nbsp;</td><br />
<td width="260"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/Graphic1.jpg" width="260" height="130"></td><br />
<td width="1">&nbsp;</td><br />
<td width="300" align="right"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/attractions.gif" width="300" height="130" border="0" usemap="#Map"><br />
<map name="Map"><br />
<area shape="rect" coords="1,2,302,138" href=http://www.webdeveloper.com/forum/archive/index.php/"#"><br />
</map></td><br />
<td width="100">&nbsp;</td><br />
</tr><br />
<tr><br />
<td>&nbsp;</td><br />
<td>&nbsp;</td><br />
<td>&nbsp;</td><br />
<td width="297" class="topmenulinks"><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:popUpWindow('popups/events.htm','0','0','304','410');" title="events">Events</a></td><br />
<td>&nbsp;</td><br />
</tr><br />
</table><!--content-->OK. There are few things I would suggest that might help you out here. <br />
<br />
You probably had non-breaking spaces in the empty td's but they don't show up on this forum. If you haven't put them in, it's a good idea - a 1x1 transparent gif is even better. (Just so they show up in the code on this forum, I've put a space in => & nbsp; ... if you cut and paste this code, remember to take them back out again).<br />
<br />
Often, when laying out tables, don't leave any spaces between tags ... see how I've laid out the td that contains the image map. I don't break onto the next line. (It breaks below but that's just word-wrap on the forum).<br />
<br />
It's just one of those glitches that aren't supposed to happen, but do. Most of the time, HTML ignores these spaces but sometimes it doesn't.<br />
<br />
Hope that works!<br />
<br />
-------------<br />
<table width="800" border="1" cellspacing="0" cellpadding="0"> <br />
<tr> <br />
<td>& nbsp;</td> <br />
<td width="260"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/Graphic1.jpg" width="260" height="130"></td> <br />
<td width="1">& nbsp;</td> <br />
<td width="300" align="right"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/attractions.gif" width="300" height="130" border="0" usemap="#Map"><map name="Map"><area shape="rect" coords="1,2,302,138" href="#"></map></td> <br />
<td width="100">& nbsp;</td> <br />
</tr> <br />
<tr> <br />
<td>& nbsp;</td> <br />
<td>& nbsp;</td> <br />
<td>& nbsp;</td> <br />
<td width="297" class="topmenulinks"><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascriptopUpWindow('popups/events.htm','0','0','304','410');" title="events">Events</a></td> <br />
<td>& nbsp;</td> <br />
</tr> <br />
</table><br />
-------------<br />
Cheers,<br />
pnaj.<!--content-->Try recoding like so<br />
<br />
<td width="300" align="right"><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/attractions.gif" width="300" height="130" border="0" usemap="#Map"></td><br />
<map name="Map"><area shape="rect" coords="1,2,302,138" href=http://www.webdeveloper.com/forum/archive/index.php/"#"></map><!--content-->thank you very much<!--content-->yea you can always wack you actual image map code containing the relevant link and the co-ordinates in another part of the page.<br />
<br />
i have previously put that snippet of code in the head of the page.<!--content-->
 
Back
Top