Hi
I would like to move my website down say 100px as I would like to change my background into something that looks half decent.
I have tried puting Margin-top: 100px everywhere, but no go.
Thanks
Did you try with a lowercase M?
Yes indeed… could be the lower-case… This ought to do it - perhaps unless you have some absolute positioned elements at the top of the page?
body {
margin-top: 100px;
}
So did this work?
something like this perhaps?
<style type="text/css>"
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url('bg.jpg');
}
#wrapper {
width: 80%;
margin: 100px auto 0px auto;
padding: 20px 20px 20px 20px;
}
</style>
<body>
<div id="wrapper">
<!-- all your page content in here -->
</div>
</body>
Margins collapse. Whoever thought that one up needs to pay for some of my therapy sessions.
I’d use body padding. Padding never screws with my mind, man.
What do you mean?
Margins work just fine for me 
Take a look at your code in firebug (or dragonfly or chrome dev or whatever floats your boat).
That 100px top margin you put on #wrapper? It’s not on the wrapper anymore. It’s collapsed up to the body now.
If visually you get the same effect you want and realise that the body (or the html element) is now holding the margin, that’s cool. But if you think the wrapper is holding the margin then later on when you need to mess with that area it’ll bite your head off and spit it out in the garbage can and then you’ll be ready to rip the head off the person who thought margin collapse was a good thing
and then you’ll stomp on their head and feed what’s left to the dogs and then drag it back out and stomp on it some more
I’m actually a non-violent person, don’t get me wrong.
…ok that’s a lie, I’m pretty violent, but I’m not the only one!
Not sure what you’re on about (:
The wrapper containing the text is centered and starts 100px below the top of the <body> in IE9 and Chrome and I would imagine just about every other browser.
<!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></title>
<style type="text/css">
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url('bg.jpg');
}
#wrapper {
width: 80%;
margin: 100px auto 0px auto;
padding: 20px 20px 20px 20px;
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante
turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc
posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede
voluptas libero, sed mauris tincidunt, ultrices praesent. Iaculis vivamus sapien id, lorem ante aliquet, commodo pede imperdiet
congue, dictum integer eget sed orci.
</div>
</body>
</html>
Not sure what you’re on about
Margin collapse
margin collapse
margin collapse
margin collapse
Okay, most of those aren’t addressing the top margin of a child inside a container (which is where it hits people the worst, since it’s not the most common thing to appear in the search engines).
However you can see it yourself in my example.
In this example you can see the margins have collapsed to a different element, but if you add a border to the body element, magically the margin goes back to the wrapper element as you would expect.
Here’s the code, based on yours but with background colours instead of images so we can all see:
<!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>Margin Collapse</title>
<style type="text/css">
html {
margin: 0;
padding: 0;
background-color: #00f; /*blue*/
}
body {
margin: 0;
padding: 0;
background-color: #f00; /*red*/
/* uncomment the line below in order to see what it looks like when margins are NOT collapsing*/
/*border-top: 1px solid #000;*/
}
#wrapper {
width: 80%;
margin: 100px auto 0;
padding: 20px;
background-color: #ff0;/*yellow*/
}
</style>
</head>
<body>
<div id="wrapper">Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede voluptas libero, sed mauris tincidunt, ultrices praesent. Iaculis vivamus sapien id, lorem ante aliquet, commodo pede imperdiet congue, dictum integer eget sed orci.
</div>
</body>
</html>
One would expect, if margins did not do weird retarded things they should not be doing, that the margins on the #wrapper element would “hold open” the body element. That is, there would be 100px of distance between the top of #wrapper and the top of body. Instead, the margins collapse up to the body element, meaning there is ZERO space between the top of #wrapper and the top of body, but instead (added blue background to the html element, who is one whose margins are not allowed to collapse according to the specs) there is a 100px gap between the top of the body element and the top of the html element.
That is, the body is now the one with the margins.
However, margin collapse is fought with borders or padding. So allow just a 1px black border to the body (the container who is getting the collapsed margins) and voila! I hate French!
Okay, viola, I like music. And suddenly you see now what you should have been able to see before: 100px of space between the top of wrapper and the top of the body (and no space between the top of the body and the top of the page/html element).
So the red colour represents where I want the background image, and I want it on the body.
There is a caveat with my example: because we’re using the body element to hold the background image, the rules in the spec say that so long as nothing is applied on the html element, the body’s background colours and images will actually get painted onto the HTML element.
This made it look like your code was working exactly the way you thought it should, which again is fine so long as you never have to play with it. If you do, then you start seeing evil in action. You got by on a blip in the spec which does not apply to any other set of elements but the body and html element.
So let’s do another one that is more likely to make a visual effect for some poor developer who hasn’t yet realised collapsed margins are about to make his/her life absolutely miserable.
margins part II: the horror continues
<!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>Margin Collapse</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
background-color: #f00; /*red*/
}
#wrapper {
width: 80%;
margin: 0 auto 0;
padding: 0 20px;
/*uncomment the line below to remove the margin collapse*/
/*padding-top: 20px;*/
background-color: #ff0;/*yellow*/
}
#wrapper p {
margin: 100px 0 0;
background-color: #0f0;/*green*/
}
</style>
</head>
<body>
<div id="wrapper">
<p>Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede voluptas libero, sed mauris tincidunt, ultrices praesent. Iaculis vivamus sapien id, lorem ante aliquet, commodo pede imperdiet congue, dictum integer eget sed orci.</p>
</div>
</body>
</html>
I’M TASTING ORANGE JUICE RIGHT AFTER BRUSHING MY TEETH AAAAAAAAAHHHHHHHHH!!!
I don’t have any problems with margins.
In the code I posted the wrapper div appears 100px below the top of the <body> and that is all I ever want to do when setting a margin like this and it works in IE7+ and the other major browsers.
So unless I start having problems with margins, I’ll continue using them like I have posted. It’s not an issue for me
In the code I posted the wrapper div appears 100px below the top of the <body>
Correction, the body appears 100px below the top of the html element who is how holding the bg image or bg colour which you originally gave the body.
Again, so long as you never have to do anything different, both techniques will look the same to everyone.
This one time, with the body and html elements. Not with any other set of boxes.
Not true.
In the code I posted before I have now added a 5px green border to the body and a 5px red border to the wrapper. The <body> is at the top of the window and the red wrapper starts 100px below the top of the <body>. And that is how I expect it to be.
I have attached a screen dump of what I get with the following code in IE9.
fwiw - I was taught that it is not correct to style the html element as you have.
<!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></title>
<style type="text/css">
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url('bg.jpg');
border: 5px solid green
}
#wrapper {
width: 80%;
margin: 100px auto 0px auto;
padding: 20px 20px 20px 20px;
border: 5px solid red;
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante
turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc
posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede
voluptas libero, sed mauris tincidunt, ultrices praesent. Iaculis vivamus sapien id, lorem ante aliquet, commodo pede imperdiet
congue, dictum integer eget sed orci.
</div>
</body>
</html>
…I have now added a 5px green border to the body …
… And that is how I expect it to be.
Vertical borders, and/or vertical padding, eliminate vertical margin collapse, yes. As my code examples above show, were you to add and remove the commented-out border code I have.
fwiw - I was taught that it is not correct to style the html element as you have.
If you mean adding the background colour separately, that was specifically to show the blip in the specs about the html element painting the background colour or image of the body if there is nothing set on the html element.
Otherwise, I also generally do not style the html element. Though I have used it as a second full-screen container for when I needed multiple background images (one on the html element, one on the body, possibly a third on some whole-page container). This was in the days before CSS3 multiple background images.
Maybe we’re talking about 2 different things here.
When the image I attached to my last post becomes visible you will see what I get and it works fine for me.
As I said, I don’t have any issues with margins.
If you do then hopefully your therapist,
will help you exorcise your margin demons.
If you do, then hopefully your therapist, that you mentioned earlier, will help you exorcise your margin demons.
My therapist is awesome. He used to work for [secret government ABC agency here] and now he’s this bearded UNIX monk living in a technological Bat Cave writing functional programs in Perl 6.
He frightens me.
When the image I attached to my last post becomes visible you will see what I get and it works fine for me.
Of course it will. You added borders. Borders stop margin collapse.
And without borders it will look fine because
…For documents whose root element is an HTML “HTML” element or an XHTML “html” element that has computed values of ‘transparent’ for ‘background-color’ and ‘none’ for ‘background-image’, user agents must instead use the computed value of the background properties from that element’s first HTML “BODY” element or XHTML “body” element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.
I don’t have any problems with margins and so it’s not an issue for me.
Margin-collapse is a real and well-documented issue. I’m glad you don’t have any problems with them, but Poes is correct in what she’s saying. Certainly many designers better than me and thee have grappled with them and will do so in the future.