Default theme CSS causing footer 'pixel shift' in standards-compliant browsers

[Mr_Cynical]

In Firefox the footer on the default (Kubrick) theme is shifted slightly, making it look pretty bad. It turns out that this is caused by the following section of Kubrick CSS:

#footer {
	padding: 0 0 0 1px;
	margin: 0 auto;
	width: 760px;
	clear: both;
	}

That '1px' is the cause of the problem - it doesn't occur in Internet Explorer because IE doesn't fully conform to the CSS specification, and simply ignores the pixel shift. Changing that CSS to the following solves the problem:

#footer {
	padding: 0 0 0 0;
	margin: 0 auto;
	width: 760px;
	clear: both;
	}

There has already been a ​Support discussion on this, and a ​Mozilla bug report which includes screenshots which may provide more information - but that simple CSS change would solve the problem.

The problem as displayed by the 2.0b1 CSS

The result of the CSS change I suggested

It turns out that this was done deliberately (see Support discussion) but it is still a bug because the code does not display the footer as it is supposed to look when the CSS is interpreted correctly.

I can confirm this problem, as well as confirm the fix.

One minor note... instead of:

padding: 0 0 0 0;

It should be:

padding: 0;

I also note that it only occurs on even-numbered widths. i.e. it happens on 800px browser width, but not 801px.

We need people to try this in other browsers.

Testing procedure:

1. Apply the patch

2. Load WP front page with default theme

3. SLOWLY change the width on your browser, we're talking about 2px a second changes.

4. See if the footer gets shifted and if you can stop resizing and "freeze" it in a misaligned state

Please state your operating system and browser. I'll get the ball rolling:

Confirmed fixed in:

OS X/Firefox 1.5.0.1
OS X/Safari 2.0.3

I believe this is fixed in [3924], but needs browser testing.

Also needs backporting.

(In [3925]) Default theme updates. fixes #1941

Milestone 2.0.4 deleted