Open
Bug 255115
Opened 20 years ago
Updated 2 years ago
background-image with align center differs from page content center aligned
Categories
(Core :: Layout, defect)
Tracking
()
UNCONFIRMED
People
(Reporter: maka3d, Unassigned)
References
(Blocks 1 open bug, )
Details
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040803 Firefox/0.9.3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040803 Firefox/0.9.3
The background alignment of the body does not match the site content alignment.
Reproducible: Always
Steps to Reproduce:
copy the html below and create the bg.gif image with an odd width
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body{
background-image:url(bg.gif);
background-repeat: repeat-y;
background-position: center;
text-align: center;
margin: 0;
margin: 0;
}
#site{
width: 779px;
background-color: #FFFF00;
margin: auto;
text-align: left;
height: 1000px;
}
</style>
</head>
<body>
<div id="site"></div>
</body>
</html
</html>
Actual Results:
When you resize slowly the firefox window, you can see that there's diferences
between the calculation of the foreground and the background
Expected Results:
The site content should always be aligned with the background.
Probaly the programmer that did the background math, use floor to round the
division, and the other programmer that did the math inside the site, use ceil
to round.
Browser->Layout General
p.s. Firefox->Website is for problems with
http://www.mozilla.org/products/firefox/ not for general website problems.
Assignee: bugs → nobody
Component: Web Site → Layout
Product: Firefox → Browser
QA Contact: core.layout
Version: unspecified → Trunk
|
||
Comment 2•20 years ago
|
||
Marcos, can you better explain what the problem is? Attaching a screenshot would
be best.
Severity: trivial → normal
|
Reporter | |
Comment 3•20 years ago
|
||
(In reply to comment #2)
> Marcos, can you better explain what the problem is? Attaching a screenshot would
> be best.
Shure, reading my bug description I agree that it's hard to understand. But It's
hard to explain too. I don't think putting a screenshot would help, a movie
would be better, since the bug happends while you resize the window slowly.
I put a new script to show how it works.
http://neves.bs2.com.br/tableless/bugmoz.htm
The page has a background that is an png image with width 2px and height 1px
where a pixel is transparent and the other is black. It's a strip, look using a
zoom tool like colorpic. I put the same background at the body and at the div
above the body. I put two buttons that resize the div by 1px + or -. The title
shows the current width. You will see that sometimes a black box appear. That's
is the bug I'm talking about. The alignment of the div, differs from the body
background.
I hope it's clear now how the bug behaves.
|
|
||
Comment 4•20 years ago
|
||
(In reply to comment #3)
> http://neves.bs2.com.br/tableless/bugmoz.htm
> The page has a background that is an png image with width 2px and height 1px
> where a pixel is transparent and the other is black. It's a strip, look using a
> zoom tool like colorpic. I put the same background at the body and at the div
> above the body. I put two buttons that resize the div by 1px + or -. The title
> shows the current width. You will see that sometimes a black box appear. That's
> is the bug I'm talking about. The alignment of the div, differs from the body
> background.
> I hope it's clear now how the bug behaves.
I don't see what's wrong about the behaviour. The background images are a
striped black and transparent, so if it is at a certain position, the div's
background and the body's background will align, so the black is on black and
the transparent is on transparent, making it still striped. If either is offset
by one pixel from that position, then it will be black on transparent and
transparent on black, making for black only.
Changing the size of the div makes the div shift to the left half of the time.
This is because it wants to stay centered, but can't move any less than a
fraction of a pixel each time. It gets wider by a pixel on even numbers, and
gets wider by a pixel and shifts to the left a pixel on odd.
Does this explain what you're seeing?
|
|
Reporter | |
Comment 5•20 years ago
|
||
My javascript sample is just to illustrate the real bug that happens when you
resize the hole window. You are completely right about this example I did. But
It's not the point. If you want to see the real bug, just slowly resize
horizontally the window. The same problem that happens when you resize clcking
the buttons, happen when you resize the window, What should not happen since
resizing the window resize both div background and body background. The bug is
that the body's background use a different math from the div's background.
|
|
||
Comment 6•20 years ago
|
||
(In reply to comment #5)
> If you want to see the real bug, just slowly resize
> horizontally the window. The same problem that happens when you resize clcking
> the buttons, happen when you resize the window, What should not happen since
> resizing the window resize both div background and body background.
Why would resizing the window resize the div background? The div is set to 701
pixels, not a percentage. Since it's centered, it moves to the left one pixel
for every two pixels the window is narrowed, while the body's background
alternates for every pixel. The same situation I described in comment 4 applies.
|
||
Comment 7•19 years ago
|
||
I came across this as well, and decided
to come here to report it, but I read
the comments and tried suggestions and
it all works now.
I had this problem when I had my div and
stuff set to a width of 695, except it
wouldn't happen on Mozilla or Internet
Explorer, so I figured it was a FireFox
bug. But I set the width of everything
to 700 (an even number) instead, and now
everything lines up nice!
It's just one of those little rounding
issues that pops up and is gonna behave
differently from one computer to the next
depending on how it decides to handle
the math. That it showed up 'properly'
in Internet Explorer and Mozilla was a
confusing coincidence.
|
||
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•