The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Negative top margin and border/background
Christian J
post Apr 20 2011, 03:48 PM
Post #1


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



CODE
<style type="text/css" media="screen">
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 20 2011, 04:12 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 20 2011, 05:27 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 20 2011, 11: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.

I see it in all my new browsers. Here's a screenshot:
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 20 2011, 06:12 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 20 2011, 06:20 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 20 2011, 07:08 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 21 2011, 01:12 AM) *

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-st...09Feb/0222.html (though that example uses negative bottom margin on the first element instead).

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 20 2011, 08:24 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Too tired to follow that, but I think it's about backgrounds always being behind foregrounds but only for static boxes.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 10:27 AM