Jump to content


Photo

textfield alignment problem


  • Please log in to reply
4 replies to this topic

#1 demon_athens

demon_athens
  • Members
  • PipPipPip
  • Advanced Member
  • 68 posts
  • LocationPiraeus

Posted 07 April 2006 - 06:01 PM

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)

<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>

and the css

.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;
}

any ideas what goes wrong with this simple textfield alignment by height in Internet Explorer? I have IE 6.0+
May the Force be with you...

#2 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 07 April 2006 - 06:36 PM

Simple. IE doesn't support vertical-alignment, most likely. Why? Because IE is bad with CSS.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#3 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 07 April 2006 - 07:04 PM

[!--quoteo(post=362608:date=Apr 7 2006, 02:36 PM:name=moberemk)--][div class=\'quotetop\']QUOTE(moberemk @ Apr 7 2006, 02:36 PM) View Post[/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.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#4 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 07 April 2006 - 08:27 PM

Sorry if I said it in the wrong way. What I meant to say was that I thought that maybe IE didn't support it, given how often that seems to happen.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#5 demon_athens

demon_athens
  • Members
  • PipPipPip
  • Advanced Member
  • 68 posts
  • LocationPiraeus

Posted 07 April 2006 - 09:18 PM

THANK YOUUUUuu obsidian! Works great!! game over at lastttttt. Come to greece to buy you a greek coffee when ever you want!
May the Force be with you...




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users