[nova912]

Well i was trying to figure out a way so that when a user click on a item with in the table it will go to a link. So far i have just done the work around of mouse over on a <a></a> and then altering the background of a <td></td>

Now i can't put the onmouseover="changeBg()" in the <td> tag because it does not work on all browsers. But when i try to put it like so...

Code:

<td height="21" valign="middle">
<div onmouseover="changeBg()">The link</div>
</td>

The DIV takes the shape of 100% width and what ever the height of the TEXT is, not the <TD>. So i figured ill try and make the height of the div 21 pixels, but i run into the problem of the text within the DIV valigning to the top and not middle and i dont know how to correct that.

The only other way i can think abou doing this is by adding another table with in the <TD> like so...

Code:

<td height="21" valign="middle">
<div onmouseover="changeBg()">
<table height="21" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
The link
</td>
</tr>
</table>
</div>
</td>

Now the <DIV> will wrap around the table but i just added 6 extra lines of html and i would have to mulitiply that per <TD>. Is there a common solution to this problem im missing?

[TwoD]

The <div> tag is a block type element. That means it will always have a default width of 100% and "align" on the page like a big block and push everything else on that row above or below itself.

Try using a <span> tag instead, it's an inline type element. That means it will align with the rest of the contents without pushing things around unless it won't fit on that row. It also has a default width set to auto I believe, making it no larger than its contents.

Will move this to the CSS section.