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

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

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);
 
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.
 
Joined
May 20, 2010
Messages
4,038
You are welcome. If we solved your problem, please mark this thread as SOLVED.
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

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 807,865 other people just like you!

Latest posts

Members online

Top