form not in right possition in IE7

0ne

11-25-2008, 05:15 PM

Here is the 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?

queirdo

11-25-2008, 10:41 PM

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

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

Excavator

11-25-2008, 11:57 PM

Hello One,
Give this a quick look <!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>
</div>
</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.