By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,759 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

Valign giving me trouble in IE

P: 73
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:

Expand|Select|Wrap|Line Numbers
  1. <table cellpadding="0" cellspacing="0" width="300px">
  2. <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>
  3. <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>
  4. <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>
  5. </table>
  6.  
The valign bit is marked with *******
Mar 8 '08 #1
Share this Question
Share on Google+
6 Replies


harshmaul
Expert 100+
P: 490
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:

Expand|Select|Wrap|Line Numbers
  1. <table cellpadding="0" cellspacing="0" width="300px">
  2. <tr>
  3.    <td height="60px">
  4.       <a href="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('create','','images/layout/create_o.gif',1)">
  5.          <img src="images/layout/create.gif" name="create" width="310" height="55" border="0" id="create" alt="" />
  6.       </a>
  7.    </td>
  8. </tr>
  9. <tr>
  10.    <td height="60px">
  11.       <a href="///" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('browse','','images/layout/browse_o.gif',1)">
  12.          <img src="images/layout/browse.gif" name="browse" width="310" height="55" border="0" id="browse" alt="" />
  13.       </a>
  14.    </td>
  15. </tr>
  16. <tr>
  17.    <td valign="middle" class="select">
  18.       <form action="#" method="post">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  19.          <select>
  20.             <option name="select" value="select">Specify your search...</option>
  21.             <option name="2D_Graphic_Designers">2D Graphic Designers</option>
  22.             <option name="2D_Graphic_Artists">2D Graphic Artists</option>
  23.             <option name="3D_Graphic_Designers">3D Graphic Designers</option>
  24.             <option name="3D_Graphic_Artists">3D Graphic Artists</option>
  25.             <option name="Website_Coders">Website Designers</option>
  26.             <option name="Website Coders">Website Coders</option>
  27.             <option name="Animators">Animators</option>
  28.             <option name="Programmers">Programmers</option>
  29.          </select>&nbsp;&nbsp;
  30.          <input type="submit" value="Go" />
  31.       </form>
  32.    </td>
  33. </tr>
  34. </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.
Mar 8 '08 #2

P: 73
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.
Mar 9 '08 #3

P: 73
Any ideas on how to fix this?
Mar 10 '08 #4

harshmaul
Expert 100+
P: 490
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('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 class="select" style="vertical-align:middle; height:55px;">
<form style="border:1px solid #ff0000; padding:0px;margin:0px;" 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>[/HTML]
Mar 10 '08 #5

P: 73
Ah Great, Thanks a lot it works nicely now. Good to know why it wasn't working as well.
Mar 10 '08 #6

harshmaul
Expert 100+
P: 490
no problems mate! glad i could be of assistance!
Mar 10 '08 #7

Post your reply

Sign in to post your reply or Sign up for a free account.