1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Search Box Position works fine in Chrome and Firefox but not in IE Please help

Discussion in 'Web Design & Development' started by mboley371, Dec 31, 2010.

Thread Status:
Not open for further replies.
Advertisement
  1. mboley371

    mboley371 Thread Starter

    Joined:
    Dec 31, 2010
    Messages:
    2
    The cursor won't line up in the center of the search box in IE, but will perfectly in Firefox and Chrome. Is there a way to define the form height and center it within the cell?

    Code:
    <form name="search_form" id="search_form" action="index.php" method="get"    padding-left:0px;">  <td width="100" background="../menu buttons/input_bg.png"> 
    <input type="text" border: 0px class="input-text" name="tag" id="tag" value="" style="width: 100px;  background-position: -14px 0px; height:37px; padding-left:0px;">
        </td>
               <td width="63" background="../menu buttons/input_bg.png"><input type="submit" class="input-button" value="Search" style="  width: 60px; height:36px;" /></td></form>
    

    Code:
    CSS
    .input-text{color:#111144; font-family:arial,tahoma,verdana; font-size:8pt;  font-weight:bold; background:url(images/search_bg.png) #FFFFFF; border:0px solid #989898;}
    
    .input-button{color:#FFFFFF; font-family:arial,tahoma,verdana; font-size:8pt; background:url(images/search_button_bg.png);
    
    
    
    
     
  2. sepala

    sepala

    Joined:
    May 20, 2010
    Messages:
    4,038
    Hi mbloley371,
    Welcome to TSG.

    Try this code

    Code:
    <html >
    <head>
    <style type="text/css">
    .input-text{color:#111144; font-family:arial,tahoma,verdana; font-size:1em;  font-weight:bold; #FFFFFF; border:1px solid #989898;}
    
    .input-button{color:#FFFFFF; font-family:arial,tahoma,verdana; font-size:1em; 
    </style>
    </head>
    
    <body>
    <form name="search_form" id="search_form" action="index.php" method="get"    padding-left:0px;"><table><tr><td width="100" background="../menu buttons/input_bg.png"> 
    <input type="text" border: 0px class="input-text" name="tag" id="tag" value="" style="width: 100px;  background-position: -14px 0px; height:20px; padding-left:0px;">
        </td>
               <td width="63" background="../menu buttons/input_bg.png"><input type="submit" class="input-button" value="Search" style="  width: 60px; height:25px;" /></td></tr></table></form>
    
    </body>
    </html>
    (In this code I have removed background image in CSS, because I don't have any matching images, so you can add them.)

    In your code you have missed <table> and <tr> tags. I have reduced your text box and button size to make it OK. Rather than that, I changed your font size from "pt" to "em". I checked this corrected code from IE, Firefox and Google Crome and it woks fine.
     
  3. mboley371

    mboley371 Thread Starter

    Joined:
    Dec 31, 2010
    Messages:
    2
    Thanks
     
  4. sepala

    sepala

    Joined:
    May 20, 2010
    Messages:
    4,038
    You are welcome. If we solved your problem, please mark this thread as SOLVED.
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Similar Threads - Search Position works
  1. JDLinn
    Replies:
    4
    Views:
    321
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/971820

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice