185388 - {inc}Logo and tagline not centered at the top of a div unless the page is reloaded

Status: RESOLVED FIXED

(Core :: Layout: Positioned, defect)

Description

[Matt Arnold]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.2.1) Gecko/20021130
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.2.1) Gecko/20021130

I'm attempting to write a new layout for my site using XHTML 1.0 Strict and CSS.
Everything is going well except for the logo and tagline that appear on each
page. I use text-align: center to center them, but when the page first loads,
both the logo image and the tagline will be on the left margin of the div
instead of centered. If I hit reload, the image will center just fine.

The page is divided up into two main divs, the left one has all the nav bar
elements and the right one has the content. Both are fixed. The right one begins
180px from the left margin. The logo and tagline are in the right div.

The tagline is added via document.write so that it changes every time the page
is reloaded. I found that if I comment out the javascript, the logo will always
center properly by itself. Thus I'm not sure if this is a javascript problem or
a CSS problem or both.

The javascript file is http://www.thehaus.net/haus.js and the CSS file is
http://www.thehaus.net/bluehaus.css

Reproducible: Always

Steps to Reproduce:
1. Type the above link into the browser and hit return. The links
http://www.thehaus.net/TestHaus/reviews.shtml and
http://www.thehaus.net/TestHaus/rev-ut2k3-linux.shtml will also display this
problem.
Actual Results:  
The logo and tagline are on the left margin of the div.

Expected Results:  
The logo and tagline should be centered in the div.

The odd thing is that the content beneath the tagline always centers properly if
it is supposed to be. The logo and tagline are the last thing in a server-side
include that gets added to every page. I don't know if that has anything to do
with it. Mozilla shouldn't know the difference. You can see what's in that
server-side include at http://www.thehaus.net/top.inc

This bug shows up in Mozilla 1.2.1 in Linux and Windows. I hope there's a fix.
It's a very annoying bug. IE, Opera, and Konqueror all display it properly. I've
tried just about everything I can think of to fix it to no avail.

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Worksforme on Linux 1.2.1 and Linux trunk.  (The logo is the thing that says
"The Haus", and the tagline is the varying quote underneath it, right?)

Comment 2

[Matt Arnold]

That is correct. Sometimes (rarely) it will work if I follow a link on a
webpage. Thus, if you just clicked on the link in this report, try typing in the
URL into Mozilla directly and hit enter. I've found that that will reproduce the
problem 100% of the time for me.

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

What about Shift-Reload vs. Reload without holding down Shift?

Comment 4

[Matt Arnold]

It makes no difference. Either one will cause the logo and tagline to center
properly. I downloaded Mozilla 1.3 Alpha, but it has the same problem.

If you go to http://www.thehaus.net/TestHaus/index.php there is a news blurb
about Mozilla 1.3 Alpha being released. Click on the headline. That will take
you to a page with just that news item on it. When I click on it, the logo and
tagline will go back to the left margin. One time I tried that it actually stay
centered, but another click on the headline sent them back to the left margin.

Comment 5

[Matt Arnold]

For whatever reason, this problem is much harder to reproduce on my other box, a
Celeron 400 running Mozilla 1.2.1 in Windows 98. I can trigger it, but but it
happens much less often. The only major difference is that that box is running
at 800x600 and my main box (dual boot Linux and Win98) runs at 1024x768. I doubt
that that would make any difference, but who knows?

Comment 6

[Robert C. Sheets]

I'm seeing this on linux nightly build 2002121404...
Working on a testcase.

Comment 7

[Robert C. Sheets]

I'm now able to reliably reproduce this bug in both debian's 1.2.1-3 build and
the linux nightly of 2002121522.

Steps to reproduce:
1. Disable mozilla's disk cache
2. Restart mozilla
3. Go to http://www.picosecond.org/test/
   At this point, you can see one manifestation of the bug.
4. Append "index.html" to the end of the address, and press enter
   Now you can see another manifestation of the bug.
5. Reload the page
   Now you can see the intended rendering of the page.

Step 1 is optional, however I'm only able to reproduce the bug with 100% results
if I disable the disk cache. With the disk cache enabled, the bug is less reliable.

Comment 8

[Matt Arnold]

I can reproduce this bug using that testcase too, although my page seems to do
it more frequently for whatever reason. Your testcase also does something I
haven't seen with my page yet. Occasionally, the logo will center fine, but the
"Hello World!" will not. Curiouser and curiouser. I'm at least glad that someone
else was able to reproduce this :)

I also noticed something I should have noticed before. When the logo is
displayed on the left margin, the tagline will still be centered underneath it
as if the width of the logo were the entire width of the div. Could that be the
problem? Is Mozilla not figuring out the width of the div properly the first
time the page is displayed?

Comment 9

[Matt Arnold]

Attachment: A partial screenshot showing the bug in action

Notice on the screenshot that the logo is on the left side of the div, and the
tagline is centered beneath it as if the logo width equalled the width of the
div.

Comment 10

