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
    0ne
    0ne is offline
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    form not in right possition in IE7

    Here is the code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>test</title>
    <style>
    body {
    	margin:0px;
    	padding:0px;
    	font-size:0px;
    	}
    #header {
    	width:200px;
    	height:100px;
    	background-color:#99CC00;
    	}
    </style>
    </head>
    <body>
    <div id="header">
    <div style="padding-top:2px;">
    <form method="post" action="">
    <input name="user_name" type="text"/>
    <input type="submit" value="Login"/>
    </form>
    </div>
    </div>
    </body>
    </html>
    If you'll try it in IE7, Firefox, Chrome - you will see the defference. What is the problem?

  • #2
    New Coder
    Join Date
    Nov 2008
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    Different browsers (mostly IE) sometimes set different default values for padding, margins, alignment etc., so sometimes you need to be really specific with how you want your elements displayed.

    An easy way to figure out what's going on, is to put a visible border around your elements (just temporarily for testing).
    Code:
    #header {
    	width:200px;
    	height:100px;
    	background-color:#99CC00;
    	border:1px solid #000000;
    	}
    form {
    	border:1px solid #000000;
    }
    If you do this, you can see that the form is vertically centered by default in IE, as opposed to other browsers which align it to the top.

    You can could bump it to the top in IE by setting the form height to 100px, the same as the surrounding div. Or you could set the margin-top on the form to 0px.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello One,
    Give this a quick look
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>test</title>
    <style>
    body {
    	font: 16px "Comic Sans MS";
    	background: #CCC;
    }
    *{ /**zeros out all default margin/padding**/
    	margin:0px;
    	padding:0px;
    }
    #header {
    	width:800px;
    	height:100px;
    	margin: 20px auto; /**centers header**/
    	background-color:#99CC00;
    }
    #box {
    	width: 200px;
    	margin: 2px 0 0 0; /*sets margin in the order of top,right,bottom,left**/
    	float: right;
    }
    </style>
    </head>
    <body>
        <div id="header">
            <div id="box">
                <form method="post" action="">
                <input name="user_name" type="text"/>
                <input type="submit" value="Login"/>
                </form>
            <!--end box--></div>
        <!--end header--></div>
    </body>
    </html>
    queirdo is right, making elements stand out help while debugging but a border will add to the width and can drop a float. I find it much handier to give each div a background color when I'm trying to figure out how things are positioning, that way the widths are not affected.
    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


  •  

    Posting Permissions

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