Closed Bug 279425 Opened 20 years ago Closed 18 years ago

Always show vertical scrollbar to prevent movement of table with align="center"

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 72540

People

(Reporter: richardvallee, Assigned: bugzilla)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.5) Gecko/20041108 Firefox/1.0 StumbleUpon/1.999
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.5) Gecko/20041108 Firefox/1.0 StumbleUpon/1.999

A table with align="center" is incorrectly moved when a vertical scrollbar is
displayed. This results in inconsistent display of the table when switching
between pages with the same layout where one has a vertical scrollbar and the
other does not. On the page where a scrollbar is displayed, the table is moved
to the left, relative to the page with no scrollbar, the same width as the
scrollbar itself.

This might be a designed behavior but should be revisited as it creates
inconsistent displays for the same layout depending on whether there is a
vertical scrollbar or not.

Reproducible: Always

Steps to Reproduce:
1. Create 2 html documents with the same layout, one long enough to have a
vertical scrollbar, the other without a vertical scrollbar. The layouts must
display a table with align="center".
2. Switch between the documents and notice the display of the table moving
between the 2 documents.
3. Watch porn (suggested, though superfluous).

Actual Results:  
The table is displayed at different locations depending on whether or not the
document displays a vertical scrollbar.

Expected Results:  
The table should stay at the same location, vertical scrollbar or not.
I agree that this is a poor design decision that needs to be reversed. I have
mocked up a four-page demo that shows exactly what this person is talking about.
Please take a minute to review my work and please reconsider the decision to
make the vertical scrollbar an optional element on the AWESOME Firefox Browser.

