Hello all,
The site I'm working on has an interesting issue when scrolling in IE6. What happens is that my faux column background image changes height, in visibility, when scrolling back and forth from the bottom. Not only that, it sometimes appears chopped off halfway down or not at all when the page is refreshed.
My template uses an outer div at 100% width with a background image set to repeat-x. Inside that is another div with a fixed width and a background image set to repeat-y. It's this div that contains my faux columns.
Here's a link to a template which shows the problem when viewed in IE6: http://grasshoppermarketing.co.uk/badenochandclark/website_merged/browse_jobs_1.php
If anyone has any idea what's causing this I'd love to hear it as I've searched long and hard for an answer and have come up with nothing!
Thanks in advance
All three of your main
All three of your main columns are floated but it looks like #wrapper isn't containing them properly. Adding overflow: hidden to #wrapper may fix it (note that for overflow: hidden to contain floats in IE6 you need a width or height, but you've already got that).
Alas, it did not work, but
Alas, it did not work, but many thanks Tyssen. Do you have any other suggestions?
try changing the
try changing the background-position of the #wrapper images to
background-position: 0 0; or 50% 0;
I think the center (which means center both horizontally and vertically) is confusing it for the vertical?
Thanks for your reply Suzy
Thanks for your reply Suzy but neither of your suggestions fixed the problem! There's something about the way I've set up the page that IE6 doesn't like - I wish I knew what it was!
Any other suggestions?
It's on the body??
You said the background image is on an outer div. Isn't it on the body? Which also would seem to be the safest thing to put it on. Am I looking at the wrong image? It's the light blue strips right?
Suzy-- I heard from deathshadow that IE (all IE's I guess) won't supply the default "center" that's expected if you only give one value... that is, while we should be able to just say background-position: center;, IE requires us to say background-position: center center;
silly IE
(this sounds and feels like
(this sounds and feels like peekaboo)
another suggestion, add postion: relative; to #wrapper
stomme, yes as always with IE you need to help it count, be very precise about what you want from it! I've also once came across a case where the actual order of the background properties fixed a problem, and one where IE6 worked better with the longhand properties than the shorthand one - have never been able to recreate either of them, but hey ho
Suzy,If it's the Peekaboo
Suzy,
If it's the Peekaboo Bug, I believe you need to position both the parent and the float element(.
The Peekaboo bug also responds to giving the parent container hasLayout.
I summarized the Peekaboo fixes, using John Gallant's (PIE) test case, plus added one fix I found elsewhere (as I recall) and a modification I think you're familiar with.
cheers,
gary
Oh my god it's fixed! I had
Oh my god it's fixed!
I had a quick read of the peekaboo fix link (never heard of this bug before) and I tried adding an empty div before the clear div to make sure the floated elements weren't touching the clear div and ta-dah! The problem is FIXED!!! Thanks HEAPS Gary and Suzy.
I'm off to do a happy dance...
You're Welcome
YW, glad you found your fix, CSS is full of choices and there is always a choice that suits (else we'd say so).. haven't found an "au contraire" yet..
Gary if it were as easy as ABC we wouldn't be here we'd be linking to PIE all the time
Suzy wrote:… Gary if
… Gary if it were as easy as ABC we wouldn't be here we'd be linking to PIE all the time
Thanks to John and Holly's site/work[1] we were able to pretty much suss out the underlying causes of IE's strange behaviors, and can now come up with our own variations. Or, at least you can; I'm pretty much still copy-catting.
cheers,
gary
[1] Not to ignore Ingo, Bruno, George, et al.