10 replies [Last post]
ScareBBear
Offline
newbie
Last seen: 14 years 48 weeks ago
Joined: 2008-02-28
Posts: 4
Points: 0

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 Smile

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 17 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ScareBBear
Offline
newbie
Last seen: 14 years 48 weeks ago
Joined: 2008-02-28
Posts: 4
Points: 0

Alas, it did not work, but

Alas, it did not work, but many thanks Tyssen. Do you have any other suggestions?

Smile

Suzy
Suzy's picture
Offline
Regular
Last seen: 14 years 42 weeks ago
Joined: 2003-05-30
Posts: 48
Points: 0

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?

Suzy

ScareBBear
Offline
newbie
Last seen: 14 years 48 weeks ago
Joined: 2008-02-28
Posts: 4
Points: 0

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?

Smile

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

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

I'm no expert, but I fake one on teh Internets

Suzy
Suzy's picture
Offline
Regular
Last seen: 14 years 42 weeks ago
Joined: 2003-05-30
Posts: 48
Points: 0

(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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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(Drunk.

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ScareBBear
Offline
newbie
Last seen: 14 years 48 weeks ago
Joined: 2008-02-28
Posts: 4
Points: 0

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...

Smile

Suzy
Suzy's picture
Offline
Regular
Last seen: 14 years 42 weeks ago
Joined: 2003-05-30
Posts: 48
Points: 0

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 Wink

Suzy

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 48 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Suzy wrote:… Gary if

Suzy wrote:
… Gary if it were as easy as ABC we wouldn't be here we'd be linking to PIE all the time Wink
True, true. But if it weren't for PIE back in the day, acting as a clearing house for solutions as we foundered about with IE, ….

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.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.