X-Cart forums

[cotc2001]

Ok its sunday and I have got brain drain.

What im trying to do is align two differnent forms with one drop down field in them next to each other on the same line.

If you look at http://www.justhom.com and see "choose a size" OR "choose a range" you will see that they are aligned correctly

it works but im trying to make it so that it is valid html which at the moment it's not

this is the code

    <table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
	<form name="form_sizes" method="post" action="sizes.php">
	<td width="90%" align="right" valign="middle">
	<select name="size_variant" onchange="if (this.value !== '0' )(document.location.href='http://www.justhom.com/sizes.php?size='+this.value)">
	<option value="0">Choose your size</option>
	<option value="w30" {if $size_xx=='w30'}selected{/if}>waist 30 (XS)</option>
	<option value="w32" {if $size_xx=='w32'}selected{/if}>waist 32 (S)</option>
	<option value="w34" {if $size_xx=='w34'}selected{/if}>waist 34 (M)</option>
	<option value="w36" {if $size_xx=='w36'}selected{/if}>waist 36 (L)</option>
	<option value="w38" {if $size_xx=='w38'}selected{/if}>waist 38 (XL)</option>
	<option value="w40" {if $size_xx=='w40'}selected{/if}>waist 40 (XXL)</option>
	<option value="c38" {if $size_xx=='c38'}selected{/if}>chest 38 (XS)</option>
	<option value="c40" {if $size_xx=='c40'}selected{/if}>chest 40 (S)</option>
	<option value="c42" {if $size_xx=='c42'}selected{/if}>chest 42 (M)</option>
	<option value="c44" {if $size_xx=='c44'}selected{/if}>chest 44 (L)</option>
	<option value="c46" {if $size_xx=='c46'}selected{/if}>chest 46 (XL)</option>
	<option value="c48" {if $size_xx=='c48'}selected{/if}>chest 48 (XXL)</option>
	</select>
	OR
	</td>
	</form>
	<td width="0" align="right">
	<form name="form_manuf" method="get" action="manufacturers.php" style="margin-bottom:0;"> 
	<select name="manufacturerid" onChange="document.form_manuf.submit()"> 
	<option value="0" selected>Choose a Range</option> 
	{section name=mid loop=$manufacturers_menu} 
	<option value="{$manufacturers_menu[mid].manufacturerid}" {if $manufacturerid==$manufacturers_menu[mid].manufacturerid} selected {/if}>{$manufacturers_menu[mid].manufacturer}</option> 
	{/section} 
	</select>
	</form>
 	</td>
  </tr>
</table>

As you can see the first part puts the form before the opening TD which is not correct (validation wise) but if I put it after the first <TD> then it throws the alingments of the forms out of sync and places one on the same line but higher than the other.

I know i've worked this out before (i think it was with CSS) but can't remember for the life of me how I did it.

Anyone got any clues??? im just working through the validation step by step and im stuck at this point

[Inner Eye]

I had the same problem. I don't know why this is, but if you change valign="middle" to "top" on both TD's, it will line up.