Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts

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

    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!
    Last edited by skcin7; 11-29-2009 at 02:19 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    skcin7 (11-29-2009)

  • #3
    Regular Coder
    Join Date
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •