229250 - CSS Layers is rendered incorrectly if the <p> paragraph html element is in the layer

Status: RESOLVED INVALID

(Core :: Web Painting, defect)

Description

[Jung]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.5) Gecko/20031007 Firebird/0.7
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.5) Gecko/20031007 Firebird/0.7

If any CSS Layers created using the <DIV> or <SPAN> elements has the <P> element
inside of them, it will cause the objects inside the layer to shift down one line.
It helps if you give the layer a background colour then it can be demonstrated
clearly

Reproducible: Always

Steps to Reproduce:
1. Create a layer in the html document with the <img> tag inside, e.g./:
<div id="LayerA" style="position:absolute; left:20px; top:20px; width:50px;
height:50px; z-index:1; background-color: blue; layer-background-color: blue;
border: 1px none #000000;">
<img src="image/justanimage.gif" width="50" height="50">
</div>

2. Create another layer beside it with the same html, but this time put the
<img> nested inside a <p> tag like this:

<div id="LayerB" style="position:absolute; left:60px; top:20px; width:50px;
height:50px; z-index:1; background-color: blue; layer-background-color: blue;
border: 1px none #000000;">
<p>
<img src="image/justanimage.gif" width="50" height="50">
</p>
</div>


Actual Results:  
LayerA: Notice there is no problem in the rendering of the layer with the image.
LayerB: Notice that the image has been shifted down a line.  Same thing happens
with text as well.

Expected Results:  
The first occurance of the <p> element should not shift the objects inside the
layer down one line.
The same code demonstrated will not cause Opera 7 or IE6 to render an initial
extra line in any layers with the <p> element inside the CSS layer

This happens only with the FIRST <P> element tag.  If the layer is written like
this:

<div id="LayerB" style="position:absolute; left:60px; top:20px; width:50px;
height:50px; z-index:1; background-color: blue; layer-background-color: blue;
border: 1px none #000000;">
<img src="image/justanimage.gif" width="50" height="50">
<p>blah</p>
</div>

The shifting down of the objects do not occur

Comment 1

[Anne (:annevk)]

What happens when you remove the margin from the p and add some padding:

p{
 margin:0;
 padding:.3em;
}

? Cause I have the feeling this is invalid ;-)

Comment 2

[Hixie (not reading bugmail)]

The <p> has a top margin (it's why <p>s next to each other have a gap in
between). If you position a <p>, it still has its margin. Hence the effect.

That it "works" in Opera is a bug in Opera. (o133788)

Testcase: http://www.hixie.ch/tests/adhoc/css/model/ua.css/002.html