http://www.danclem.com/firefox/279425/page1.shtm
(In reply to comment #1)
> I agree that this is a poor design decision that needs to be reversed. I have
> mocked up a four-page demo that shows exactly what this person is talking about.
> Please take a minute to review my work and please reconsider the decision to
> make the vertical scrollbar an optional element on the AWESOME Firefox Browser.
> 
> http://www.danclem.com/firefox/279425/page1.shtm

Well if displaying the scroll bar shifts display, it would seem to me that
position is based on the right-side. What if it were reversed, using the side
that is sure to remain consistant? No idea how much it would affect other
components but it could be an easy fix...
This issue affects every Web page that uses any type of alignment technique to
put the Web page in the center of the browser window. The original author
mentions table align="center", the classic HTML techniqe. I'm using this
technique from Christopher Schmitt's CSS Cookbook by O'Reilly.

body {
	margin-left: 5%;
	margin-right: 5%;
}

Regardless of the technique used, I believe that a centered Web page must be
computed by the rendering engine by first calculating the available horizontal
space inside the browser window. If this total space changes because of a
vertical scrollbar appearing, then the entire page shifts by the number of
pixels equal to half the width of the vertical scrollbar element.

Make sense?
> Well if displaying the scroll bar shifts display, it would seem to me that
> position is based on the right-side. What if it were reversed, using the side
> that is sure to remain consistant?

You are correct - the only way to eliminate the "Firefox Page Shift" defect is
align our websites based on the left side of the browser window. Center or
right-aligned pages will always shift 5 or 10 pixels when the vertical scrollbar
appears.

If all of our users were running the same resolution (and maximized windows),
our pages would appear centered as we intended. But if someone is running higher
or lower resolution, then it looks horrible.

I suppose we could use JavaScript to capture the usable width of the browser
window, then position the page manually, but that's a bit much.
(In reply to comment #4)
> > Well if displaying the scroll bar shifts display, it would seem to me that
> > position is based on the right-side. What if it were reversed, using the side
> > that is sure to remain consistant?
> 
> You are correct - the only way to eliminate the "Firefox Page Shift" defect is
> align our websites based on the left side of the browser window. Center or
> right-aligned pages will always shift 5 or 10 pixels when the vertical scrollbar
> appears.
> 
> If all of our users were running the same resolution (and maximized windows),
> our pages would appear centered as we intended. But if someone is running higher
> or lower resolution, then it looks horrible.
> 
> I suppose we could use JavaScript to capture the usable width of the browser
> window, then position the page manually, but that's a bit much.


The simple fix is in the browswer.  Hacking web code to get consistent display
results makes no sense.  As was said, "if someone is running higher or lower
resolution, then it looks horrible."  All that results from this are websites
that jiggle and don't display properly.  Creating a hack will not take away the
jiggle, it will only allow your site to display properly under specific
resolutions and not be very maintainable.

This may be a sin, but look at how IE handled this problem.  The scroll bar is
always there, just discretely shaded out so you don't even notice it if you
don't need it.  The same site will render correctly centered in IE and jiggle in
firefox.
(In reply to comment #5)
> This may be a sin, but look at how IE handled this problem.  The scroll bar 
is
> always there, just discretely shaded out so you don't even notice it if you
> don't need it.  The same site will render correctly centered in IE and 
jiggle in
> firefox.

Exactly. Microsoft recognized the problem and designed their browser 
accordingly. What I'd like to know is:

- Does the Firefox team not understand the problem?
- Or does the Firefox team feel that their optional vertical scrollbar feature 
is more important than preventing this page shift defect?

I'm disappointed that this bug has been out there for about two months without 
any official commentary as to whether this will be reviewed.
It hit me yesterday too... The difference is that in IE vertical scrollbar is
always visible, althought not always enabled, but in Firefox it appears only if
page length exceeds available window. It results in content shifting left-right
when it is centered.

The fun is that at first I've blamed the company that designs new website for
the company I work for. I said they have to repair some subpages because of a
nasty display behavior, and they replied "hey, what's the problem, we can't see
any shifting..." :))

Please do something about it as it looks that this fix is trivial, both in
design and programmaticaly...

Regards,
Andrzej Kukula

This bug is invalid. I've seen other bugs on this subject that got resolved ->
INVALID.
(In reply to comment #8)
> This bug is invalid. I've seen other bugs on this subject that got resolved ->
> INVALID.

So causing a page to wiggle is a feature of the browser then?  Maybe bug isn't
the right term for it, becuase it very well may be the case that firefox is
fully compliant with specs.  How about a feature request?  I request that my
pages not shift off center in firefox when content is sufficiently long enough
to use a vertical scrollbar resulting in an undesired wiggle effect when moving
between pages of varying lenghts.
Something like body {overflow-y:scroll;} allways gives a vertical scrollbar
(only works for trunk builds), but I don't think this is something that is
considered standard for every page.
I found it doesn't matter if there is a table or not for this to happen. I use 
css and the same thing occurs on the shorter pages. 
(In reply to comment #10)
> Something like body {overflow-y:scroll;} allways gives a vertical scrollbar
> (only works for trunk builds), but I don't think this is something that is
> considered standard for every page.

This does not solve the problem. It has some odd behavior in IE and does 
nothing to help the problem in Firefox. Anyone still interested in this issue, 
please visit my demo pages to see the evidence.

http://www.danclem.com/firefox/279425/page1.shtm

(In reply to comment #9)
> How about a feature request?  I request that my
> pages not shift off center in firefox when content is 
> sufficiently long enough to use a vertical scrollbar 
> resulting in an undesired wiggle effect when moving between 
> pages of varying lenghts.

I second that request. I'm glad I'm not the only one still paying attention to 
this one. I've given up on Firefox due to this very bug.
> I second that request. I'm glad I'm not the only one still paying attention to 
> this one. I've given up on Firefox due to this very bug.

Unfortunately, approximately 4%-20% of web surfers (depending on who you talk
to) use Firefox, so web designers still have to worry about how their page will
render for their target audience.  A shifting page is not only anoying but
unproffesional, and if a user isn't aware of the problem, the blame comes down
on the company/developer of the page.  The last thing a company wants is for
their audience to think they're a bunch of shlubs becuase their own logo bounces
around: "Check this out, these guys can't even get their website to work right..."

On a side note, rendering the "offending" pages in opera has the same results. 
That browser seems to impliment the side scroll bar the same way Firefox does. 
Interesting...
(In reply to comment #14)
> Unfortunately, approximately 4%-20% of web surfers (depending on who you talk
> to) use Firefox, so web designers still have to worry about how their page 
will
> render for their target audience.  A shifting page is not only anoying but
> unproffesional, and if a user isn't aware of the problem, the blame comes 
down
> on the company/developer of the page.

I'm just getting a little frustrated I guess. You and I have gone to great 
lengths all year to bring attention to this problem and no one else seems to 
care, nor do they acknowledge the problem.

*** This design decision on Firefox's part effectively prohibits the use of 
centered Web pages. Doesn't anyone understand how important this is? ***
I've got similar problems. It is becoming worst using a centered <div> with
style="border: 1px solid black" on such a page. 

If the vertical scrollbar is invisible everything is alright. After it appears
the right border of the div disappears and won't come back since the scrollbar
disappears.

I've changed from table layout to css based and that's why this problem isn't
very funny to me!
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5 ID:2005111116
Still valid in Firefox 1.5. Ironically it can be seen at http://www.mozilla.com, when changing from the Support page to any other page.
Modifying summary to include proposed solution (that implemented by IE)
OS: Windows XP → All
Hardware: PC → All
Summary: Vertical scrollbar causes movement of table with align="center" → Always show vertical scrollbar to prevent movement of table with align="center"
I've used this to fix it for the past year. This would go in the stylesheet and makes the vertical scrollbar appear all the time:

html { 
  min-height: 100%; 
  margin-bottom: 1px; 
}

Try it - it works!
(In reply to comment #19)
> I've used this to fix it for the past year. This would go in the stylesheet and
> makes the vertical scrollbar appear all the time:
> 
> html { 
>   min-height: 100%; 
>   margin-bottom: 1px; 
> }
> 
> Try it - it works!
> 

Sorry I cannot modify CSS of web pages I visit, I only can observe this weird behaviour, or use browser that doesn't exhibit it.
Sure you can - you can put it in your user css - it works as well. 
Go to your Application Data under your user profile, then Go to Mozilla...Firefox...Profiles...someweirdnumber.default/chrome/userContent-example.css
Rename this file to userContent.css and add the code to that page. You will need to close and reopen Firefox for it to take effect. 
While I don't agree with the resolution of the bug that this is a dupe of, it is a dupe and a decision has been made. Sorry.

*** This bug has been marked as a duplicate of 72540 ***
Status: NEW → RESOLVED
Closed: 18 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.