Mehuge
asked on
Understanding <p> margin behaviour in ie/firefox/opera
This code displays a pink box:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
html, body { margin: 0; }
.frame { width:50%; height: 50%; position: absolute; }
.left { left: 0%; }
.right { left: 50%; }
.top { top: 0%; }
.bottom { top: 50%; }
</style>
</head>
<body>
<div class="frame top left" style="background-color:gr
<div style="height:100%;width:1
</div>
</div>
</body>
</html>
However when I add a <p> element inside the pink box, Firefox and Opera displays a green bar but IE doesnt. Opera/Firefox also displays the pink box, still the same height but now ending further down the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
html, body { margin: 0; }
.frame { width:50%; height: 50%; position: absolute; }
.left { left: 0%; }
.right { left: 50%; }
.top { top: 0%; }
.bottom { top: 50%; }
</style>
</head>
<body>
<div class="frame top left" style="background-color:gr
<div style="height:100%;width:1
<p>hello</p>
</div>
</div>
</body>
</html>
Just trying to understand the logic of whats going on. I can see that IE is collapsing the top margin of the initial p element, and firefox/opera isnt, but why isnt that margin applied to the inner div (the pink one) pushing the p down a line inside the pink div? The margin has pushed the pink div down a line, which I didnt expect.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
html, body { margin: 0; }
.frame { width:50%; height: 50%; position: absolute; }
.left { left: 0%; }
.right { left: 50%; }
.top { top: 0%; }
.bottom { top: 50%; }
</style>
</head>
<body>
<div class="frame top left" style="background-color:gr
<div style="height:100%;width:1
</div>
</div>
</body>
</html>
However when I add a <p> element inside the pink box, Firefox and Opera displays a green bar but IE doesnt. Opera/Firefox also displays the pink box, still the same height but now ending further down the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
html, body { margin: 0; }
.frame { width:50%; height: 50%; position: absolute; }
.left { left: 0%; }
.right { left: 50%; }
.top { top: 0%; }
.bottom { top: 50%; }
</style>
</head>
<body>
<div class="frame top left" style="background-color:gr
<div style="height:100%;width:1
<p>hello</p>
</div>
</div>
</body>
</html>
Just trying to understand the logic of whats going on. I can see that IE is collapsing the top margin of the initial p element, and firefox/opera isnt, but why isnt that margin applied to the inner div (the pink one) pushing the p down a line inside the pink div? The margin has pushed the pink div down a line, which I didnt expect.
Thanks
Last Comment
Hi, in my opinion, what happens is this:
In ".../firefox/res/html.css"
This margin will collapse with the margin top (even if it's 0) of the pink div (as the two margins "touch", without e.g. a border to keep them apart...), the 1em margin top becomes the common margin top (in fact, the margin of the pink parent div!). Giving the div a border would make FF behave like IE6 (no border merging/collapsing), e.g.
See a very similar example here: (the second example - "Collapsing Margins Between Parent and Child Elements"):
http://reference.sitepoint.com/css/collapsingmargins
Quote:
"The 40px margin-top on the p element effectively becomes the top margin of the div element, and pushes the div down the page by 40px, leaving the p element nesting snugly at the top."
(Second paragraph below "Figure 2")
BTW, on a side note, giving html and body a 100% height will let IE6 expand the parent div like FF does, e.g.
html, body { margin: 0; height:100%; }
In ".../firefox/res/html.css"
This margin will collapse with the margin top (even if it's 0) of the pink div (as the two margins "touch", without e.g. a border to keep them apart...), the 1em margin top becomes the common margin top (in fact, the margin of the pink parent div!). Giving the div a border would make FF behave like IE6 (no border merging/collapsing), e.g.
See a very similar example here: (the second example - "Collapsing Margins Between Parent and Child Elements"):
http://reference.sitepoint.com/css/collapsingmargins
Quote:
"The 40px margin-top on the p element effectively becomes the top margin of the div element, and pushes the div down the page by 40px, leaving the p element nesting snugly at the top."
(Second paragraph below "Figure 2")
BTW, on a side note, giving html and body a 100% height will let IE6 expand the parent div like FF does, e.g.
html, body { margin: 0; height:100%; }
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
style this first in CSS --
P { margin:0px; padding:0px; }
that will reduce all browsers to the same state, no < P > padding or margins. They should all render the same, if not, there is a bug, as all browsersshould respect 0 padding / margins of any HTML element.
P { margin:0px; padding:0px; }
that will reduce all browsers to the same state, no < P > padding or margins. They should all render the same, if not, there is a bug, as all browsersshould respect 0 padding / margins of any HTML element.
and I meant to add, then increase each property one pixel at a time, NOT together, to see where the browsers diverge. Interesting and educational !
@TName: How many time has EE eaten your tags in the text area? For me it happens daily. Where could we go to make the suggestion that they translate wickets into double brackets or something else easy to implement and understand? Grrmphh, ~Ray
@Ray_Paseur:
I've been fairly inactive for a few months, and I cannot remember having had this problem before - the editor wasn't eating my tags then...
BTW, just found this: https://www.experts-exchange.com/questions/23554272/Comment-box-skips-some-words-and-then-alters-the-rest-of-the-comment.html
I've been fairly inactive for a few months, and I cannot remember having had this problem before - the editor wasn't eating my tags then...
BTW, just found this: https://www.experts-exchange.com/questions/23554272/Comment-box-skips-some-words-and-then-alters-the-rest-of-the-comment.html
ASKER
Hey. Thanks for all the replies. Just digesting them. Will post back later.
@TName: Roger that. The editor has definitely changed, probably this month. It would seem feasible to take the textarea input intact and just turn it all into htmlentities() before writing it to the screen. I'll post over on that link you sent. Thanks! ~Ray
ASKER
Thanks TName for your wonderful explanation and the link.
CSS
Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.
43K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
What you are seeing is the unstyled "default" behavior differences between these browsers. If you style the you will gain complete control.
Best, ~Ray