[css-d] Safari 2.0.3 background-repeat problem
I've bumped into a background-image display problem on Safari 2.0.3
-- I've heard of the no-repeat bug showing up in older versions of
Safari, but I was under the impression it was fixed... and perhaps it
is, but I'm doing something wrong.
I'm using a little display box with rounded corners on the top left
and right. The corners are accomplished via 2 background images. The
background-image on the right appears to be repeating vertically,
despite a no-repeat. The right corner is vertically positioned 10px
due to the icon in the left corner (see the test page).
I've posted a test file at http://www.monkeypuzzle.net/testfiles/
safari_repeat/
A screenshot of what I'm seeing is here: http://www.monkeypuzzle.net/
testfiles/safari_repeat_screenshot.gif
the html looks basically like this:
div class=schedule box
div class=boxheadh2header/h2/div
div class=boxbody content here /div
div class=boxfoot footer content here /div
/div
and the css looks something like this:
.box {
border: 0;
font-size: 100%;
width: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
.boxhead {
background-color: #FFF;
background-image:url(Package/App/images/branding/hdr/
cap_type1_right.gif);
background-repeat: no-repeat;
background-position: 100% 10px;
text-align: left;
}
div.schedule .boxhead h2 {
background: url(Package/App/images/branding/hdr/
capLeftSchedules.gif) no-repeat top left;
}
I've put all relevant css into the page head
In IE6-Win and FF1.5-Mac there are no problems. Any insights?
Thanks as always,
Rolf
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari 2.0.3 background-repeat problem
On Mar 6, 2006, at 1:05 PM, [EMAIL PROTECTED] wrote: I've posted a test file at http://www.monkeypuzzle.net/testfiles/ safari_repeat/ A screenshot of what I'm seeing is here: http://www.monkeypuzzle.net/ testfiles/safari_repeat_screenshot.gif Sorry - One of the links I posted was incorrect: I've posted a test file at http://www.monkeypuzzle.net/testfiles/safari_repeat/ A screenshot of what I'm seeing is here: http://www.monkeypuzzle.net/testfiles/safari_repeat/ safari_repeat_screenshot.gif Rolf __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari 2.0.3 background-repeat problem
On Mar 7, 2006, at 6:05 AM, [EMAIL PROTECTED] wrote: 've bumped into a background-image display problem on Safari 2.0.3 -- I've heard of the no-repeat bug showing up in older versions of Safari, but I was under the impression it was fixed... and perhaps it is, but I'm doing something wrong. I'm using a little display box with rounded corners on the top left and right. The corners are accomplished via 2 background images. The background-image on the right appears to be repeating vertically, despite a no-repeat. The right corner is vertically positioned 10px due to the icon in the left corner (see the test page). I've posted a test file at http://www.monkeypuzzle.net/testfiles/ safari_repeat/ A screenshot of what I'm seeing is here: http://www.monkeypuzzle.net/ testfiles/safari_repeat_screenshot.gif Yes, that is the same background-repeat bug when the image is larger than the size of the box. The bug has been fixed in nightly Webkit builds, (future versions of Safari). BTW - Konqueror 3.5 appears to suffer from the same bug. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari 2.0.3 background-repeat problem
On Mar 6, 2006, at 4:00 PM, Philippe Wittenbergh wrote: Yes, that is the same background-repeat bug when the image is larger than the size of the box. The bug has been fixed in nightly Webkit builds, (future versions of Safari). BTW - Konqueror 3.5 appears to suffer from the same bug. Philippe Thanks Philippe So... is there no hack or fix, other than to create a new graphic with added white space on top? It's not the end of the world, but I was hoping not to create a unique graphic just for this situation. I've tried everything I can think of short of doing that... Rolf __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari 2.0.3 background-repeat problem
On Mar 7, 2006, at 9:09 AM, [EMAIL PROTECTED] wrote: Yes, that is the same background-repeat bug when the image is larger than the size of the box. The bug has been fixed in nightly Webkit builds, (future versions of Safari). BTW - Konqueror 3.5 appears to suffer from the same bug. Philippe Thanks Philippe So... is there no hack or fix, other than to create a new graphic with added white space on top? It's not the end of the world, but I was hoping not to create a unique graphic just for this situation. I've tried everything I can think of short of doing that... As your box has a fixed width, you should be able to do it with just on image, applied boxhead h2. Else, add the 10px white part to the cap_type1_right.gif image. What works as well, is the CSS3 (draft) property: background-position-y background-position: 100% 10px ; /* all browsers */ background-position-y: 10px; /* Safari 1.3 and 2.0 */ Note, I haven't tested this extensively, It works in a quick and dirty test here, and doesn't appear to have side effects on other decent browsers. Please let us know how this goes. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari 2.0.3 background-repeat problem
On Mar 6, 2006, at 4:54 PM, Philippe Wittenbergh wrote: As your box has a fixed width, you should be able to do it with just on image, applied boxhead h2. It's only fixed width in this test file - I've pulled this out of a much more complicated page to try and isolate the problem. Else, add the 10px white part to the cap_type1_right.gif image. What works as well, is the CSS3 (draft) property: background- position-y background-position: 100% 10px ; /* all browsers */ background-position-y: 10px; /* Safari 1.3 and 2.0 */ Note, I haven't tested this extensively, It works in a quick and dirty test here, and doesn't appear to have side effects on other decent browsers. Please let us know how this goes. The CSS3 property did not seem to work for me. But I will modify my graphic and be done with it for now. Thank you! Rolf __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
