Jump to content

textfield alignment problem


demon_athens

Recommended Posts

I am going mad... please somebody help. I just want a search form to be in a certain table with middle vertical-align

so Although this code works great in firefox, IE doesn't align the form in the middle like it should be ( vertical-align)

[code]<td class="serachbox"><form name="form1" method="post" action=""><table width="100%"  border="0" cellpadding="0" cellspacing="0">
          <tr><td width="90%" valign="middle"><div align="center"><input name="textfield" type="text" class="formbox" size="35" maxlength="20">
          </div>
            </td><td valign="middle"><div align="left"><input name="imageField" type="image" src="template/common/arrow.gif" width="15" height="10" border="0"></div></td>
        </tr></table></form></td>[/code]

and the css

[code].serachbox {
    height: 41px;
    text-align: center;
    
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000000;
    vertical-align: middle;
    background-color: #999999;
}
.formbox {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px dashed #CCCCCC;
}[/code]

any ideas what goes wrong with this simple textfield alignment by height in Internet Explorer? I have IE 6.0+
Link to comment
Share on other sites

[!--quoteo(post=362608:date=Apr 7 2006, 02:36 PM:name=moberemk)--][div class=\'quotetop\']QUOTE(moberemk @ Apr 7 2006, 02:36 PM) [snapback]362608[/snapback][/div][div class=\'quotemain\'][!--quotec--]
Simple. IE doesn't support vertical-alignment, most likely. Why? Because IE is bad with CSS.
[/quote]

ok, guys, let's at least read up on our facts before we start spouting things like this off... if you'll check a simple reference chart, vertical-align has been supported since IE 4: [a href=\"http://www.w3schools.com/css/css_reference.asp\" target=\"_blank\"]http://www.w3schools.com/css/css_reference.asp[/a]

the problem is simply that IE interprets a large margin on the bottom of a form element that forces your content UP within the table cell. if you'll add a margin: 0; padding: 0; to your form tag, you should be fine.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.