/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] IE blinks on floated divs with PNG backgrounds

Copy linkTweet thisAlerts:
Mar 28.2008

Hi guys, I have a website which makes a rather high use of floated divs with png backgrounds on them. When I load with IE (7) and then start browsing, the page always just blinks and you can see like a progressive re-download of the images really fast and it’s really annoying.

Does anyone know of a fix. I think it has something to do with caching, but my IE is on default settings, and if it’s crapping out on those, then it’s not good.

Help much appreciated!

Here is the affected website: [url]http://www.turnkeyamerica.com/[/url] (still a build in progress on the content)

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelMar 28.2008 — Declare a backgrond-color similar to the sky-blue that your images are... that way, the 'background-color' will be populated milliseconds before the http-request for the background-IMAGE even begins.

And, stating a background-color OTHER than the same color as your links ("white"), will aid Accessibility s. 508 for the handicapped, -as well as those whom have images turned OFF.

I turned images OFF, and took a screenshot of your page...(attached). Nice... (well, -not [I]really[/I]..) :rolleyes:

But it's the transition from default white background to sky-blue gradient background-image that you're seeing...

( p.s., -in case anyone is wondering about the attached screenshot image, with images 'turned off', the entire page goes snow-white and there is [I]nothing[/I] to look at... unless you click/hold-&-drag your pointer-tool over the navigation, -which is WHITE-text...same color as the background of page)

[upl-file uuid=e65393f8-e92e-4778-93e9-8a8dbec7cc97 size=22kB]ScreenHunter_1.gif[/upl-file]
Copy linkTweet thisAlerts:
@bulgarian388authorMar 29.2008 — Hi WebJoel,

Thanks for the tip on the background. It does seem to fix to a degree, now you don't see the white background before the image renders, but the main problem still persists.

When you browser between pages you will notice how the images are re-downloaded over and over again which causes the flickering. I still think it has something to do with IE not caching the images the way it is supposed be, but I have no idea how to fix it, and quite frankly I don't want to resort to JS "hacks" to pre-load images or something like that.

Any other thoughts on how to fix this because I'm all out?

Thanks in advance!
Copy linkTweet thisAlerts:
@jessnoonyesMar 29.2008 — Looks to me like your png images are being called in through the CSS. I've always found that a great way to fix IE's issue with transparency is by adding this:

[CODE]div.Flare
{
background: url('../Images/FlareBackground.png') 0px 0px no-repeat;
height: 743px;
left: 0px;
position: absolute;
top: 0px;
width: 878px;
azimuth: expression(
this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src="images/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
);
}[/CODE]

Add that extra part to every background png image inside your CSS and you should be good to go!
Copy linkTweet thisAlerts:
@jessnoonyesMar 29.2008 — Huh, that added in a bunch of smiley faces. Here's a link to where you can get the code:

http://blog.veanndesign.com/2007/11/12/rogies-css-png-fix-for-ie6

The first part of code is the one you want to use. The second one offered is for use when the background image is being tiled.
Copy linkTweet thisAlerts:
@bulgarian388authorMar 29.2008 — Hi jessnoonyes,

Worked like a charm, thanks for the tip! I do have a question though. Aren't expressions very process demanding because they have to be re-run every time an event occurs? I guess on the bright side IE is only one that has to run the expression, so it's all good.

I only put the expression on the very first instance of a PNG background and it seems to have fixed all the other ones.

Thanks again!
Copy linkTweet thisAlerts:
@jessnoonyesMar 29.2008 — Great glad it worked! That's a good point you brought up, I'm not sure about the answer. I guess having to run the expression is better than having big blue boxes around the graphics ?
Copy linkTweet thisAlerts:
@WebJoelMar 29.2008 — If "div.Flare {}" is part of an external CSS file, that should be cached and not have to re-load per page.. or am I not understanding the whole picture here? ?

edit: I see that your CSS file [I]is[/I] external... no help there I guess..

-Could you move "div.Flare {}" higher up in the CSS file?

This probably [I]won't[/I] affect anything at all, but '[I]internal[/I]' javascripts can be 'sped up' a bit by doing something like that for effects that are required for the whole page... Page won't load any faster but 'effects' that 'flicker' are less noticeable if js is launched earlier rather than at/near end of file and then, populate to screen..
×

Success!

Help @bulgarian388 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...