HTML Table Useage

Absolute position?

[hkmrats]

Hi All,

I was wondering if anyone could help me out with something. I'm currently busy doing up my website, and am using a table to create the template.

The left hand collumn has a series of buttons in it, linking to other pages of the website. Although the buttons are positioned fine in some browsers, they shift down a lot in others - or if I enter more text into the right hand collumns, the links shift down.

Is there anyway I can fix this? Say using an absolute position?

Thanks

[tedster]

Welcome to the forums, hkmrats.

Absolute positioning is not the right tool, here -- although you might get visual results that you like, it's most likely to be complete overkill and a lot of trouble for future maintenance and changes.

The key will be in understanding where these visual differences originate. To begin, what Doctype (DTD) are you using? Then, next, what styles are you applying to the elements involved?

The first thing to do with ay cross-browser rendering problems is to make sure your code is valid. If you try to fix display issues when the mark-up has problems you can rapidly become frustrated.

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

[encyclo]

It may be that you are missing the

valign

attribute which ensures the content of the cell always stays at top. You can also use CSS instead of

valign

:

<td [b]valign="top"[/b]>

or:

<td [b]style="vertical-align:top;"[/b]>

You can also assign a class to the

td

and apply the styles in your stylesheet.

[hkmrats]

Where would I put that in? If the collumn I want the links to fix at the top to is as follows...

<th width="12%" rowspan="3" bgcolor="#3E1F00" scope="row">
<a href="../index.htm"><img src="../home.JPG" width="99" height="31" border="0"></a> <br>
<a href="News.htm"><img src="../News.JPG" width="97" height="31" border="0"></a>
<br>
<a href="../AboutUs.htm"><img src="../about.JPG" width="97" height="31" border="0"></a>
<br>
<a href="../My%20Does.htm"><img src="../does.JPG" width="97" height="31" border="0"></a>
<br>
<a href="../My%20Bucks.htm"><img src="../bucks.JPG" width="97" height="31" border="0"></a>
<br>
<a href="../All%20Litters.htm"><img src="../Litters.JPG" width="97" height="31" border="0"></a>
<br>
<a href="../Others.htm"><img src="../other.JPG" width="97" height="31" border="0"></a>
<br>
<a href="../Linksto.htm"><img src="../links.JPG" width="97" height="31" border="0"></a>
<br>
<img src="../Contact.JPG" width="97" height="31"> </div></th>
<br>

[hkmrats]

Ahh - Also - how do I go about putting Alt tags onto the images?

[DrDoc]

A) There is no such thing as an alt tag -- it's an alt attribute. ;) Just add it anywhere to your <img> tag.

B) You should probably add the

valign

attribute to all your <td> tags. This will ensure that the content is always placed at the top of the table cell.

[hkmrats]

But in the left hand collumn - there is no <td> tag..

Ah no - the left hand collumn is a <th> tag :) But I've managed to get it to stay at the top - thankyou!

I'm going to have a go at getting alt attribute (thankyou for correcting me :)), into the img tags