http://www.jason-storey.com/Smock-Etling/index.html This page has a simple header, body, footer layout. before i add any content the page is all good, with each section touching the other as they should with no space in between. But as soon as i go into the body div and add <p> or <h1> or any text using a tag it creates a space between the header and the body as seen in that URL......Pleas Help
1) HTML 5 for NOTHING, way to jump the gun and make sure your site doesn't work anywhere, NOT that I would even advocate HTML 5's use given that it's doing nothing more than setting the technology BACK a decade or more, undoing ALL the progress of STRICT. 2) The date is not a paragraph, why the paragraph tag around it? Whole bunch of paragraphs around non-paragraph elements in fact. (IMHO there are exactly TWO paragraphs on that page!) 3) No images off fallbacks and images for large sections of content -- an accessibility /FAIL/. The text on the right in the header particularly should NOT be an image since it prevents people from actually using that information in a practical manner. (and that absurdly narrow serif font is hard to read) 4) nonsensical gibberish heading orders and/or heading tag abuse. Lemme guess, some voodoo witch doctor SEO nimrod told you that was a good idea? I mean, you've got no H1... there are H3 and H4 around non-heading content (since there's no content UNDER them) and they aren't subsections of the h2 preceeding them... I also advise against using media="all" as well -- sending your SCREEN layout to everything isn't just bad practice, it will really piss off people if they decide to hit print... and I'd suggest axing the javascript include JUST to echo out a date as a waste of a handshake AND bandwidth. (I would HIGHLY suggest handling that server-side!) As to your layout issue, I'd suspect a margin collapse issue -- which is why usually I null margins on paragraphs and use paddings, since paddings don't collapse. Still, my advice is to throw away the DRAFT specification version, and rewrite it using SEMANTIC markup (semantic does not mean "slap headings and paragraphs around anything resembling text!) in a RECOMMENDATION doctype... Then you can axe that stupid javascript shiv bull too. (which usually causes as many layout issues as it solves!). P has a bottom margin by default -- h1 has a margin by default -- these margins are NOT consistent cross-browser, which is why many people use RESETS in their CSS and then declare when/where they want such things manually.
The p element automatically creates some space before and after itself. If you want to decrease the space, you can define it in CSS by setting margin and padding.
Note that this guy just started using CSS2.1 for the first time last week when it finally became a W3C recommendation so his views on modern technology should be totally ignored.