vertical text centering of <input type="text">

**TryLord** · 20 August, 2009, 11:23 AM

hello, i'm trying to create a template for glype and i'm stuck...i need to vertically center the text where the URL of the visit site goes and i can't find a way of doing that without messing out my layout or something else....

HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><!--[site_name]--></title>
<meta name="description" content="<!--[meta_description]-->">
<meta name="keywords" content="<!--[meta_keywords]-->">
<link rel="stylesheet" type="text/css" href="themes/dorange/style.css" media="screen" />
<?php echo injectionJS(); /* Javascript for redirection direct to proxified pages */ ?>
<script type="text/javascript">
window.addDomReadyFunc(function() {
   document.getElementById('options').style.display = 'none';
   document.getElementById('input').focus();
});
disableOverride();
</script>
</head>

<body>
<table align="center" width="650" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td colspan="4" class="header"></td>
 </tr>
 <tr>
   <td class="left-bar"></td>
   <td valign="top"><div class="menu2"></div>
                    <div class="menu2-item">
                    ad
                    
                    </div>
                    <div class="menu-last"></div>
                    
                    <div class="menu"></div>
                    <div class="menu-item"><br>Link 1</div>
                    <div class="menu-item"><br>Link 2</div>
                    <div class="menu-last"></div>
   </td>
   <td valign="top"><div class="content-menu"></div>
                    <div class="content-center">
                    
                    <table align="center" width="400" height="400">
                    <tr>
                    <td valign="top">
                         Content
                      
                     <problem>
                      <form action="includes/process.php?action=update" method="post" onSubmit="return updateLocation(this);" class="form">
                      <table align="center" width="350" height="50">
                      <tr>
                        <td><input type="text" name="u" id="input" class="textbox" value="www.google.com"></td>
                        <td><input type="image" value="Visit" class="button" src="themes/dorange/images/button.jpg"></td>
                        </tr>
                        </table>
                      
            [<a style="cursor:pointer;" onClick="document.getElementById('options').style.display = (document.getElementById('options').style.display=='none'?'':'none')">options</a>]
            <ul id="options">
<?php foreach ( $toShow as $option ) echo <<<HTML
               <li>
                  <input type="checkbox" name="{$option['name']}" id="{$option['name']}"{$option['checked']}>
                  <label for="{$option['name']}" class="tooltip" onmouseover="tooltip('{$option['escaped_desc']}')" onmouseout="exit();">{$option['title']}</label>
               </li>
HTML;
?>
            </ul>
            <br style="clear: both;">
         
         </form>
                      </problem>
                    </td>
                    </tr>
                    </table>
                    
                    </div>
                    <div class="content-last"></div>
   </td>
   <td class="right-bar"></td>
 </tr>
</table>
<table align="center" width="650" border="0" cellpadding="0" cellspacing="0">
 <tr>
   <td class="left-bar"></td>
   <td valign="top"><div class="footer-menu"></div>
                    <div class="footer-center">
                    <table align="center" width="580">
                    <tr>
                    <td align="center">
                    &copy; 2008 <a href="index.php"><!--[site_name]--></a> : Powered by <a href="http://www.glype.com/">glype</a> <!--[version]-->
                    </td>
                    </tr>
                    </table>
                    </div>
                    <div class="footer-last"></div>
   </td>
   <td class="right-bar"></td>
 </tr>
 <tr>
   <td colspan="3" class="page-last"></td>
 </tr>
</table>
</body>
</html>

CSS

Code:

@charset "utf-8";
/* CSS Document */
body {background-color: #000;}

.header {width:650px;
         height:170px;
         background-image:url(images/img_01.gif);
         }
         
.left-bar {background-image:url(images/img_02.gif);
           width:23px;
           height:34px;
           background-repeat:repeat-y;
           }
           
.menu {background-image:url(images/img_03.gif);
       background-repeat:no-repeat;
       width:182px;
       height:34px;
      }
      
.menu-item {background-image: url(images/img_07.gif);
            background-repeat:no-repeat;
            width:182px;
            height:46px;
            text-indent:50px;
            line-height:15px;
            text-align:center;
            }
            
.menu-last {background:url(images/img_13.gif);
            background-repeat:no-repeat;
            height:21px;
            width:182px;
           }
           
.menu2 {background-image:url(images/img_03_2.jpg);
       background-repeat:no-repeat;
       width:182px;
       height:44px;
      }
      
.menu2-item {background-image:url(images/img_10.jpg);
       background-repeat: repeat-y;
       width:182px;
       height:630px;
       text-align:center;
      }
      
.content-menu {background-image:url(images/img_04.gif);
               background-repeat: no-repeat;
               width:423px;
               height:51px;
               }
               
.content-center {background:url(images/img_11.gif);
                 background-repeat:repeat-y;
                 height:770px;
                 vertical-align:top;
                 text-align:center;
                }
                
.content-last {background:url(images/img_14.gif);
               background-repeat:repeat-y;
               height:21px;
              }
               
.right-bar {background-image:url(images/img_05.gif);
           width:22px;
           height:34px;
           background-repeat:repeat-y;
           }
           
.footer-menu {background:url(images/img_15.gif);
              height:50px;
              width:605px;
             }
             
.footer-center {background:url(images/img_16.jpg);
                width:605px;
                background-repeat:repeat-y;
                height:200px;
               }

.footer-last {background:url(images/img_19.jpg);
              height:19px;
              width:605px;
             }
               
.page-last {background:url(images/img_18.jpg);
              height:21px;
              width:650px;
             }
             
.form {
       }
       
.textbox {height:48px;
          width:298px;
          background-image:url(images/bar.jpg);
          border:0px;
          background-repeat:no-repeat;
          text-indent:10px;
         }
         
.button {
        }

#optionsF {
   list-style-type: none;
   width: 500px;
   margin: 10px; padding: 0;
}
#optionsF li { 
   float: left;
   width: 240px;
   border-left: 5px solid #ccc;
}

The problem starts from the <form> tag, i even wrote <problem> tags for easier search....

This is the piece of the code that's bugging me

Code:

 <problem>
                      <form action="includes/process.php?action=update" method="post" onSubmit="return updateLocation(this);" class="form">
                      <table align="center" width="350" height="50">
                      <tr>
                        <td><input type="text" name="u" id="input" class="textbox" value="www.google.com"></td>
                        <td><input type="image" value="Visit" class="button" src="themes/dorange/images/button.jpg"></td>
                        </tr>
                        </table>
                      
            [<a style="cursor:pointer;" onClick="document.getElementById('options').style.display = (document.getElementById('options').style.display=='none'?'':'none')">options</a>]
            <ul id="options">
<?php foreach ( $toShow as $option ) echo <<<HTML
               <li>
                  <input type="checkbox" name="{$option['name']}" id="{$option['name']}"{$option['checked']}>
                  <label for="{$option['name']}" class="tooltip" onmouseover="tooltip('{$option['escaped_desc']}')" onmouseout="exit();">{$option['title']}</label>
               </li>
HTML;
?>
            </ul>
            <br style="clear: both;">
         
         </form>
                      </problem>

input where class is textbox...i want the text to be centered vertically....

i had no luck in doing that, well i did in Opera not in IE or FF...

padding moves everything around that's not the answer, it's probably cause of my poor HTML knowledge that it does that....

anyway vertical-align is useless i don't know why it even exists...

is there anything else that i don't know about?

**TryLord** · 20 August, 2009, 16:14 PM

nevermind gals/guys i found a way to do it, after all i used padding and then i just changed background color to the text input box in order to hide the extra white space that shows up in FF & IE....