footer on wordpress blogs is shifted to the right

NEW
Unassigned

Status

()

Core
Layout
13 years ago
2 years ago

People

(Reporter: Stipe Kotarac, Unassigned, NeedInfo)

Tracking

({regression})

Trunk
x86
All
regression
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(5 attachments)

(Reporter)

Description

13 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8b2) Gecko/20050526 Firefox/1.0+ (stipe)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8b2) Gecko/20050526 Firefox/1.0+

All Wordpress 1.5 blogs with the default theme have the footer shifted a little
to the right in Mozilla trunk builds. It works properly in Aviary and Release
builds.

Reproducible: Always

Steps to Reproduce:
1. Visit a WordPress 1.5 blog with a default theme
2. Look at the footer

Actual Results:  
It's shifted to the right

Expected Results:  
It should display properly.
(Reporter)

Comment 1

13 years ago
I've tried this with Official builds too and they have the same problem.

Comment 2

13 years ago
Can  you please attach a minimized testcase showing this issue?
https://bugzilla.mozilla.org/attachment.cgi?bugid=295627&action=enter
OS: Windows Server 2003 → All
(Reporter)

Comment 3

13 years ago
I'll try to come up with something.
(Reporter)

Comment 4

13 years ago
I've just realized that it happens only when using Windows Classic theme.
any progress on the testcase? It is WFM with current trunk build.

Comment 6

13 years ago
I also see the footer image in Kubrick (wordpress default theme) misaligned by
one pixel. If you don't see it initially, try resizing your browser's width by
one pixel. It seems to alternate being fixed/broken as you resize pixel-by-pixel.

I've seen this since I started testing 1.1 builds (roughly May 23) and I see it
in the most recent nightly.

While I'm not good enough with css to provide a minimal test case, there has
been some discussion of this on the wordpress forums.  Specifically, removing
the 1px padding in the #footer class fixes the issue for Moz but creates a
similar problem on IE (footer shifted one pixel to the left).
http://wordpress.org/support/topic/35741

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2) Gecko/20050610
Firefox/1.0+

Comment 7

13 years ago
Created attachment 185952 [details]
wordpress default theme pixel shift

Comment 8

13 years ago
Created attachment 187804 [details]
Testcase 

This test case shows the footer shift in Deer Park Alpha 1.

There are several ways to correct the shift:
- Remove the padding attribute of #footer
- Remove the width attribute of #footer
- Remove some of the <br>s in the page div
Created attachment 188651 [details]
testcase2

This is an exaggerated testcase, where I've set padding: 0 0 0 100px; on the
#footer.
Your example has padding: 0 0 0 1px;, which is causing the 1px pixel shift.
Removing that padding makes the bug go away, so I think this bug is invalid.
Mozilla is making the box wider when padding is added (correct per w3c), which
is what IE6 is not doing.

Comment 10

13 years ago
If it's only the padding, why is the content of the #page div (the <br>s) affect
the problem?
I'm not seeing that, but that might be a rounding issue, since it is just 1 pixel.

Comment 12

12 years ago
*** Bug 316099 has been marked as a duplicate of this bug. ***

Updated

12 years ago
Keywords: regression

Comment 13

12 years ago
so are you guys going to leave it at that?
what changed between the 1.0.x and the 1.1+ builds that screwed it up? it is ridiculous for us to have webmasters reprogram their sites to work around OUR glitches, esp. when it leaves IE looking messed up.

Come on guys, 2.0 is not far away!

Comment 14

12 years ago
in FF 1.0.7 it looks fine. but 1.5 rc+ and even the nighlt builds render the misaligned footer.

i'm also seeing this issue in the 100's of WordPress sites i am hosting. i sure hope that this bug will get fixed. appreciate the help. :)

Comment 15

12 years ago
Created attachment 203769 [details]
Test case on different version of Wordpress (2.0 beta 1)

PNG screenshot of the footer of my blog - is NOT caused by extensions (occurs on clean 1.5 RC3 install) and is NOT a server/connection issue (does not occur in IE 6)

Comment 16

12 years ago
For further information on this, see the Wordpress Support discussion at http://wordpress.org/support/topic/49856

Comment 17

12 years ago
Comment on attachment 203769 [details]
Test case on different version of Wordpress (2.0 beta 1)

Should have mentioned - I'm running Firefox 1.5 RC3 on WinXPSP2, and my blog is Wordpress 2.0 beta 1 (so it is not an issue with the particular version of Wordpress since the other report was for a 1.5 blog)

Updated

12 years ago
Attachment #203769 - Attachment description: I also have this problem → Test case on different version of Wordpress (2.0 beta 1)

Comment 18

12 years ago
testcase 1 wfm with RC3, and testcase 2 fails in RC3 and Firefox 1.0 (where the wordpress template works fine)

Comment 19

12 years ago
While we wait for a Firefox fix, there's a css workaround in a previously mentioned wordpress.org thread.
http://wordpress.org/support/topic/35741#post-205196
http://wordpress.org/support/topic/35741#post-205306

Specifically, hacking Kubrick's css like so worked for me...
#footer {
	padding: 0 0 0 1px;
	margin: 0 auto;
	width: 760px;
	clear: both;
	}

/* hack for Firefox 1.1 */
#page > #footer {
	padding: 0;
	}

Comment 20

12 years ago
and it doesn't break it in any other browsers?
*cough* IE7 *cough*

Comment 21

