background-image making me craz(ier)

[jjemcm]

Having installed Coppermine I found a nice theme that the client likes (elektro). Kudos on a really nice product.
However, prior to uploading their images I decided to do a bit of browser testing.

The client is Mac based and everything looks wonderful in Safari. But when I test the site on Firefox(mac) I see no background image, the bg color is correct however. Ok so 5 non-billable (*sob*) hours later I've tracked it down to this area of the themes style.css:

Code Select Expand

body{
background: #CD9967;
background-image: url(images/bac.jpg);
color: #E7E7E7;
font: 12px Verdana,Arial,Helvetica,sans-serif;
margin: 8px;
padding: 0;
scrollbar-3dlight-color: #6A6A6A;
scrollbar-arrow-color: #DEDBB6;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #DEBD9C;
scrollbar-highlight-color: #DEDBB6;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #DEBD9C;
}
Gives me a BG image in Safari but not in Firefox

Code Select Expand

body{
background: #CD9967;
background-image: url(themes/mollyb/images/bac.jpg);
color: #E7E7E7;
font: 12px Verdana,Arial,Helvetica,sans-serif;
margin: 8px;
padding: 0;
scrollbar-3dlight-color: #6A6A6A;
scrollbar-arrow-color: #DEDBB6;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #DEBD9C;
scrollbar-highlight-color: #DEDBB6;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #DEBD9C;
}
Gives me no BG image in Safari but does give me one in Firefox.

Yikes! 
Its that darn background-image line.

In either case when the BG image fails to show up I do get the correct BG color.

One interesting point in the first instance above: It does appear that Firefox finds the BG image, it does show up on the screen, but only for as long as it takes for the entire page to load. Like something, somewhere at the end of the page load is telling Firefox "aw fuggetabout it". Whereupon it drops into the BG color.

I've noodled around trying various things (some quite insane) in the particular theme directory all to no avail.  If I get one I don't get the other.
Does anyone have any idea why I'm experiencing this?

thanks

jje

[artistsinhawaii]

I was curious about this so I downloaded the template to see what you were describing.  But on my Windows XP system the background image displays properly in Opera, IE, and Firefox. I don't have safari, so I can't test it there.  Maybe it's a Mac + firefox or Mac + safari issue?

I was wondering, however, if your tried switching the position of the Background Image and Background color in the first instance you cited?  Since the browser reads these parameters in the order they are written and defaults ultimately to the last instance of a parameter it reads.  Reversing the order might resolve the issues you are having.

Dennis

[jjemcm]

Thanks Dennis,

I have a resolution. And as you would expect it has nothing to do with anything. (see below)

You've at least answered one other nagging question I had: "which configuration works best in the Win environment?"

Clearly it' s the downloaded version (ie background-image: url(images/bac.jpg);) which is what one would expect .
But that means Safari is fine (so score one for the OS formally known as beleaguered) and that Firefox is somehow not conforming to standard  .
Just thinking that hurts my open source sensibilities.

Plus it behaves the same on the original FF 1.0 release and the current 1.06. Mozilla org has this cute feature whereby one cannot have any Extensions without first installing the latest. And I just had to have Web Developer (utterly wonderful) without which I wouldn't have been able to figure half of this stuff out.

reversing
background: #CD9967;
background-image: url(images/bac.jpg);

to read

background-image: url(images/bac.jpg);
background: #CD9967;

results in both Safari and Firefox not displaying bac.jpg

Well, ok. since as you say, parameter order is critical, that makes sense.
But it got me thinking (a dangerous thing). What if I put the background-image line as the absolute last item in the body{...} declaration?

Lo and behold that worked!
Yay! Much celebrating and drinks for everyone bartender!

Until (uh oh)
I opened the "Edit CSS" sidebar in Firefox.
And the BG image went away.

Merciful heavens it has nothing to do with nothing. Its an odd anomaly in the Firefox Web Developer Extension since closing "Edit CSS" makes the BG pop right back in.
What was that I said about Web Developer Extension (ver 0.9.4) being utterly wonderful?

:-\\ and
It makes the ganglia twitch I tell you!

so moving that line didn't do much of anything at all I suspect.
I ain't touchin' it.

Any bets that his doesn't happen on the Win side of things?

Thanks for spurring my curiosity so that this foolishness finally revealed itself to me.
Hope you found the story amusing.

jje

[artistsinhawaii]

What can I say?

In win terms we would say, clear your cache, empty your cookies, reboot and try again. 

But I'm curious.  Leaving the image parameter at the end of the body block, and when it disappears is there a way to force refresh?   On windows that would be a Ctrl + F5.

Anything like that on the Mac?

Dennis

[kegobeer]

There are differences between how Safari handles background images and how the rest of the browser community does.  If you do a Google for safari css background-image, you'll come across quite a few posts about the "disappearing" background image.

[jjemcm]

The BG doesn't disappear when the background-image line at the bottom of the block. Sorry if I was unclear.
In fact it's still there in the current iteration I have up on the server.

And I agree. Safari, though substantially better lately, would be the first thing I suspect.
That's why It confused me that an unaltered style.css worked fine in Safari but not in the Fox.

A little more research on it and Chris of Web Developer 0.9.4 is aware of the issue. Fixed next release etc etc.
Its covered quite well on his forum. Apparently a number of features Of WD cause it to happen and its x-platform.

Check it yourself (just remember this site is still a work-in-progress)
http://www.mollybaxter.com/CPG/index.php

Of course of all the fori and manuals I consulted trying to find a resolution, his was the one I neglected to check.

*sigh* wiggle the cable, r.t.f.m. & suspect the last thing installed. You would think I would know that by now.

twas ever such

[artistsinhawaii]

jj,

I'm glad you found a workaround for now.  At least until the new version of Safari is "in the mail."

(as a side note, however, your homepage - not the coppemine one- displays well in Opera and Firefox on Winxp, but with IE, your company logo does not display unless I do a forced refresh -- sometimes more than once.  If I don't refresh, I get a large QuickTime logo occupying that space. I thought it might be something to do with my browser but the smaller quicktime slideshow to it's right displays just fine.)

it's been a pleasure sorting this issue out with you,
Dennis

[jjemcm]

Thanks

I don't have anything to do with that home page.
I wouldn't use QT in a banner in any event.

I was only brought on board to get Coppermine running and write up the procedures for them to use it.
The actual owners of the site saw "php" and began quivering uncontrollably.