Can anyone help with tables?

englishpremier

englishpremier

englishpremier

Soldato
Joined
15 Feb 2003
Posts
10,173
Location
Europe
I am trying to create a table 9 cells by 9cells that will display logos. On hover the logo should enlarge itself. The standard logos are 80x80px the upstate logos are 90x90px.

The actual table cells are 100x100px.

Why is it then that when I hover over one of the logos and it enlarges, it moves all of the others in the table.

The code is below, and the webpage is; http://www.uttingsinsurance.co.uk/testimonials.html

Code: 
<table style="height: 325px;" border="0" cellspacing="5" cellpadding="5" width="307">
<tbody>
<tr>

<td style="height: 100px;" "width:"100;"><a href="[~35~]">

<p><img title="ArrowPak" onmouseover="this.src='/assets/images/clientlogos/arrowpak_downstate.jpg';" onmouseout="this.src='/assets/images/clientlogos/arrowpak_upstate.jpg';" src="assets/images/clientlogos/arrowpak_upstate.jpg" alt="ArrowPak" /></p>

</a></td>


<td style="height: 100px;" "width:"100;">
<p><img title="BTO" onmouseover="this.src='/assets/images/clientlogos/bto_downstate.jpg';" onmouseout="this.src='/assets/images/clientlogos/bto_upstate.jpg';" src="assets/images/clientlogos/bto_upstate.jpg" alt="BTO" /></p>
</td>


<td style="height: 100px;" "width:"100;">
<p><img title="Abels" onmouseover="this.src='/assets/images/clientlogos/abels_downstate.jpg';" onmouseout="this.src='/assets/images/clientlogos/abels_upstate.jpg';" src="assets/images/clientlogos/abels_upstate.jpg" alt="Abels" /></p>
</td>
</tr>


<tr>
<td style="height: 100px;" "width:"100;">
<p><img title="Horse Welfare" onmouseover="this.src='/assets/images/clientlogos/horse_welfare_downstate.jpg';" onmouseout="this.src='/assets/images/clientlogos/horse_welfare_upstate.jpg';" src="assets/images/clientlogos/horse_welfare_upstate.jpg" alt="Horse Welfare" /></p>
</td>


<td style="height: 100px;" "width:"100;">
<p><img title="More Solutions" onmouseover="this.src='/assets/images/clientlogos/More_solutions_downstate.jpg';" onmouseout="this.src='/assets/images/clientlogos/More_solutions_upstate.jpg';" src="assets/images/clientlogos/More_solutions_upstate.jpg" alt="More Solutions" /></p>
</td>


<td style="height: 100px;" "width:"100;">
<p><img title="MJB" onmouseover="this.src='/assets/images/clientlogos/MJB_downstate.jpg';" onmouseout="this.src='/assets/images/clientlogos/MJB_upstate.jpg';" src="assets/images/clientlogos/MJB_upstate.jpg" alt="MJB" /></p>
<br /></td>
</tr>
<tr>


<td style="height: 100px;" "width:"100;">
<p><img title="Petrell" onmouseover="this.src='/assets/images/clientlogos/petrell_downstate.jpg';" onmouseout="this.src='/assets/images/clientlogos/petrell_upstate.jpg';" src="assets/images/clientlogos/petrell_upstate.jpg" alt="Petrell" /></p>
</td>


<td style="height: 100px;" "width:"100;">
<p><img title="Seat" onmouseover="this.src='/assets/images/clientlogos/nvcmotors_downstate.jpg';" onmouseout="this.src='/assets/images/clientlogos/nvcmotors_upstate.jpg';" src="assets/images/clientlogos/nvcmotors_upstate.jpg" alt="Seat" /></p>
</td>

<td style="height: 100px;" "width:"100;">
<p><img title="Staff call" onmouseover="this.src='/assets/images/clientlogos/staffcall_downstate.jpg';" onmouseout="this.src='/assets/images/clientlogos/staffcall_upstate.jpg';" src="assets/images/clientlogos/staffcall_upstate.jpg" alt="staff call logo" /></p>
</td>
</tr>
</tbody>
</table>

Thanks
 
I am using a doctype here is my html:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb" xml:lang="en-gb">

<head>
	
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
<meta name="copyright" content="Uttings Insurance Brokers"/>
<meta http-equiv="content-language" content="EN"/>
<meta name="rating" content="Business"/>
<meta name="designer" content="PressPoint"/>
<base href="[(site_url)]"></base>


<title> [*pagetitle*] | [(site_name)]</title>

<link rel="stylesheet" href="[(base_url)]assets/templates/uttings/css/internal.css" />

</head>




<body>

<div id="page-container">


<p>&nbsp;</p>


	<div id="header"></div>


	
	
	
	<ul id="navigation">
		<li id="navigation-1"><a href="[~1~]" title="home"><span>home</span></a></li>
		<li id="navigation-2"><a href="[~8~]" title="about us"><span>about us</span></a></li>
		<li id="navigation-3"><a href="[~9~]" title="the team"><span>the team</span></a></li>
		<li id="navigation-4"><a href="[~10~]" title="services"><span>services</span></a></li>
		<li id="navigation-5"><a href="[~15~]" title="f.a.q's"><span>f.a.q's</span></a></li>
		<li id="navigation-6"><a href="[~13~]" title="testimonials"><span>testimonials</span></a></li>
		<li id="navigation-7"><a href="[~14~]" title="links"><span>links</span></a></li>
		<li id="navigation-8"><a href="[~11~]" title="contact"><span>contact</span></a></li>
	</ul>


	
	


	<div id="content">
			<div class="padding">
		[*content*]	
			</div>
	</div>


<div id="mainphoto"> 

[*testimonials*]

</div>


<div id="footer">
			<div class="footerpadding">
{{footer}}
</div>
</div>



</div>
</body>


</html>
 
You must log in or register to reply here.
Back
Top Bottom