Search Form Alignment

Hey everyone,

I'm trying to position a custom search form with a background in a website I'm developing. When I do, it looks great in Firefox, but in IE it throws off the tables.

Screenshot

CSS:

}
.search_field    {
    border-width: 0px;
    background-image: url(images/image_10.png);
    background-repeat: no-repeat;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    width: 340px;
    height: 31px;
    padding-top: 8px;
    padding-right: 40px;
    padding-bottom: 0px;
    padding-left: 65px;

Code (markup):

Form:

    <form action="search.php" name="search" method="GET">
            <input type="text" name="query" id="query" class="search_field" style='width:235px;height:23px'>	
            <input type="hidden" name="search" value="1">
          </form>

Code (markup):

Does anybody have any ideas how to fix this?


P.S, please no comments about the disadvantages of tables and why I shouldn't use them, I just need to get this issue fixed. Thanks.

 

You could try widening the area where your search form is and moving the buttons a little. The problem looks as though the proximity of the buttons is forcing the search box up.

Move things around and see what happens...Good luck!

 

the problem maybe on the form element style

<style>
form
{
	margin: 0;
	padding: 0;
}
</style>

HTML:

i hope it fix

 

That worked perfectly for IE8, but the problem still persists for IE7 and IE6. Any ideas on how to fix it?

IE7 screenshot: http://i41.tinypic.com/2ihrvw4.png

 

*bump*

 

are you using margin? if yes add this to the style float:left;display:inline;

it's hard to say without seeing the code

 

Create an "if" condition for IE and then increase the margin top for that search form?

 

form
{
    margin: 0;
    padding: 0;
}
.search_field    {
    border-width: 0px;
    width: 340px;
    height: 31px;
    background-image: url(images/image_10.png);
    background-repeat: no-repeat;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    padding-top: 8px;
    padding-right: 40px;
    padding-bottom: 0px;
    padding-left: 65px; 
}

Code (markup):

This did the trick. I had to put the height/width at the top of the CSS (I guess IE 6/7 didn't register it) and set the form margins and padding to "0". Thanks guys.