VALIGN Not Working ? 1

[JohnBates]

Hi HTML experts,

I'm trying get the text in this row to sink to the bottom...
but the word LONE is at the top of the row. IE 6 seems to be ignoring the VALIGN setting. This is the way the row looks: __________________________
LONE

__________________________

I want LONE to appear near the bottom of the row....

Thanks, John

here is the html code:

<table align="CENTER" border="3" width="80%" cellpadding=0>
<tr><th colspan="5"></th></tr>
<tr>
<td>&nbsp;</td>
<td valign="BOTTOM" class = "black" align="left"><H2>LONE</H2></td>
<td valign="BOTTOM" class = "red" align="left"><H3>Trucking Safety</H3></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

 

[WartookMan]

A couple of things. The first is that the row doesn't have a height value, so it will default to the height of the paragraph/text inside the cell. In this case the height of the H2 text.

H2 and other heading tags, have a trailing padding/margin (not sure which of about 10px), so to make it sit in the middle (vertically):
1. Remove the padding/margin settings from the H2 and H3 tags.
2. Add a height to the table cell/row.

Example:

...
<style>
h2, h3 {
	margin: 0px;
	padding: 0px;
}
</style>
...
<table align="center" border="3" width="80%" cellpadding="0">
<tr>
	<th colspan="5">&nbsp;</th>
</tr>
<tr>
	<td>&nbsp;</td>
	<td height="40" valign="BOTTOM" class="black" align="left"><h2>LONE</h2></td>
	<td height="40" valign="BOTTOM" class="red" align="left"><h3>Trucking Safety</h3></td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
</tr>
</table>

Hope this helps.

Pete.


Web Developer &amp; Aptrix / Lotus Workplace Web Content Management (LWWCM) Specialist
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk

 

[JohnBates]

Thanks for the detailed example WarTookMan,

Obviously I've got more to learn about tables.
lclimited is a very nice, well-done web site BTW.

John

 

[JohnBates]

... and setting the margins for h2, h3 DID fix the problem.

 

[WartookMan]

Glad to help... wait till you start playing with DIVs... then the fun really starts.

Pete.


Web Developer &amp; Aptrix / Lotus Workplace Web Content Management (LWWCM) Specialist
w:

http://www.lclimited.co.uk/

e: Pete.Raleigh(at)lclimited.co.uk