Gossamer Forum
(Advanced Search)
for
Home : General : Internet Technologies :

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

Feb 16, 2008, 2:30 AM
Andy
Veteran / Moderator (17298 posts)
Andy's avatar
Feb 16, 2008, 2:30 AM
Post #1 of 7
Views: 579
Shortcut
Quote Reply
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

IMPORTANT: I've now moved to ultranerds.co.uk, and the .com will no longer work!
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package (plugins total "value" $3,325 & rising, for just $350)| GLinks ULTRA Package PRO (plugins total "value" $5,625 & rising, for just $500)
Support Forum | Links SQL Plugins | DMOZ Dumps | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Compare our different Plugin packages *new* Free CSS Templates
Feb 17, 2008, 9:21 AM
SandraR
User (424 posts)
SandraR's avatar
Feb 17, 2008, 9:21 AM
Post #2 of 7
Views: 556
Shortcut
Quote Reply
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 (17298 posts)
Andy's avatar
Feb 17, 2008, 9:59 AM
Post #3 of 7
Views: 553
Shortcut
Quote Reply
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

IMPORTANT: I've now moved to ultranerds.co.uk, and the .com will no longer work!
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package (plugins total "value" $3,325 & rising, for just $350)| GLinks ULTRA Package PRO (plugins total "value" $5,625 & rising, for just $500)
Support Forum | Links SQL Plugins | DMOZ Dumps | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Compare our different Plugin packages *new* Free CSS Templates

Attached Files:

Feb 17, 2008, 10:40 AM
SandraR
User (424 posts)
SandraR's avatar
Feb 17, 2008, 10:40 AM
Post #4 of 7
Views: 552
Shortcut
Quote Reply
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)
SandraR's avatar
Feb 17, 2008, 10:48 AM
Post #5 of 7
Views: 546
Shortcut
Quote Reply
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 (17298 posts)
Andy's avatar
Feb 17, 2008, 11:20 AM
Post #6 of 7
Views: 547
Shortcut
Quote Reply
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

IMPORTANT: I've now moved to ultranerds.co.uk, and the .com will no longer work!
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package (plugins total "value" $3,325 & rising, for just $350)| GLinks ULTRA Package PRO (plugins total "value" $5,625 & rising, for just $500)
Support Forum | Links SQL Plugins | DMOZ Dumps | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Compare our different Plugin packages *new* Free CSS Templates
Feb 17, 2008, 11:29 AM
SandraR
User (424 posts)
SandraR's avatar
Feb 17, 2008, 11:29 AM
Post #7 of 7
Views: 543
Shortcut
Quote Reply
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