Forum Moderators: not2easy
[pre]
<div>
<p>Hello World!</p>
<p>Goodbye Moon!</p>
</div>
[/pre]In IE, the paragraphs are at the top of the page, but in FF, the browser puts a space in. It doesn't collapse the paragraphs top margin into the div.
So I could:
*style all <p>'s to have 0 margin, but all paragraphs would be crammed together.
*style all <p>'s to have 0 margin and a 10pt bottom-margin to separate paragraphs, but then the last paragraph has an extra bit of space on the end, which has caused problems. Additionally, <ul>'s will still ram into paragraphs because they don't have bottom-margins to set.
How does everyone else get around this so that paragraphs behave normally inside div tags?
p {margin: 0; padding: 0 0 1em; }
or
p {margin: 0 0 1em; padding: 0}
That will give you space after each paragraph, and that space will be proportional to font size.\
You could give that last p a class that has no margin. If that's not an option, give the next block a negative margin to bring it a bit up.
And I've broken the style and html down to the most basic code, with one div and two paragraphs for testing, and it behaves the same way.
[pre]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<div>
<p>Hello world!</p>
<p>Goodbye moon!</p>
</div>
</body>
</html>[/pre]There is my exact code.
If you view in FF with the DIV, then delete the DIV and refresh, the text jumps noticably lower.
then delete the DIVYou didn't say that.
Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths.
The div has no margin, and the paragraph has roughly 15px of margin. The "maximum of the two adjoining margin widths," then, is 15px, which is what FF displays. I believe this is another case of IE presuming to know better than the designer what they had in store for their page. IE seems to be assuming that you don't want any top margin on the first paragraph in a div. That this is true in your case, or even in most cases, does not, IMO, justify making it part of the rendering engine. Far better to simply folow the specs so things are uniform and predictable, and let us code around it if we want a different result (end rant).
Regardless, you can work around this by capitalizing on another browser difference...the fact that FF supports CSS in other ways that IE doesn't. Use the :first-child pesudoclass to tell FF not to give a top margin to the first paragraph in any given div...
div > p:first-child {margin-top:0;}
Since IE doesn't support this pesudoclass, it has no effect on that browser.
cEM
<added>For real uniformity in your test page, combine drhowarddrfine's advice above (body{margin:0;}) with the code to zero out the first paragraph margin.</added>
/*
* This stylesheet resets default browser styles and defines a
* set of default styles consistent across browsers.
*/
html, body, * {
margin: 0;
padding: 0;
}:link img, :visited img, :hover img, :active img, img { border: none; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 {
font-size: 1.6em;
margin-bottom: 0.5em;
}
h2 {
font-size: 1.4em;
margin-bottom: 0.5em;
}
h3 {
font-size: 1.2em;
margin-bottom: 0.8em;
}
h4, h5, h6, p, ul, ol, address, blockquote, dl, table {
font-size: 1em;
margin-bottom: 1em;
}
ul, li { list-style-type: none; }
ol, ol li { list-style-type: decimal; }
em {
font-weight: bold;
font-style: normal;
}
strong {
font-weight: bold;
font-style: italic;
}
fieldset { border: none; }
/*
* Not really a default style, but this class is used in
* every project.
*/
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
.clear { display: inline-table; }
/* Hide from IE/Mac \*/
* html .clear { height: 1%; }
.clear { display: block; }
/* Hide from IE/Mac */