[Matt Arnold]

Has anyone on the Mozilla team been able to nail down why this happens? It is
very annoying and is keeping me from rolling out my new site design. There's
been a testcase posted so it's not just me. Otherwise, I'd like to know if
anyone has a workaround.

Comment 11

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

What seems to be happening is that the P that has 'text-align: center' (and the
one below it) end up at the width that shrink wraps them around the image, so
there's no movement when centering.

The DIV (with class="content") containing that P is absolutely positioned with
no specified width.  I don't see offhand what makes that DIV as wide as it is.

Comment 12

[Matt Arnold]

I added "right: 0px;" to the definition for that DIV and now I can't _seem_ to
reproduce that bug. I say _seem_ because I thought I had it fixed before, only
to be proven wrong.

If I'm understanding the CSS2 spec properly (which is a major "if", see
http://www.w3.org/TR/REC-CSS2/visudet.html#abs-non-replaced-width ), that should
be unnecessary. #3 under that item says "If 'width' is 'auto', replace any
remaining 'auto' for 'left' or 'right' with '0'." In other words, since I
neither specified "width" or "right" for that DIV, both of them are by default
set to "auto". In this case, since the width is auto, the right should become 0
automagically.

The _really_ odd thing about this is that the only part of the page affected was
the logo and tagline. On this page,
http://www.thehaus.net/TestHaus/reviews.shtml , the <h1>Reviews</h1> and the
tables underneath it _always_ centered as if the width of the DIV were the
remaining with of the viewport.

Comment 13

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

See the revised rules in CSS 2.1: http://www.w3.org/TR/CSS21/visudet.html

Comment 14

[Matt Arnold]

Aha! That was sneaky of them to change that on me. The revised specs make a lot
more sense. Following the 2.0 specs, you could never have a DIV that only took
up the amount of space that the content requires. It would always have to take
up all of the remaining width.

Having said all that, the last paragraph of my last post still stands. Without
the "right: 0px;", the DIV only should have been as wide as the widest table on
http://www.thehaus.net/TestHaus/reviews.shtml , correct? In reality, the tables
were always centered as if I specified "right: 0px;".

On top of that, there's still no reason why the logo and tagline were ever on
the left margin of the div. According to the 2.1 spec, Mozilla should have
computed the width of the DIV based on the width of the content and always
centered the logo and tagline according to that computed width.

The only thing I can think of is that Mozilla was computing the width of the DIV
up to the point of the Javascript document.write() and then computing it again
when it displayed the rest of the page. The problem went away once the "right:
0px;" was added because no width computation needed to be made. Thoughts?

Thank you very much for your help, David, as we work through this bug. 

Comment 15

[Matt Arnold]

I downloaded this morning's build and the problem with the width of the DIV
containing the tables on http://www.thehaus.net/TestHaus/reviews.shtml has been
fixed! The bad news is that the original problem, that the logo and tagline want
to become left justified, still exists.

Since I have a fix by adding right: 0px; to that DIV, I went live with the new
design a couple of days ago. But, I kept the pages in the TestHaus directory the
way they were so they show that problem. These links will show it:

http://www.thehaus.net/TestHaus/index.php
http://www.thehaus.net/TestHaus/reviews.shtml
http://www.thehaus.net/TestHaus/rev-ut2k3-linux.shtml

The easiest way I've found to reproduce it is to go to
http://www.thehaus.net/TestHaus/index.php and click on one of the headlines for
one of the stories like yesterday's New UT2K3 "Dedicated Server Released." Keep
clicking on that headline. Eventually, the problem will show up. It doesn't take
me very long at all.

Comment 16

[Steve England [:stevee]]

Links all seem to be 404, so I can't tell if the reflow branch landing has had any effect on this bug.

Comment 17

[Matt Arnold]

(In reply to comment #16)
> Links all seem to be 404, so I can't tell if the reflow branch landing has had
> any effect on this bug.
 
Boy, it's been awhile since I thought about this bug. I put the TestHaus directory back. The bug seems to be gone now, although I'm not sure at what point over the past four years it was. I recommend to mark it fixed.

Comment 18

[Mats Palmgren (inactive)]

Attachment: Testcase

Comment 19

[Mats Palmgren (inactive)]

The {inc} part of the problem seems to be fixed.
Pre-reflow branch landing we centered main content (SeaMonkey 2006120701).
Post-reflow branch landing the main content is not centered if you resize
the window (SeaMonkey 2006120801). The new rendering is compatible with
Opera9 and Webkit. The old is compatible with IE7.
The new rendering is what CSS 2.1 says should happen.
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

-> FIXED (by the reflow branch landing)

Comment 20

[Ryan VanderMeulen [:RyanVM]]

Attachment: Reftests

Comment 21

[Boris Zbarsky [:bzbarsky]]

I might not be able to get to this until April...

Comment 22

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Comment on attachment 257467 [details] [diff] [review]
Reftests

Checked in after testing in pre- and post-reflow-branch builds.