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:

Here is the code for it: (it's just a simple form)

Code:

<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 -

Code:

<!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>
    <!--end container--></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.

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!