Simplest way to beat the 'margin' issue across all browsers is to
utilize a CSS reset stylesheet.
For instance, the HTML5 CSS reset stylesheet
<http://html5doctor.com/html-5-reset-stylesheet/> from HTML5 Doctor is a
favorite of mine.
It zeroes out all the margins and padding for most all block level and
inline level elements and even defines all HTML5 block level elements as
such, so older browsers may utilize them as functional layout elements.
You can call this file at the top of your CSS file or <script> block
using @import "reset.css"; and presto! instant cross browser formatting
splendor.
Hope this helps,
--
Brandtley McMinn - Creative Director
Gigglebox Studios XD
[email protected]
512.406.1666
On 6/24/2010 2:31 PM, DebCV wrote:
You failed to state that .container should have no margin.
I have added some content that hopefully will make this clearer...
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'>
<html>
<head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
.container {
background: black;
color: white;
margin: 0px;
padding: 0px;
}
.has-margin {
margin-top: 100px;
background: red;
}
</style>
</head>
<body>
<div class="container">
<!-- now black space has no top margin but red space does
--> Black
<div class="has-margin"> test has-margin and inherits color
from black space</div>
</div>
<div class="has-margin"> second has marging outside of
container test has-margin</div>
</body>
</html>
On May 3, 10:47 am, "David J. Hamilton"<[email protected]> wrote:
Hello All,
I'm confused about how top-margin works in a block formatting context. In the
attached file there is a DIV ('has-margin') inside of another DIV ('container').
The top content edge of has-margin is aligned with the top content edge of
'container'. This is not what I expect: I expect the top outer (i.e. margin)
edge of 'has-margin' to align with 'container'.
If one views the attached file in either Firefox or Chrome, one sees the margin
of 'has-margin' "pushes" 'container' down, rather than creating space within
'container'. This creates a white strip at the top of the page that is
eliminated by removing the margin.
There are plenty of ways to get the desired effect: e.g. if 'has-margin' is set
to absolute position with top: 0px this aligns its top margin edge with the top
content edge of 'container', but I want to understand why the example doesn't
work as I expect.
The w3c page on this[1] says
"In a block formatting context, boxes are laid out one after the other,
vertically, beginning at the top of a containing block."
which seems ambiguous to me. Can somebody explain to me what is going on in my
example?
Thank you in advance,
--
med vänlig hälsning
David JH
[1]http://www.w3.org/TR/CSS2/visuren.html#block-formatting
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
margin.html
< 1KViewDownload
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