12 years ago
(In reply to comment #20)
> and it doesn't break it in any other browsers?
> *cough* IE7 *cough*

Not sure.  It appears to work in IE6, Fox 1.0.x and Fox 1.5 for me.  I don't have access to IE7, Opera, Safari, or others to test.

Comment 22

12 years ago
OK, I will test it on my blog (http://NeoSmart.net/blog) and report back to HQ =D

Updated

12 years ago
Attachment #187804 - Attachment description: Test case → Testcase (does not trigger bug)
Attachment #187804 - Attachment is obsolete: true
Comment on attachment 187804 [details]
Testcase 

José, this testcase does trigger the bug. But you can see it only at certain window sizes.
So, if you don't see the bug with directly, try resizing it, until you see the 1px pixel shift.

Testcase2 is not showing the bug, and that is actually correct behavior (Opera9 is doing the same), I think.

This bug is about a rounding issue, I think, where Mozilla is sometimes shifting 1 pixel to the right at certain sizes.

I've explained what css rule caused this in comment 9, I really don't know why anyone wants to keep this 1px padding rule.
Attachment #187804 - Attachment description: Testcase (does not trigger bug) → Testcase
Attachment #187804 - Attachment is obsolete: false

Comment 24

12 years ago
This _MAY_ not be a Firefox issue after all - one Wordpress support forums user is reporting that they are having the problem in IE

Comment 25

12 years ago
riiiiiiiight..
Sorry for the sarcasm back there, but its prolly a dumb n00b who thinks that Firefox 1.5 is Internet Explorer 9.0b

It does not make sense that it works in 1.0.x and not in 1.1+ and yet is not a FF issue.

Comment 26

12 years ago
QUOTE:

'Well, just for my own enjoyment, I went ahead and installed the newest FireFox and I do not get this problem with FireFox 1.07, I only seem to get it with IE 6. So I got that going for me.'

Seems pretty sure to me. I can understand your worries though - I read a comment on one of the M$ developer's blogs asking them why they all didn't just work on Firefox instead of releasing two browsers!

Comment 27

12 years ago
The last comments haven't really been helpful and it actually makes it more difficult for somebody that would look into this to find the relevant information.

Please read the following link before making more comments:
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html

Comment 28

12 years ago
Sorry about that...
Anyway, just tested the hack, and verified that it does not break IE7 or Opera 9.01 Dev Preview.

You are 100% correct, there is no need for that padding, but it is ridiculous to expect webmasters everywhere (millions of them, more than FF users) to change their CSS file (remember, many are noobs) just because it breaks FF.
Also, realize that I personally spent 4 days on that before removing the padding and seeing it working, then realizing that it was a FF issue. No one knows about this flaw in Mozilla/FF and it really is up to the dev team to patch it. :(

Comment 29

12 years ago
I'm afraid I have to disagree - I raised the issue of whether the pixel shift also  appeared in Internet Explorer (which would possibly make it a Wordpress bug rather than a Firefox one) which was followed by a perfectly legitimate discussion as to the reliability of the report that it had happened in IE.

Comment 30

12 years ago
Is there any way we can get that guy's email address and ask him for a screenshot? 1.5 final is too close!

Comment 31

12 years ago
There's been another post and it turns out that the guy was talking about a different issue (his header shifting on WP 'Pages') not this bug - he just wrote his original report in an unclear way (http://wordpress.org/support/topic/49856#post-275151).

Comment 32

12 years ago
Changing the padding from 1px to 0 (see Comment 9) fixes it - I will be submitting this as a Wordpress bug at a later date

Comment 33

12 years ago
Created attachment 204032 [details]
Proof that this is a Wordpress bug rather than a Firefox one

It turns out that it is a mistake in the Wordpress CSS - as suspected as early as Comment 9. This has now been submitted to Wordpress' bug system.

Comment 34

12 years ago
No, changing the padding is classified as a 'workaround.' Firefox has a bug, not WordPress. WordPress is using W3C CSS & XHTML validated code, FF has issues dealing with it. FIXING the bug would be finding out what happened in FF that made it render incorrectly

Comment 35

12 years ago
(In reply to comment #32)
> Changing the padding from 1px to 0 (see Comment 9) fixes it - I will be
> submitting this as a Wordpress bug at a later date

Setting the padding to 1px is a workaround for a bug in IE.  Fox 1.0.x copes with that workaround.  Fox 1.5 doesn't.

If you set the padding to 0, the theme will look fine in Fox but have a similar pixel shift issue in IE.

You can find more detail in this thread
http://wordpress.org/support/topic/35741

Comment 36

10 years ago
(In reply to comment #35)
> (In reply to comment #32)
> > Changing the padding from 1px to 0 (see Comment 9) fixes it - I will be
> > submitting this as a Wordpress bug at a later date
> 
> Setting the padding to 1px is a workaround for a bug in IE.  Fox 1.0.x copes
> with that workaround.  Fox 1.5 doesn't.
> 
> If you set the padding to 0, the theme will look fine in Fox but have a similar
> pixel shift issue in IE.

I don't see how this means FF has a bug.

currently attachment 187804 [details] seen in SM trunk, at certain window sizes as stated by Martijn comment 23. Also see in IE.  Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9a9pre) Gecko/2007102203 SeaMonkey/2.0a1pre ~=FF trunk

=> INVALID ?
20160604131506 Mozilla/5.0 (Windows NT 5.1; rv:47.0) Gecko/20100101 Firefox/47.0
20160621030208 Mozilla/5.0 (Windows NT 5.1; rv:50.0) Gecko/20100101 Firefox/50.0

I have tested the issue with https://davidarussell.co.uk/ on latest FF release 47.0 and latest Nightly build and could not reproduce it.
Is this still reproducible on your end ? If yes, can you please retest this using latest FF release and latest Nightly build (https://nightly.mozilla.org/) and report back the results ? When doing this, please use a new clean Firefox profile, maybe even safe mode, to eliminate custom settings as a possible cause (https://goo.gl/PNe90E).
Flags: needinfo?(stipe)
You need to log in before you can comment on or make changes to this bug.