Sent by John Albin Wilkins on 17 April 2002 02:02
Hi all,
I'm having some DNS issues with my domain name (albin.net). Some people
can see the domain and some can't! That is why Stephanie couldn't get
through to http://www.albin.net/CSS/OwenHack.html Sorry!!! I'll get
these problems fixed ASAP. Please read my notes below about fixed
background images.
> on 4/16/02 4:11 PM, Mark Newhouse at [EMAIL-REMOVED] wrote:
>> Be sure to check out Eric's fix, using the "Box Model Hack" to give
>> IE5.x/Windows a different image:
>>
>> http://www.meyerweb.com/eric/css/edge/complexspiral/demo2.html
Before updating the Complex Spiral Demo, Eric might be waiting for
Andrew Clover's javascript fix for IE's fixed background image problem
(which may be released today). Andrew's javascript ~won't~ fix the
Opera problem, however.
Let me first detail Opera and IE/win's problems with fixed background
images before I go into my fix. The to-the-letter CSS method for fixed
background images is:
.myDiv {
background-image: url(bgimage.gif);
background-position: top right;
background-attachment: fixed;
background-repeat: no-repeat;
}
Opera and IE/win position a fixed background image relative to the
.myDiv rather than to the viewport (the browser window); the CSS2 spec
is (surprisingly) clear about this matter [1]. This is the extant of
IE/win's "fixed background image" bugs since IE/win follows the CSS2
spec's (unfortunate) note [1] that browsers can treat
'background-attachment: fixed' the same as 'background-attachment:
scroll'. Opera, however, actually does fix the background image in
place. While this may ~sound~ better than IE/win's implementation, it
is actually far worse. Since Opera has fixed the background image
relative to the .myDiv's /initial/ position, when the document is
scrolled, the .myDiv's content flows up PAST THE EDGE OF THE IMAGE!!!
If the .myDiv's parent has a background color which is similar to the
.myDiv's content color, you can't read the content! This bug has
horrible consequences. I've included pictures of Opera's faults at
http://www.albin.net/css/OwenHack.html (If you can get to it!) :-(
Fortunately, I've found a CSS2 selector that can be used to make Opera
(through version 6) treat the background image as 'scroll' instead of
'fixed'. Here it is:
.myDiv {
/* ... other properties as before ... */
background-attachment: scroll;
}
/* the Owen hack -- http://www.albin.net/CSS/OwenHack.html */
head:first-child+body .myDiv {
background-attachment: fixed;
}
Note that this will also make IE/win think that the background image is
'scroll'. If Andrew's forth-coming javascript can make IE/win's
background images 'fixed', you'll have to use the following CSS with it:
.myDiv {
/* ... other properties as before ... */
background-attachment: fixed;
}
/* be nice to Opera... um, maybe not. */
html>body .myDiv {
background-attachment: scroll;
}
/* the Owen hack -- http://www.albin.net/CSS/OwenHack.html */
head:first-child+body .myDiv {
background-attachment: fixed;
}
Makes you want to take up glue-sniffing, don't it?
- John
[1] http://www.w3.org/TR/REC-
CSS2/colors.html#propdef-background-attachment
