473,320 Members | 1,861 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

margin property for BODY

I'm real new at this, so this may be a basic question, but I want to
get off on the right foot.

I thought it would be reasonable to use the following on a page:

body {
margin: 3em;
background-color: #666;
border: red medium double;
padding: 3em;
}

I thought that it would display the red border shifted in 3em from the
outside edge .. but instead the border is stuck against the edge
(IE6). Does that mean that the 'element box' concept does not apply
to the body element? I noticed that the margin size (3em) is being
accounted for, since if I change it, everything moves over. But I
don't understand why the border is not between the margin and padding
as described by the 'box'.

I know I can get a border like that by creating a div with the same
margin, and maybe that is the correct method. But I just thought that
this seemed correct. Am I missing something? Did a lot of hunting
and couldn't find any specific info on it.

Thanks... Terry

Jul 20 '05 #1
6 2686
I guess I may have discovered the problem. Looks like even IE6 can't
do this 'right', but both Opera and Netscape 6.2 are able to do it the
way I would have expected.

Terry

On Tue, 28 Oct 2003 01:46:43 GMT, Terry <sa********@shaw.ca> wrote:
I'm real new at this, so this may be a basic question, but I want to
get off on the right foot.

I thought it would be reasonable to use the following on a page:

body {
margin: 3em;
background-color: #666;
border: red medium double;
padding: 3em;
}

I thought that it would display the red border shifted in 3em from the
outside edge .. but instead the border is stuck against the edge
(IE6). Does that mean that the 'element box' concept does not apply
to the body element? I noticed that the margin size (3em) is being
accounted for, since if I change it, everything moves over. But I
don't understand why the border is not between the margin and padding
as described by the 'box'.

I know I can get a border like that by creating a div with the same
margin, and maybe that is the correct method. But I just thought that
this seemed correct. Am I missing something? Did a lot of hunting
and couldn't find any specific info on it.

Thanks... Terry


Jul 20 '05 #2
> I know I can get a border like that by creating a div with the same
margin, and maybe that is the correct method. But I just thought that this seemed correct. Am I missing something? Did a lot of hunting
and couldn't find any specific info on it.


You need to read up on 'quirks mode' and 'DOCTYPE switching'. I
recommend that any small, impressionable children are out of earshot
when you do as it may lead you to exclamations of extreme disbelief
expressed in a forthright manner.

To cut a long story short if you have e.g. <!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"> as your DOCTYPE (or none at
all) IE6 will emulate it's broken behaviour in previous versions (yes
really!) whereas if you add the URL as in e.g. <!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> it will try to do things
properly (but fear not, it has plenty of other bugs to keep you on
your toes). There are various permutations of the DOCTYPE and
browsers which I'll leave you to read about.

Before IE6, IE had a particularly badly broken box model in that, for
example, the 'width' included the 'padding' when it should only apply
to the content itself so that is a good reason to make sure you aren't
using quirks mode. You have found another one :)

Jul 20 '05 #3
top-posting corrected: please have a look at:
http://www.xs4all.nl/~sbpoley/toppost.htm

On Tue, 28 Oct 2003 05:13:21 GMT, Terry <sa********@shaw.ca> wrote:
On Tue, 28 Oct 2003 01:46:43 GMT, Terry <sa********@shaw.ca> wrote:
I thought it would be reasonable to use the following on a page:

body {
margin: 3em;
background-color: #666;
border: red medium double;
padding: 3em;
}

I thought that it would display the red border shifted in 3em from the
outside edge .. but instead the border is stuck against the edge
(IE6).
I guess I may have discovered the problem. Looks like even IE6 can't
do this 'right', but both Opera and Netscape 6.2 are able to do it the
way I would have expected.


Not often that I spring to IE's defence, but I think this (just) comes
within the area of acceptable variation between browsers. The margin
area of a box displays the background colour of its parent element. It
is at least arguable (though not defined anywhere AFAIK) that the
topmost element can not meaningfully have a margin. And also arguable
that the topmost displayable element is BODY, though some browsers do
permit styling of HTML.

