Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Cascading Style Sheets _ Negative top margin and border/background
Posted by: Christian J Apr 20 2011, 03:48 PM
h1 {
width: 300px;
height: 2em;
margin: 0;
color: black;
background: pink;
}
p {
width: 400px;
margin: -3em 0 0 0;
color: red;
background: white;
border: solid red;
}
</style>
<h1>heading</h1>
<p>lorem ipsum</p>
In the above example the P background and border covers the H1 background, and the P text covers the H1 text, yet the H1 text covers the P background and border. Could someone explain the latter for me?
Posted by: pandy Apr 20 2011, 04:12 PM
In what browser can we see this? Are you sure it isn't an illusion because of the color choice? First I thought it looked the way you say (K-Mel), but when I enlarged the text it turned out not to be so.
Posted by: Christian J Apr 20 2011, 05:27 PM
In what browser can we see this? Are you sure it isn't an illusion because of the color choice? First I thought it looked the way you say (K-Mel), but when I enlarged the text it turned out not to be so.
I see it in all my new browsers. Here's a screenshot:
Posted by: pandy Apr 20 2011, 06:12 PM
Sorry, I misread. I thought the heading text covered the paragraph text. I see what you see. Did you expect the P background to cover the heading text? I think that changed pretty long ago, but I'm not sure when. The oldest I have here apart from IE6 is O 9.24 and it does it as in your screen cap.
Posted by: pandy Apr 20 2011, 06:20 PM
Found a K-Mel 1.1.2 based on Gecko 1.8.1.6. It does it the same way.
I think positioning brings back the old behaviour.
Posted by: Christian J Apr 20 2011, 07:08 PM
Did you expect the P background to cover the heading text?
Yes. This thread might be about the same thing: http://lists.w3.org/Archives/Public/www-style/2009Feb/0222.html (though that example uses negative bottom margin on the first element instead).
Posted by: pandy Apr 20 2011, 08:24 PM
Too tired to follow that, but I think it's about backgrounds always being behind foregrounds but only for static boxes.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)