Forms in IE - Why is the Search button above everything else?

skcin7

11-29-2009, 02:16 PM

I am designing a form on my website and I can't seem to figure out why the Search button is aligned above everything else. I want the search button to be aligned evenly with the text box and the drop-down box but for some reason it is aligned above everything else. Here is a picture of what I am talking about:

http://www.nicholas-morgan.com/images/misc/formproblem.png
Here is the code for it: (it's just a simple form)

<form method="get" action="search.php">
<input type="text" name="term" style="font-size: 10px;">
<select name="site" style="font-size:10px;">
<option value="">VGDB</option>
<option value="ebay">eBay</option>
<option value="amazon">Amazon</option>
</select>
<button style="font-size:10px;">Search</button>
</form>

I tried to fix the problem myself but each time I made a change it made the buttom look bad in Firefox. Does anybody know good solutions to this problem? Thanks in advance for any help!

Excavator

11-29-2009, 04:45 PM

Hello skcin7,
I think your looking at a browsers default margin. Try using a CSS reset like this bit highlighted in red - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
height: 400px;
width: 800px;
margin: 30px auto;
background: #999;
font-size: 0.8em;
}
</style>
</head>
<body>
<div id="container">
<form method="get" action="search.php">
<input type="text" name="term" style="font-size: 10px;">
<select name="site" style="font-size:10px;">
<option value="">VGDB</option>
<option value="ebay">eBay</option>
<option value="amazon">Amazon</option>
</select>
<button style="font-size:10px;">Search</button>
</form>
</div>
</body>
</html>

Once you reset the defaults that can differ from browser to browser, you can specify your own. Have a look at this page about resets. (http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/)

skcin7

11-29-2009, 06:03 PM

HA! I got it by doing something similar to what you did - i just messed around with the margin and border attributes. Thanks, I wouldn't have thought of that if not for your post! :thumbsup: