Safari background positioning: a new bug?

Problem depends on dimensions of HTML element

[thesheep]

I don't know if this is known about or not, or if there's a fix. Looking on the web I only seem to see stuff about the old Safari bug about mixing keywords and values in the background-position property, which seems to have been fixed.

I have a large background image which I'm attaching as follows:

div#page {
...
background-position: 0px 345px;
background-repeat: no-repeat;
}

The element itself is about 400px high (but expandable depending on its content).
The background image is 1000px high, allowing for expansion.

In IEWin, FF, Opera, everything is fine.
In Safari (2.0) the background positioning starts at top left, not where it should.

Variations such as "background-position: left 345px" do not alter this.

Following experimentation, it seems that the background image does start where it should if (and only if) the div itself is taller than the background image. Otherwise it starts at the top.

Anyone else seen this and is there a way around it? It's annoying because right now it looks like I have to redesign the whole structure if I want to make it look OK in Safari.

[thesheep]

My workaround now is to make the top 345px of the background image transparent, then align it at the top.

Still be interested to hear if anyone else gets this problem.

[SuzyUK]

thesheep I haven't experience of Safari

but something from the deep and distant rings a bell, and it was about the order of the background properties in the CSS

background-position: 0px 345px;
background-repeat: no-repeat;

try swapping them, I seem to remember, but could be totally way off track :o, that they had to be stated in the order: color, image, repeat, attachment, position

let us know

Suzy

[thesheep]

Hi Suzy,

I tried this but no difference. Actually I remember something about the order of background properties in Safari, but I think it was to do with when you're listing them all in one line for the general 'background' property:

background: #fff url(mypic.gif) no-repeat left top;

As far as I remember.

Anyway looks like I will stick to using my image with a transparent block on top.

[madmac]

hmm that's odd.

Safari is my main browser (version 1.3.1).

And I use CSS sprites often, where the background is much taller than the element it is in.

Safari 1.0 does have background positioning issues, but 1.2 & 1.3 are fine. So I'd assume 2.0 would be fine with it as well.

Can you post any more of your code or a sample page? It's really hard to know anything based on just 2 CSS lines ;)

[thesheep]

div#page {
position: absolute;
top: 67px; left: 186px;
background-color: transparent;
background-image: url(images/page-bkgrnd.gif);
background-repeat: no-repeat;
background-position: 0 345px;
width: 718px;
padding-top: 4px;
}

There's a couple of layers underneath this div, so I don't want the top of the div to block them out.
The div expands downwards to fit the content.