I created one div with three different rules. One rule is position:relative, rule 2 is position:absolute and the third rule is no positioning. I gave it a top:20px left20px and I noticed that the absolute position did not move as far than the relative even though they both have the same value of top and left. So all i did was change the id in the div to one of the three rules to see how it would perform. I dont get why it moves this way. can you explain?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <style type="text/css"> #position1 { position:relative; width:50px; height:50px; background-color:red; left:20px; top:20px;
You haven't taken into account the browsers default stylesheet - which adds about 20 pixels to the relative and non-positioned elements. The absolutely positioned element is not affected by the browser because its position is absolute ;)
interesting setup, I tried it as well, and looked at it using Firebug. without the * {margin: 0; padding: 0;} specified, Firebug shows an 8px space around the red block, IE7 also shows that same space.
specifying * {margin: 0; padding: 0;} eliminates the space around the red block, as expected.
I guess the thing that this shows us is that HTML elements have unspecified property values that are not immediately evident and that you as HTML page author must find out what these are and how they will affect your page layout in the various browsers in use today. another reason CSS resets like * {margin: 0; padding: 0;} are used, to eliminate that variability.
HTML doesn't have any inherent properties - it's the browsers that applies extra styling based on arbitrary conventions to allow unstyled documents to be easily readable. That's why many developers apply a reset stylesheet (as used by Eric Myer). Without any reset you'll see subtly different styles applied by Firefox, Safari, IE, Opera and so on. The kind of reset you choose to use is down to experience and preference - I for one don't use the Eric Myer reset as I don't mind some of the browser styling, so I prefer a simplified reset. But while you discover your preference I would recommend applying the *{margin:0;padding:0;} reset rule.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
#position1
{
position:relative;
width:50px;
height:50px;
background-color:red;
left:20px;
top:20px;
}
#position2
{
position:absolute;
width:50px;
height:50px;
background-color:red;
top:20px;
left:20px;
}
#regular
{
width:50px;
height:50px;
background-color:red;
}
</style>
<head>
</head>
<body>
<div id="regular">
</div>
</body>
</html>
Add
*{margin:0;
padding:0;
}
to your style sheet and have another look.
without the * {margin: 0; padding: 0;} specified, Firebug shows an 8px space
around the red block, IE7 also shows that same space.
specifying * {margin: 0; padding: 0;} eliminates the space around the red block,
as expected.
I guess the thing that this shows us is that HTML elements have unspecified property
values that are not immediately evident and that you as HTML page author must find
out what these are and how they will affect your page layout in the various browsers
in use today. another reason CSS resets like * {margin: 0; padding: 0;} are used,
to eliminate that variability.
Al
The kind of reset you choose to use is down to experience and preference - I for one don't use the Eric Myer reset as I don't mind some of the browser styling, so I prefer a simplified reset. But while you discover your preference I would recommend applying the *{margin:0;padding:0;} reset rule.