Gossamer Forum: General: Internet Technologies: Aligning a <td> contents to "middle", but with a <form in ...

Feb 16, 2008, 2:30 AM

Andy

Veteran / Moderator (18441 posts)

Feb 16, 2008, 2:30 AM

Post #1 of 7

Shortcut

Aligning a <td> contents to "middle", but with a <form in ...

Hi,

Got a bit of an annoying problem :/

(this is just an example, in its simplest form Smile

- the border="1" is just there to show the outline of the td, so you can see what I mean)

Code:
<table border="1" height="50"> 
	<tr> 
		<td align="center" width="65%" valign="middle"> 
		<form> 
			<font class="top1">Web</font> <font class="top2">Search</font> 
			<input name="query" size="29" class="main"> 
			<input type="image" alt="Submit" src="/news/images/submit.gif" align="absMiddle" border="0"> 
		</form> 
		</td> 
	</tr> 
</table>

...won't align the <td> contents to the middle of the cell.

..but this does (without the <form> bits)

Code:
<table border="1" height="50"> 
	<tr> 
		<td align="center" width="65%" valign="middle"> 
			<font class="top1">Web</font> <font class="top2">Search</font> 
			<input name="query" size="29" class="main"> 
			<input type="image" alt="Submit" src="/news/images/submit.gif" align="absMiddle" border="0"> 
		</td> 
	</tr> 
</table>

Anyone got any ideas why? Really getting on my nerves :(

TIA

Andy (mod)
andy@ultranerds.co.uk

Feb 17, 2008, 9:21 AM

SandraR

User (424 posts)

Feb 17, 2008, 9:21 AM

Post #2 of 7

Shortcut

Re: [Andy] Aligning a <td> contents to "middle", but with a <form in ... In reply to

Hey Andy,

I prefer to use CSS whenever I can so here is an example of one.

change the login_form to what you need it to say.

.login_form input {vertical-align:middle;border:1px solid #CDCDCD;border-top:1px solid #888;border-left:1px solid #888;width:90px;margin-right:10px;}

Sandra Roussel
Chonsa Group Design - Fresh Start Housing

Feb 17, 2008, 9:59 AM

Andy

Veteran / Moderator (18441 posts)

Feb 17, 2008, 9:59 AM

Post #3 of 7

Shortcut

Re: [SandraR] Aligning a <td> contents to "middle", but with a <form in ... In reply to

Hi,

Thanks for the reply - doesn't seem to do what I want :/

Code:
<style> 
.login_form input {vertical-align:middle;border:1px solid #CDCDCD;border-top:1px solid #888;border-left:1px solid #888;width:90px;margin-right:10px;} 
</style> 

<table border="1" height="50"> 
<tr> 
<td align="center" width="65%" valign="middle" class="login_form">  
<form> 
<font class="top1">Web</font> <font class="top2">Search</font> 
<input name="query" size="29" class="main"> 
<input type="image" alt="Submit" src="http://www.potvine.com/news/images/submit.gif" align="absMiddle" border="0"> 
</form> 
</td> 
</tr> 
</table>

(see attached image for what I see) - or am I implementing it wrong? I'd defiantly prefer going down the CSS route :)

TIA for the reply.

Andy (mod)
andy@ultranerds.co.uk

Feb 17, 2008, 10:40 AM

SandraR

User (424 posts)

Feb 17, 2008, 10:40 AM

Post #4 of 7

Shortcut

Re: [Andy] Aligning a <td> contents to "middle", but with a <form in ... In reply to

this might be easier

Code:


<style> 
	    	.greenBorder {border: 1px solid green;} /* just borders to see it */ 
	  	</style> 

  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">  
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">  
<form>  
<font class="top1">Web</font> <font class="top2">Search</font>  
<input name="query" size="29" class="main">  
<input type="image" alt="Submit" src="http://www.potvine.com/news/images/submit.gif" align="absMiddle" border="0">  
</form>  
    </div>  
  </div>

Sandra Roussel
Chonsa Group Design - Fresh Start Housing

Last edited by:

SandraR: Feb 17, 2008, 10:42 AM

Feb 17, 2008, 10:48 AM

SandraR

User (424 posts)

Feb 17, 2008, 10:48 AM

Post #5 of 7

Shortcut

Re: [SandraR] Aligning a <td> contents to "middle", but with a <form in ... In reply to

Andy

I used the easier method because its standard in ALL browsers and you can change the settings for middle alignment using the #top: 50%; in conjunction with the height: 400px; .

Feb 17, 2008, 11:20 AM

Andy

Veteran / Moderator (18441 posts)

Feb 17, 2008, 11:20 AM

Post #6 of 7

Shortcut

Re: [SandraR] Aligning a <td> contents to "middle", but with a <form in ... In reply to

Hi,

Thanks - still doesn't quite work :/

Code:
<style> 
.greenBorder {border: 1px solid green;} /* just borders to see it */ 
</style> 
<div class="greenBorder" style="display: table; height: 65px; #position: relative; overflow: hidden;"> 
	<div style="#position: absolute; #top: 50%;  display: table-cell; vertical-align: middle;"> 
		<form> 
			<font class="top1">Web</font> <font class="top2">Search</font> 
			<input name="query" size="29" class="main"> 
			<input type="image" alt="Submit" src="http://www.potvine.com/news/images/submit.gif" align="absMiddle" border="0"> 
		</form> 
	</div> 
</div>

I had to edit the height to 65px, as thats the height of the td where the search box is going in :)

Its just not showing in the "middle" of the td Frown

TIA for your help on this - its nice to have people help me out (normally me helping others <G>)

Andy (mod)
andy@ultranerds.co.uk

Feb 17, 2008, 11:29 AM

SandraR

User (424 posts)

Feb 17, 2008, 11:29 AM

Post #7 of 7

Shortcut

Re: [Andy] Aligning a <td> contents to "middle", but with a <form in ... In reply to

Hey Andy,

You have the ability to determine what the middle is by changing #top: 50%;

when I change it to: #top: 25%;

it looks in the middle - I prefer control over settings so I added the option to determine where the middle is by using the above attribute.

As for helping not a problem you help so many daily, it’s your turn to rake in some help :D

Sandra Roussel
Chonsa Group Design - Fresh Start Housing

Aligning a <td> contents to "middle", but with a <form in ...

Attached Files:

Last edited by: