Closed Bug 308337 Opened 19 years ago Closed 19 years ago

background image positioning cant reach top of page

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Platform:
x86
Windows 98
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: ve3ll, Unassigned)

Details

Attachments

(2 files)

img for testcase
458 bytes, image/jpeg
Details
testcase
703 bytes, text/html
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.8b4) Gecko/20050908 Firefox/1.4
Build Identifier: Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.8b4) Gecko/20050908 Firefox/1.4

using a positioner of top right on a background-image
does NOT place it at top-of-page.  Styling was added to
remove margin/border/pading on html,body and division
but to no avail... MSIE does reach top.  Is there something
in recommendation that i am missing? It does make some
pages look different and wonder which browser is correct.
code used is as follows... any image file will do. 

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html {margin:0px;border:0px;padding:0px}
body {background:#ffdead;margin:0px;border:0px;padding:0px}
div {background:url(concord.gif) no-repeat top right;
     margin:0px;border:0px;padding:0px}
</style>
</head><body><div>
<p>hello bob</p>
<p>hello bob</p>
<p>hello bob</p>
<p>hello bob</p>
<p>hello bob</p>
</div></body></html>

Reproducible: Always

Steps to Reproduce:
1. make a doc similar to my code
2. add appropriate image
3. view in both FF and MSIE

Actual Results:  
difference in appearance regarding top margin
there or not there

Expected Results:  
i would expect NO margin but if recommendation
says it is needed then that is the rule....
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20050913
Firefox/1.6a1 ID:2005091308

This behavior also exists in the above build.  I would hesitate to call this a
bug (Opera does it the same way we do).  For a workaround, add the following two
properties to the div rule:

position: absolute;
width: 100%;

This will display the same in all three browsers (FF, Opera, and IE).  For now,
however, I'll confirm this and put it in Core/Layout to let a developer decide
what to do.
Status: UNCONFIRMED → NEW
Component: General → Layout
Ever confirmed: true
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → Trunk
Gabriel Sjoberg: Please do not confirm bugs unless you are certain they are bugs.
Attached image img for testcase — 

  

  



    
    

    
  

      
      
      
      

        Attached file
          
        testcase
        — 
      

    


  
This happens because the <p>'s have a margin-top value. If you remove that
margin, the background is at the top. This is a phenomenon called
margin-collapsing (the div's margin collapses with the p's margin) and is
described in the css2.1 spec.
So I think this bug is invalid.
(also a 1px border on the div solves the issue).

  

  



    
    

    
  
Good catch Martijn, I hadn't thought about the <p> elements.  Resolving INVALID.

  

  


Status: NEW → RESOLVED
Closed: 19 years ago
Resolution: --- → INVALID

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: