|
IE and background-attachment:fixed on non-body elements
I've had good success with using
:: Code :: background-attachment: fixedAny ideas? Thanks, Matthew Back to top |
|||||
|
You're right, what can I say, it doesn't work on IE.
Here's a test page for this MSIE background attachment bug. Works fine in Firefox (of course, it always does...), works perfect in Opera. But not in MSIE. Gee, are we surprised? No. Do we expect better from the forthcoming MSIE 7? Personally, no. But it would be nice to be pleasantly surprised. A browser correctly displaying the CSS would show the left ball, which is in an image tag, scrolling as you scroll the page, and the two right balls fixed. It would also show the return link in a small yellow block, also fixed, with a margin. As you can see, in MSIE the top body positioned ball is fixed, and the div centered ball isn't. I tried various combinations of positions on the div to see if it would make a difference, but it doesn't. MSIE only shows the top centered ball, rightmost as fixed. :: Code :: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>background test</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { margin:0;padding:0; background: url(/images/test/ball1.gif) no-repeat fixed top; } div { background: url(/images/test/ball1.gif) no-repeat fixed 180px 300px; height:2000px; } </style> </head> <body> <div> <img src="/images/test/ball1.gif" width="200" height="200" alt="" /> </div> </body> </html> If you want to run this at home, just add http//:techpatterns.com in front of each image url. Just to be fair, since MSIE 5 and 6 are really getting pretty old, I tested this on Opera 6: worked. Then I decided to go way back, to Opera 5: worked. Then I tried Mozilla 1.0: worked. Then Netscape 6.2 [mozilla 0.9.2]: worked. Hmmm. Oh well. I added some more code to the sample page to show how MSIE 5x also doesn't support position:fixed at all, and also is unable to correctly apply width:auto to a span tag set to position:fixed. Note also that MSIE appears to position the middle ball from the center, not the top like Opera and Firefox do. Back to top |
|||||
|
So it doesn't work and there's no hack. Rats, I was hoping there'd be some kind of work-around for it.
I sure hope IE7 is better than its predecessors. Judging from the comments coming out of the Channel 9 wiki and a few screenshots I've seen, MS is working more on the interface (copying Firefox features) than anything else. Too bad; the fixed background and position properties allow for some really neat design techniques. Guess it's back to using Dean Edwards' IE7 javascript for now. Back to top |
|||||
|
hi, i just wanted to share my experience with you all.
first of all, i can't wait to the day when most browsers have some kind of reasonable standards! such a pain in the butt to always have to deal with each little bugs as a developer wanting his pages to be friendly with the popular broswers... sorry there i just had to share my pain lol ... anyway, if it can help anyone... all i wanted was fixed background in IE and Mozilla :) so i've simply combined the following: CSS part: background-attachment:fixed html part: <body bgproperties="fixed"> as simple as this! but still anoying when you have to put up with each little broswer differences can you feel the rage? lol Back to top |
|||||
|
Depending on doctype of course, that inline css in the body dec won't validate....
Back to top |
|||||
|
All times are GMT - 8 Hours
|
|||||