Image in place in Firefox, out of place in IE.

Want it directly above a text box, but IE skips a line or 2.

[Perfection]

I'm trying to position an image that says "Enter your text here" directly above a text box. I want the bottom of the image to be nearly flush with the top border of the text box.

In Firefox, this is working perfectly.
In IE, there is almost like a paragraph break sized space between the image and the text box.

Here's the code:

<img src="image.gif">
<form action="<?= $_SERVER['REQUEST_URI']?>" method="post">
<input id="searchbox" type="text" name="search" value="<?= $keywords?>"/>
<input type="submit" value="Search" class="searchbutton"/>
</form>

I noticed that if I put the image html inside the form html, it actually ends up looking perfect in IE. This is what I mean:

<form action="<?= $_SERVER['REQUEST_URI']?>" method="post">
<img src="image.gif">
<input id="searchbox" type="text" name="search" value="<?= $keywords?>"/>
<input type="submit" value="Search" class="searchbutton"/>
</form>

However, this does not validate.

So, any help on getting this to work correctly would be greatly appreciated. Thanks.

[tedster]

This sounds like a case of different browser default margins on the elements. Many people intentially start their css files with * {margin:0} just to be sure they've zeroed out any default margins across all browsers.

Have you tried giving the form a zero margin-top, and the image a zero margin-bottom?

[Perfection]

tedster, I tried setting the image margin to zero, and the text box margin to 0, and it didn't make a difference. But then I tried setting the default to 0... and that worked!

Only problem now is I need to go back and set margins for everything I didn't set margins for (which is nearly everything). I knew I should have done that from the beginning. =)

Thanks a ton for the help though.

[Perfection]

Actually, never mind. Setting the box/image margins to 0 DID work.

Thanks again.

[Drag_Racer]

IE puts a 1em top margin on the form tag

put this in your styles

form { margin:0; }