valign center 1

[new2this2002]

I have the following code.....

<table cellspacing="0" width="100%">
<tr>
<td width="25%" valign="middle"></td>
<td width="50%" valign="middle">content</td>
<td width="25%" align="right" valign="middle">
<div>
<form>
<p>
<select>
<option value="original" selected="selected">original</option>
</select>
</p>
</form>
</div>
</td>
</tr>
</table>

when i view this table in IE the combo box is anchored to the top of the table cell...but when i view the page in Netscape or FireFox it is vertically aligned in the center of the table cell. Does anyone have any clues as to why this might be as the 'content' is vertically aligned in the center is all the browsers, i assume i have something missing with the DIV tag...

 

[tviman]

Actually, it's doing exactly what you told it to do. I would say that IE isn't liking the valign attribute.

There's always a better way. The fun is trying to find it!

 

[new2this2002]

it must like the 'valign' attribute otherwise the 'content' would not be vertically centered

 

[vongrunt]

Form is the highest element in a table, and IE adds some bottom margin on it. If you set form style to "border: 0px" or "display: inline" things should be centered vertically.

 

[new2this2002]

i have added

<form style="margin:0px;border:0px;display:inline">

that now vertically aligns the combo box in the center...but the 'content' is now vertically aligned at the top

 

[new2this2002]

apologies....i omitted some information...after adding the

<form style="margin:0px;border:0px;display:inline">

the size of the table shrunk in height so i added...

<td width="50%" valign="middle">content<br /><br /></td>

which vertically centered the combo box...but sent the 'some content' to the top

 

[vongrunt]

Here is somewhat cleaner approach:

<table cellspacing="0" width="100%" border="1">
<tr style="height: 100px; vertical-align: middle;">
	<td width="25%">blah</td>
	<td width="50%">content</td>
	<td width="25%" align="right">
<form style="margin: 0px;">
	<select>
		<option value="original" selected="selected">original</option>
	</select>
</form>
	</td>
</tr>
</table>

 

[new2this2002]

well that certainly sorted it and gave me some nicer code....thanks very much for the quick repsonses and help