Problem with tables

429 Posts

c-m Reply #1, 17 years, 6 months ago

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; REMOVED at client request

<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

429 Posts

c-m Reply #2, 17 years, 6 months ago

I have changed the TD value to <td height="100" width="100">

but that still doesn’t stop all of the other icons moving when just one is hovered over.

69 Posts

markhurd Reply #3, 17 years, 6 months ago

The width and height attributes are both deprecated now (http://w3schools.com/tags/tag_td.asp) so using <td style="width: 100px; height: 100px;"> would render more consistently across browsers.

Have you tried measuring the cells to make sure they are actually getting the full 100x100 dimensions? You could throw a border=1 on the <table> to make sure. You also may want to try removing the width/height attributes from the table itself. If the cells are given an explicit size, the table will expand to contain them.

More involved solution: Use an unordered list instead of a table (this is semantically more correct anyway) and style each list item so it’s floated left with sufficient dimensions/margins/padding. Then assign a hover event handler in JavaScript to toggle the image size. jQuery makes this a breeze.

429 Posts

c-m Reply #4, 17 years, 6 months ago

Quote from: markhurd at Mar 26, 2009, 10:45 AM

The width and height attributes are both deprecated now (http://w3schools.com/tags/tag_td.asp) so using <td style="width: 100px; height: 100px;"> would render more consistently across browsers.

Have you tried measuring the cells to make sure they are actually getting the full 100x100 dimensions? You could throw a border=1 on the <table> to make sure. You also may want to try removing the width/height attributes from the table itself. If the cells are given an explicit size, the table will expand to contain them.

More involved solution: Use an unordered list instead of a table (this is semantically more correct anyway) and style each list item so it’s floated left with sufficient dimensions/margins/padding. Then assign a hover event handler in JavaScript to toggle the image size. jQuery makes this a breeze.

I have removed the height and width elements from the table and used <td style="width: 100px; height: 100px;"> on all of the cells.

Still the table cells moved when I hover over an image. They are definately 100x100 before the hover, but on hover they seem to expand.

I am a novice and this is realyl frustrating me, I have no knowlege of java or jquery