Can anyone help with tables?

englishpremier · 26 Mar 2009 at 12:13

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

fez · 26 Mar 2009 at 12:50

Ive just had a look at it and I think there are a few problems. It seems to take ages to register the hover when the mouse is there. Secondly im not convinced that they are all enlarging. They are all just moving slightly as a result of the single cell enlarging the picture. Make the size change more visible i.e. 50px to 100px to check.

SimonCHere · 26 Mar 2009 at 13:34

You're mixing you styles and widths!
also stick "nowrap" into the cells to stop them moving.

Code:

<html>
<head>
<script>
function swapUp(where, ClientName){
where.src ='http://www.uttingsinsurance.co.uk/assets/images/clientlogos/' + ClientName + '_upstate.jpg';
}

function swapDown(where, ClientName){
where.src ='http://www.uttingsinsurance.co.uk/assets/images/clientlogos/' + ClientName + '_downstate.jpg';
}

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

<td style="height: 100px; width: 100px;" nowrap><a href="[~35~]">
<p><img title="ArrowPak" onmouseover="swapDown(this,'arrowpak');" onmouseout="swapUp(this,'arrowpak');" src="http://www.uttingsinsurance.co.uk/assets/images/clientlogos/arrowpak_upstate.jpg" alt="ArrowPak" /></p>
</a></td>


<td style="height: 100px; width: 100px;" nowrap>
<p><img title="BTO" onmouseover="swapDown(this,'bto');" onmouseout="swapUp(this,'bto');" src="http://www.uttingsinsurance.co.uk/assets/images/clientlogos/bto_upstate.jpg" alt="BTO" /></p>
</td>


<td style="height: 100px; width: 100px;" nowrap>
<p><img title="Abels" onmouseover="swapDown(this,'abels');" onmouseout="swapUp(this,'abels');" src="http://www.uttingsinsurance.co.uk/assets/images/clientlogos/abels_upstate.jpg" alt="Abels" /></p>
</td>
</tr>
</tbody>
</table>
</body>
</html>

englishpremier · 27 Mar 2009 at 09:56

I tried your code but I get the same result:

http://www.uttingsinsurance.co.uk/30.html

probedb · 27 Mar 2009 at 10:21

Use a DOCTYPE!!! You end up with loads of difficult to diagnose problems if you don't use Strict ones as browsers go into different quirks modes to deal with crappy old HTML pages.

englishpremier · 27 Mar 2009 at 10:28

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>

SimonCHere · 27 Mar 2009 at 10:36

englishpremier said:
I tried your code but I get the same result:

http://www.uttingsinsurance.co.uk/30.html

You misssed the NOWRAP tags in the table cells

p-chan · 27 Mar 2009 at 10:48

I had a quick look using firebug. Seems the Parent table isn't big enough. Setting it to 325 does the job.

Code:

<div id="testimonials">
<table cellspacing="2" cellpadding="2" border="0" width="325">
......
</table>
</div>

englishpremier · 27 Mar 2009 at 10:48

I have tried style="white-space:nowrap;" but it does not work - apprentely the html nowrap="nowrap" is depreciated.