NICE! On Jun 24, 12:41 pm, Brandtley McMinn <[email protected]> wrote: > 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]
