Problem with header form position

Question

So I have a signup form on the top of my website and in safari/firefox it looks perfect but on ie7 for some reason it is pushed down so it does not look right. I tried removing all padding/margins on all of those elements but it still seems like there is something pushing it down when that happens. Does anyone know why this is happening. You can see it at the top of this page:

http://www.campusmediawatch.org/partners

Thanks!

Answer 1

A <form> needs to have padding & margin set to 0. Then setting the vertical alignment to center may help too. If it still doesn't work; try changing the doctype to HTML instead of XHTML, since IE uses different renderers for each doctype.

Answer 2

There are two likely cuases:

1. It's always a bit tricky to debug these issues but this could be a problem with line-height. I would try specifying an explicit line height of 1em or so to elements in the form.

2. In your case it's more likely that the submit button is causing your issue. The different web browsers render submit input tags improperly. Try hiding your submit button by styling it with display none to see if this is in fact causing your display issue in IE. If it is you can create a stylesheet specifically for IE via conditional comments and apply alternative styling to the submit tag. OR you can use absolute positioning for the submit input which should allow you to avoid resorting to a browser specific stylesheet.