Topic: background-position changed in FF1.5 Pages that link to <a href="https://ozoneasylum.com/backlink?for=27312" title="Pages that link to Topic: background-position changed in FF1.5" rel="nofollow" >Topic: background-position changed in FF1.5\

 
Author Thread
JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

IP logged posted posted 01-12-2006 05:36 Edit Quote

I have something to say, maybe a question, let's type and see what it's about...

I just upgraded Firefox from 1.0.1 or somewhere thereabouts to 1.5 and noticed something odd in it's rendering of a page with the body background:

code:
body {
	background : white url('bg.gif') no-repeat center center;
	}



The background image is no longer centered in the viewport horizontally and vertically. I use this for a lot of domains with simple cover pages on them and went looking around and they were all jacked up in the new 1.5. They were centered horizontally but vertically the image was at the top of the viewport with only the lower half of the image visible. Even stranger I almost immediately found a "fix"

code:
body {
	background : white url('bg.gif') no-repeat [b]fixed[/b] center;
	}



Can anyone tell me if this is to be considered a rendering bug? As far as I've know and continue to know after researching a litte "center center" is perfectly valid and should render the way previous way so I think this is a bug...

divinechaos
Obsessive-Compulsive (I) Inmate

From:
Insane since: Dec 2001

IP logged posted posted 01-12-2006 12:13 Edit Quote

I've always used the background-position before the background-repeat in the condensed background properties, and at first I thought this might be the culprit. Evidently not.

Anyhow, I remembered vaguely about an Owen Briggs article on background centering problems, so I found it again. Looks like Firefox 1.5 is exhibiting almost the exact same behaviour as Opera 5.2.

http://www.thenoodleincident.com/tutorials/box_lesson/opera/index.html

His solution? To use:

code:
background-attachment: fixed;
background-position: center;



I think that's actually what your code is doing, though whether you realized this I don't know... I forgot altogether about the background-attachment property.

Anyhow, nice catch. It should probably be reported as a bug if it isn't already. In the interim, you solution works, as does the other code at thenoodleincident.com. Keep in mind that if the page breaks the bottom of the window, your background will now (as I don't believe it does with background-position: center center) stay fixed to the window and scroll with the page.

Cheers,
DC

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 01-12-2006 14:49 Edit Quote

Check to see if you have html & body set to min-height or height 100%.

JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

IP logged posted posted 01-12-2006 16:41 Edit Quote

after posting this last night I looked around and saw the problem pop up here and there, the height 100% was the other fix I saw, I liked mine a little better as it kept all the fixes on the same line and didn't jack with anything else at all

BUG then!

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 01-12-2006 18:58 Edit Quote

Couple of sidenotes -

The html {height:100%;} is an issue that relates to how gecko browsers interpret the document. It is not a given that the HTML element is 100% height, and that needs to be set for various other issues. So if making sure that is set fixes the background issue, it seems better to me to leave it at that and forget about the position:fixed.

FWIW

JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

IP logged posted posted 01-12-2006 20:24 Edit Quote

what are the various other issues? I knock out a lotta layouts and rarely find need for it, plus I thought it caused me scrollbar grief once which put me off a bit...

I'm so crappy at remembering what's what with hacks, I remember table hacks and spacer gifs taking a long time to kick in for me too. I take great comfort in the fact that reiso, whom I consider extremely knowledgeable and helpful with the css crap, most often says "I don't know, IE is stupid". That's about how I approach a new layout bug, sling hacks at it until it works. I'd very much rather I remembered which to use immediately... and why...

divinechaos
Obsessive-Compulsive (I) Inmate

From:
Insane since: Dec 2001

IP logged posted posted 01-12-2006 21:45 Edit Quote

Well, my answer was relatively off-base. Thanks for the heads up.

Cheers,
DC

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 01-12-2006 22:12 Edit Quote

JK - mainly that if you want anything to actually behave with a height of 100%, the HTML and the BODY elements need to have that specified. Otherwise, 100% means 100% of the content filled area, not 100% of the viewport.

A lot of my layouts make use of 100% height elements, so I pretty much automatically throw that in at this point.

And I wouldn't call this a hack - it's simply the way that gecko browsers work with height - you have to specify it for the HTML and BODY elements.

Now spacer gifs
Even at the worst of times I never resorted to that!



(Edited by DL-44 on 01-12-2006 22:15)

JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

IP logged posted posted 01-12-2006 22:55 Edit Quote
quote:

DL-44 said:

Even at the worst of times I never resorted to that!


quote:

DL-44 said:
Now spacer gifs
Even at the worst of times I never resorted to that!



Me neither (that I recall, a little planning usually made that sorta thing unneccessary), I liked to used a proper cut up piece of eyecandy but in the end I call a graphic holding a table cell open a spacer gif by default anymore

all browsers suck. still. always?

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 01-13-2006 02:22 Edit Quote

This is an improvement, actually. Before 1.5 technically Gecko was not keeping to spec. It may have been simpler, but it's a small price to pay for standards conformity.

Opera has done it this way for a while (hurts to say something nice about Opera).

(Edited by reisio on 01-13-2006 02:24)

JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

IP logged posted posted 01-13-2006 02:43 Edit Quote

it's more nit picky and precise anyhow, and that's what it's all uh bout I guess



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu