I'm trying to render a .png background image in ie6 after a mootools onclick event which changes the background image of a logo div.
here is the relevant code as it is just now-
if(!window.ie6){
$('logo').setStyle('background-image', imagePath);
}else{
$('logo').setStyles({
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+imagePath+")"
});
}
this, for whatever reason, doesn't seem to work! the event is called and works fine for all other browsers but the logo is just blank when this runs in ie6.
If anyone could shed some light on this, or has any ideas, I would be much obliged.
Cheers,
peter
have you tried saving your PNG's as PNG8 instead? this way you can gracefully handle IE6. saves all that alpha load hassel.
futher, why not try and write your css in conditional stylesheets ands simply change the class (or add more on) of the item in question rather than its inline attributes.
http://www.sitepoint.com/blogs/2008/03/20/making-ie6-friendly-png8-images/
Related
As a purely aesthetical design thing, I'm wondering if it's possible to have an element with a non-opaque background blur out the content behind it.
More specifically, when I have a modal box appear (as part of my custom alert/confirm/prompt setup), currently the background content is "faded" by having a mask over the screen the same colour as the document's background.
What I'd like to do is apply a small amount of blur (just a few pixels) to the masked content to further direct attention to the modal box.
Browser compatibility is not an issue, since as I mentioned it's purely aesthetical. Preferably I'd like it to work in IE9 as a minimum, and Chrome if possible.
Also, no jQuery. By all means, provide an answer in jQuery if you want, but I'll be translating it to raw JS before letting it near my site.
Nowadays you can use the backdrop-filter CSS Property.
CSS:
.modal {
backdrop-filter: blur(10px);
}
Not possible with pure CSS..
You could use (with its limitations) the html2canvas script to render the pages to a canvas.
Then blur that image or the part you want with http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
Use the toDataUrl to get the image and use it as a background to your popup...
It is quite an involved process and requires a lot of javascript, but i believe it to be the only way to do it...
This would require javascript (and fairly complex javascript).
From what I understand, it sounds like you're trying to create an 'Aero glass' effect where the content behind a semitransparent element is given a blurred effect. It is not possible with HTML and CSS alone (unless you consider using IE-only filters).
At the moment, there aren't any CSS properties that can dynamically apply image filters like you're describing.
The html2canvas solution presented by Gaby is potentially overkill. You can get the same effect with an iframe of the same website that has been blured (via filter blur or another technique - "-webkit-filter: blur(2px)" only works in chrome as far as I know.
This said, I'd say both solutions are really really hacky and I'd personally never use either myself. I tried this out just to see if it was possible at all out of curiosity.
See a (chrome only) example here: https://s3.amazonaws.com/blur-demo/index.html
I am trying to set an image as background in td.Its working fine with all browsers except IE6. I did google as this is famous png issue with IE6. I tried some solution using javascript but its working fine when i used img. In case of background i am not able to call any javascript method to solve the issue.
Help me if you have some solution ?
I don't believe that any solution exist for this problem. However, I wouldn't worry too much as IE6 market share is decreasing rapidly and in some geographies such as US/Europe, its less than 2-3%. See http://www.ie6countdown.com/
Said that IE6 support is must then I will suggest that you create an alternate image type (gif or jpeg) and use that instead of png. You can use IE6 specific CSS hacks to use the alternate version and thereby delivering the PNG to other browsers.
EDIT
Doesn't CSS such as below work for you
td.myClass {
background-image: url(bg.png);
_background-image: url(bg.gif); /* IE6 Hack */
}
I have a transparent .png image file which I have attached it on my site, however the file has some background colour (grey) which I have no understanding why it is there. It's sure in transparent mode when I open it in any image editor or view, it has transparent background. Why when I link it, and when displaying on my site it isn't transparent ?
This is the method I'm using http://book.cakephp.org/#!/view/1441/image
I've tried embedding the image in CSS but find it a bit troublesome because I need the image to be clickable that links to my homepage.
Anyone can suggest any way to achieve the result I mentioned? ..perhaps some links or scripts that would work..I appreciate that.
:-)
It's possible there's some reprocessing going on. Do you have a link to the image, or better yet a link where we can see the markup / CSS as well?
I found a way to solve this not sure if it's the best but it works.
http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/
If you're using IE6, the grey background will be there because IE6 does not support alpha-transparency in images (without using behaviours or hacks).
This might help:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
I have a fairly image heavy site and have image rollovers (:hover) on a lot of images on the page. The page loads but the rollovers images take longer to load and cause a flickering when the user intially rolls over the image. I know that this issue has been disscussed many times however I have not found an appropriate solution that works.
I am using safari, background rollovers are done through css. Need some kind of hover image preloader or delay script or similar but any suggestion is welcome
Thanks
Check out CSS Sprites. That's the time-tested, tried and true technique for avoiding flicker like this on hovers.
MAJOR UPDATE:
I have a PNG fix working on the site. When I remove the PNG fix the red cross and border disapear. What's odd is that the problem only seems to do it with this particular image. There are other Alpha Blended PNG's on the same page that render fine.
The image is not broken (you can see it) nor is it a link. But IE6 and 7 both put a box around it and a red cross on it. It also strips the styling.
UPDATE: The image is NOT a background image, and the image is definitely not broken. You can actually see the image, works fine in Safari, Firefox, Chrome and Opera.
It's a plain old regular image tag
<div class='container'>
<img src='../images/leader_concierge.png' class='page_leader' width="917" height="257" />
</div>
here's the css
.page_leader { margin: 10px 0; }
and here's the exact same thing in safari
You are missing the replacement gif.
All PNG fix methods require that a transparent gif be available to replace the png image, it's part of how the substitution works. If that gif is missing, then you get this broken image appearance even tho the PNG draws fine.
In the case of iepngfix.htc, it expects the file to be at /images/spacer.gif
In firefox with the Web Developer Toolbar you can view broken images. In firefox the image would still be broken but you wont see anything like IE6 and IE7 show.
Note, that in xhtml (well, you closed the img tag) you should use " instead of '.
If you are using iepngfix.htc you need to open it up and set the blank image path. The image needs to be a 1x1 .gif.
Looks like I was just barely beaten to the punch.
Yes, I had the same problem, and it was also with iepngfix.htc which allows transparency in IE6.
Yes, the required accompanying gif image was on the images folder, as instructed.
So I went into the htc file and entered the exact link and now everything works perfectly!
Firefox and 'the other browsers' handle broken images more elegantly, but the image almost certainly is broken - they just aren't rendering it. Perhaps try to get in the habit of regularly checking your site logs for 404s, as it's not always obvious that you have a broken image in a contemporary browser.
Edit: Given your recent discovery, perhaps open the pngs in question in something like TweakPng - you may find that there are chunks causing this behaviour that you can safely remove. Compare the effected pngs with pngs that work properly and remove the offending chunks.