Valign giving me trouble in IE

[Jeigh]

Hello,

I've been designing a graphic to be behind a form. So I figure the best way to do this is to make a table, use a background image for a cell and then put the form inside that. That has all worked fine I just wanted it to be in the middle as well so I used Valign="middle" . This works fine in FireFox but in IE the select form is still sitting at the top of the cell.

Thanks for any help.

Edit:

Here's the entire table:

<table cellpadding="0" cellspacing="0" width="300px">
<tr><td height="60px"><a href="<? echo "$create_link"; ?>" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('create','','images/layout/create_o.gif',1)"><img src="images/layout/create.gif" name="create" width="310" height="55" border="0" id="create" alt="" /></a></td></tr>
<tr><td height="60px"><a href="///" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('browse','','images/layout/browse_o.gif',1)"><img src="images/layout/browse.gif" name="browse" width="310" height="55" border="0" id="browse" alt="" /></a></td></tr>
<tr>********<td valign="middle" class="select"><form action="#" method="post">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select><option name="select" value="select">Specify your search...</option><option name="2D_Graphic_Designers">2D Graphic Designers</option><option name="2D_Graphic_Artists">2D Graphic Artists</option><option name="3D_Graphic_Designers">3D Graphic Designers</option><option name="3D_Graphic_Artists">3D Graphic Artists</option><option name="Website_Coders">Website Designers</option><option name="Website Coders">Website Coders</option><option name="Animators">Animators</option><option name="Programmers">Programmers</option></select>&nbsp;&nbsp;<input type="submit" value="Go" /></form></td></tr>
</table>

The valign bit is marked with *******

[harshmaul]

Hello,

I've been designing a graphic to be behind a form. So I figure the best way to do this is to make a table, use a background image for a cell and then put the form inside that. That has all worked fine I just wanted it to be in the middle as well so I used Valign="middle" . This works fine in FireFox but in IE the select form is still sitting at the top of the cell.

Thanks for any help.

Edit:

Here's the entire table:

<table cellpadding="0" cellspacing="0" width="300px">
<tr>
   <td height="60px">
      <a href="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('create','','images/layout/create_o.gif',1)">
         <img src="images/layout/create.gif" name="create" width="310" height="55" border="0" id="create" alt="" />
      </a>
   </td>
</tr>
<tr>
   <td height="60px">
      <a href="///" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('browse','','images/layout/browse_o.gif',1)">
         <img src="images/layout/browse.gif" name="browse" width="310" height="55" border="0" id="browse" alt="" />
      </a>
   </td>
</tr>
<tr>
   <td valign="middle" class="select">
      <form action="#" method="post">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <select>
            <option name="select" value="select">Specify your search...</option>
            <option name="2D_Graphic_Designers">2D Graphic Designers</option>
            <option name="2D_Graphic_Artists">2D Graphic Artists</option>
            <option name="3D_Graphic_Designers">3D Graphic Designers</option>
            <option name="3D_Graphic_Artists">3D Graphic Artists</option>
            <option name="Website_Coders">Website Designers</option>
            <option name="Website Coders">Website Coders</option>
            <option name="Animators">Animators</option>
            <option name="Programmers">Programmers</option>
         </select>&nbsp;&nbsp;
         <input type="submit" value="Go" />
      </form>
   </td>
</tr>
</table>

The valign bit is marked with *******

V align is used to align a cells contents with those cells adjacent to it or when the cell is larger than the contents,

The reason you cannot see any changes is the contents fits into the table.

let me just clarify that you understand valign is used for the Vertical Alignment.

[Jeigh]

Yeah I know it's used for Vertical Alignment. I'll give a link so it's a bit easier to see exactly what I'm trying to do:

Link

If you look at it on IE7 you will see that the 'Specify your search' (in the top right hand box on the page) is sitting at the top of the image, I want it to be in the middle. If you look in FireFox that's exactly what I want, it's right in the middle of the image.

[Jeigh]

Any ideas on how to fix this?

[harshmaul]

The form comes with some default padding. and that padding is filling up the rest of the cell, therefore not requiring that the content be aligned in the middle. set the margins for that form to 0px, and give that cell a hieght and it will work..

heres some markup to demonstrate


[HTML]<table cellpadding="0" cellspacing="0" width="300px" border="1">
<tr>
<td height="60px">
<a href="" onmouseout="MM_ swapImgRestore( )" onmouseover="MM _swapImage('cre ate','','images/layout/create_o.gif',1 )">
<img src="images/layout/create.gif" name="create" width="310" height="55" border="0" id="create" alt="" />
</a>
</td>
</tr>
<tr>
<td height="60px">
<a href="///" onmouseout="MM_ swapImgRestore( )" onmouseover="MM _swapImage('bro wse','','images/layout/browse_o.gif',1 )">
<img src="images/layout/browse.gif" name="browse" width="310" height="55" border="0" id="browse" alt="" />
</a>
</td>
</tr>
<tr>
<td class="select" style="vertical-align:middle; height:55px;">
<form style="border:1 px solid #ff0000; padding:0px;mar gin:0px;" action="#" method="post">& nbsp;&nbsp;&nbs p;&nbsp;&nbsp;& nbsp;&nbsp;&nbs p;&nbsp;&nbsp;& nbsp;&nbsp;
<select>
<option name="select" value="select"> Specify your search...</option>
<option name="2D_Graphi c_Designers">2D Graphic Designers</option>
<option name="2D_Graphi c_Artists">2D Graphic Artists</option>
<option name="3D_Graphi c_Designers">3D Graphic Designers</option>
<option name="3D_Graphi c_Artists">3D Graphic Artists</option>
<option name="Website_C oders">Website Designers</option>
<option name="Website Coders">Website Coders</option>
<option name="Animators ">Animators </option>
<option name="Programme rs">Programmers </option>
</select>&nbsp;&n bsp;
<input type="submit" value="Go" />
</form>
</td>
</tr>
</table>[/HTML]

[Jeigh]

Ah Great, Thanks a lot it works nicely now. Good to know why it wasn't working as well.

[harshmaul]

no problems mate! glad i could be of assistance!