OTOH the CSS spec does include an example where margin is applied to
BODY.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #4
Graham J / 2003-10-28 10:59:
this seemed correct. Am I missing something? Did a lot of hunting
and couldn't find any specific info on it.


You need to read up on 'quirks mode' and 'DOCTYPE switching'. I


And the URL you missed to supply:
http://www.hut.fi/u/hsivonen/doctype.html

You usually want to select a totally green line from the table
presented on the page.

--
Mikko

Jul 20 '05 #5
Stephen Poley wrote:
It is at least arguable (though not defined anywhere AFAIK) that
the topmost element can not meaningfully have a margin. And also
arguable that the topmost displayable element is BODY

OTOH the CSS spec does include an example where margin is applied
to BODY.


I must say I'm confused by body margins. I think of the viewport as
the containing box for the body element, so that margin on body has no
meaning. Am I wrong to think that way?

--
Brian
follow the directions in my address to email me

Jul 20 '05 #6
Tim
Stephen Poley wrote:
It is at least arguable (though not defined anywhere AFAIK) that
the topmost element can not meaningfully have a margin. And also
arguable that the topmost displayable element is BODY

OTOH the CSS spec does include an example where margin is applied
to BODY.


Brian <us*****@julietremblay.com.invalid-remove-this-part> wrote:
I must say I'm confused by body margins. I think of the viewport as
the containing box for the body element, so that margin on body has no
meaning. Am I wrong to think that way?


Taking non-HTML as a starting point, the body is where the content of
the page goes, the page is something beyond it.

Going back to HTML, various browsers that I've played with place the
body within the page. If you use margins and padding, you get the body
with space around it, within the canvas.

Not all browsers handle this sort of thing well, so I give zero padding
and margins to HTML, and put any desired paddings and margins into the
body.

e.g. html {margin: 0; padding: 0;}
body {margin: 0; padding: 1em;}

I'd tend to agree with Stephen; as far as I always understood it, the
browser is only supposed to display what's in the body of the document
(i.e. stuff that's in the wrong place, like in the head, shouldn't show
up), so it doesn't make much sense to display anything more than it
(such as colouring the HTML element around the body element, which is
possible with some browsers).

If you want to check out how some browsers handle margins and padding
with the body or html elements, then give them each different background
colours.

--
My "from" address is totally fake. The reply-to address is real, but
may be only temporary. Reply to usenet postings in the same place as
you read the message you're replying to.
Jul 20 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Richard Barnet | last post by:
This site: http://www.westciv.com/style_master/academy/css_tutorial/properties/margin.html states that "An element does not inherit the margin property of the element which contains it."...
0
by: Urs Rothenhäusler | last post by:
Hello, I don't know why the margin-property is not rendered/interpreted (I use N7/IE6), e.g.: <table> <tr style="margin-bottom:50pt;"> <td>first column</td> </tr> <tr>
18
by: Toronto Web Designer | last post by:
I'm having trouble with the padding and margin properties. IE tends to be happier with the padding and Netscape with the margin property. So I tried this: <link href="netscape-styles.css"...
3
by: Blacksmith | last post by:
Hi, I'm a CSS noob, and I'm trying to implement a very basic layout but am having problems in certain browsers. Basically, I want a horizontally centred box with a fixed width of 750px, with a...
8
by: jaxon.bridge | last post by:
I have the following in my css sheet: body { font-family: verdana, arial, sans-serif; font-size: 14px; line-height: 16px; background-color: #7E95F7; background-repeat: repeat-y;...
4
by: tshad | last post by:
I have one cell (<td>) that I want to have a margin in to move everything away from the left border by about 10 px. The only way I can seem to do it is to add cellspacing in each of the elements...
6
by: Paul Wake | last post by:
I'm sure I'm missing something obvious, but I'd appreciate it if someone could point out why the following puts a wide margin on the top, left, and right, but not on the bottom (even when scrolled...
2
by: saeed rezaei | last post by:
how i can write some property form mycontrol that's can be expend. when i use this cod : property MyProp as integer .... .... .... end property its only add one property to my control but...
1
by: moondaddy | last post by:
I have a group of elements inside a grid and want to align them along the left side of the grid. I also want have this group centered vertically and the xaml below demonstrates the appearance want...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.