Results 1 to 2 of 2

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

  1. #1
    TryLord is offline Unknown Net Builder
    Join Date
    Aug 2009
    Posts
    30
    Thanks
    14
    Thanked 5 Times in 5 Posts

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

    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?

  2. #2
    TryLord is offline Unknown Net Builder
    Join Date
    Aug 2009
    Posts
    30
    Thanks
    14
    Thanked 5 Times in 5 Posts
    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....

Similar Threads

  1. [WTB] WTB "prom dresses" text links
    By nancy7788 in forum Links
    Replies: 0
    Last Post: 22 December, 2010, 00:04 AM
  2. [WTB] WTB "prom dresses" text links
    By nancy7788 in forum Links
    Replies: 0
    Last Post: 21 December, 2010, 04:47 AM
  3. "Dofollow" & "Nofollow" Blogs ?
    By Padalda in forum Blogging
    Replies: 10
    Last Post: 4 October, 2009, 07:19 AM
  4. [WTB] Text links from "domain" related sites
    By prometheus in forum Links
    Replies: 0
    Last Post: 4 September, 2009, 19:02 PM
  5. protecting text in a form text area
    By DickTracy in forum Programming
    Replies: 2
    Last Post: 19 January, 2009, 18:03 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •