I have a CSS style which displays a png image in background. It works well in all browser, except in ie6.
In ie6 the bacground image is stretched to fit the block. How do I solve this ? Here's the CSS which I'm using to do this.
.error
{
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
IE7 / FF3.5
IE6
You probably use a png transparency fix script for IE6, I think the problem lies there because it probably applies a scale method.
Read the comments on this page.
The documentation of your png transparency fix will probably cover this.
I personally found using transparent pngs in IE 6.0 to be a major pain in the ass despite all the various fixes out there. I know this is not an original answer, but I would probably just do a conditional check and replace the image with a gif or jpg version if you really need to support IE 6.0 here, instead of relying on hacks to support this. Or just drop IE 6.0 already, this year, I've talked every single client into not supporting IE 6.0 on their new projects. Seriously, it's about damn time that thing stopped making our professional lives so god damn miserable.
If you're using the AlphaImageLoader filter, make sure sizingMethod='scale' is not present. Remove it or set it to image instead of scale.
Belatedpng is the best script I have found for this problem:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
set actual width and height for the background image and background-position.
.error
{
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
background-position:left;
width:251px;
height:72px;
background-repeat:no-repeat;
}
here width and height are actual size of the error.png image. hope it helps.
Related
Is there a way to create a cross-browser, pure CSS3 text color gradient?
So, no png's. No 'webkit' only.
EDIT: To be more precise: It's CSS3 only, and it's for text, not box gradients.
EDIT: I found this solution, but it's only for webkit.
There is no cross-browser way to do this outside webkit because only webkit currently has a background-clip: text, and this extension to background-clip is not on standards track (as far as I am aware). If you want to relax your CSS3 requirement, you can accomplish the same effect cross-browser with Canvas (or SVG), but then you're talking about HTML5-capable browsers only.
There is no "pure" CSS way at the moment, but there is a way using CSS and some duplication of content. See my server side css gradient text solution here, which doesn't require JavaScript or plain background.
You can also do this client side using JavaScript, see what Dragonlabs has done here.
As I've already pointed out as a comment in zzzzBov's response, there is a way to achieve a text gradient in CSS3 only.
If you take the PNG solution a bit further, you can do the same trick with css3 gradients.
Of course this does only work for text that is on a uniform background color.
Best solution at the moment is to use a solid color as non-webkit fallback and then use the following technique ( requires webkit ):
h1 {
color: $333;
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<h1>Example</h1>
I am building a website with a TON of png-24 files that have transparent background. In IE 6 they obviously aren't displayed correctly, so I need some sort of reliable, good solution that will fix the PNG problem in IE and require little work and be reliable. Any good ideas?
For IE6 transparency I follow a personal flow:
1. If there is just one or two PNG images (like a logo, or a normal image) I just use filter:
#selector {background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='crop');}
Problems: If applied to a link, it will no longer be clickable. Possibly apply to the h1#logo and have the a be transparent.
2. If I have a lot of 24-bit PNG files, or special use cases (repeating background, etc), I use DD_belatedPNG
IMPORTANT FOR IE7 + IE8: You cannot animate or combine the filter:alpha (which is used for overall opacity on an element in IE and also used by jQuery to set opacity) property with 24-bit transparent PNG images. It changes it to look like 8-bit transparency, with everything that is not 100% opaque or transparent taking on a black background.
Here are a few good png fixes for ie6:
http://labs.unitinteractive.com/unitpngfix.php
http://www.twinhelix.com/css/iepngfix/
There are a lot IE PNG fixes on the net, which basically all work with the same technique. The older Internet Explorers do not support alpha in PNGs directly, but they all have a filter that does so. So writing the following code as part of a css of an object puts the image in the src to the background of the element:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');
That way, you can easily display transparency in the Internet Explorer. However it's a lot easier to just get one of the png fix scripts (in JavaScript) and include it to your page inside of conditional comments. Then the script will make all your images working automatically.
We used Dean Edwards' IE7 for this. (So named before IE7 came out.) It's been good for that kind of thing.
There are currently many options to get this working. The standard is apply a DirectX filter through CSS to change make the PNG transparent in IE6. There are even scripts that will automatically do this when the webpage loads from an IE6 or less client.
http://www.google.com/search?btnG=1&pws=0&q=transparent+png+ie6
Does IE6 support css-sprites?
Yes IE 6 supports sprites but doesn't support 24 bit PNG transparency.
I use this css hack for giving IE < 7 a gif file and everything else a 24 bit png with transparency.
background-image:url(/images/sprites/icons-sprite.png);
_background-image:url(/images/sprites/icons-sprite.gif); /* IE<7 gets the crappy icons */
You can also use Glue http://gluecss.com/
It's an open-source command line tool to generate sprites.
CSS sprites is a general solution using backround-position, which is avaible even in IE5.
A good tutorial about them is located here: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
I have encountered the IE6 CSS sprites problem myself - I blogged it here:
There's a really easy fix - I quote myself here...
Luckily, the solution wasn't too bad. Internet Explorers passim seem to ignore overflow:hidden when a child element is set to position:relative. Not good news... but the solution is easy - set the element with overflow:hidden to also be position:relative and then change the position:relative declaration on the child to be position:absolute... the jobs a goodun.
The full details can be found on that link.
Yes. If you're using PNGs though you should consider a few things. Here is a decent summary of IE 6 PNG issues:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
Yes.
CSS sprites is just a technique to use offset on background images to display different parts of the same image in different elements.
I use CSS sprites on for example the main menu on the website of the company I work for, and the flags on my own web site. I started using it before it was even called CSS sprites...
Browsers which support background-position property will support CSS sprites also.
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Please take a look at the following questions also
CSS Sprites images rendered with bad quality in IE
CSS Sprite Help
You could just use an online sprites generator. There are so many of them available for free and most of them support all browsers.
Sprites can work perfectly in ie6. But a png image will not work, so use a gif. If you process a gif with Smush.it to losslessly remove overhead, you might get a file size smaller than the corresponding png.
background image of type PNG is not transparent in ie6
See these posts
IE6 PNG transparency
How to use semi-transparent png images in IE6
This is a known issue in IE6: Transparent PNGs are only supported with some hacks.
This is a well-know bug. There are several workarounds, e.g. you can try using Google's ie7-js library.
I think you should definitely check the JQuery plugin called Supersleight, created by the guys on All In The Head & 24 Ways. They fixed some problems that comes with using AlphaImageLoader on IE6. From the 24 Ways page:
Works with both inline and background images, replacing the need for both sleight and bgsleight
Will automatically apply position: relative to links and form fields if they don’t already have position set. (Can be disabled.)
Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
Detects background images set to no-repeat and sets the scaleMode to crop rather than scale.
The last one is the most important! Here are the links:
http://allinthehead.com/retro/338/supersleight-jquery-plugin
http://24ways.org/2007/supersleight-transparent-png-in-ie6
I had an issue once about png transparency in ie6 and what saved me was this:
http://allinthehead.com/retro/338/supersleight-jquery-plugin
hope it help.
Our (beloved) designer keeps creating PNG files with transparent backgrounds for use in our applications. I'd like to make sure that this feature of the PNG works in "older" browsers as well. What's the best solution?
edits below
#mabwi & #syd - Whether or not I agree about the use of a PNG is not the point. This is a problem that I need to solve!
#Tim Sullivan - IE7.js looks pretty cool, but I don't think I want to introduce all of the other changes an application. I'd like a solution that fixes the PNG issue exclusively. Thanks for the link.
IE PNG Fix 2.0 which supports background-position and -repeat!
Also paletted 8-bit PNG with full alpha transparency exist, contrary to what Photoshop and GIMP may make you believe, and they degrade better in IE6 – it just cuts down transparency to 1-bit. Use pngquant to generate such files from 24-bit PNGs.
I've found what looks to be a very good solution here: Unit Interactive -> Labs -> Unit PNG Fix
update Unit PNG is also featured on a list of PNG fix options on NETTUTS
Here are the highlights from their website:
Very compact javascript: Under 1kb!
Fixes some interactivity problems caused by IE’s filter
attribute.
Works on img objects and background-image attributes.
Runs automatically. You don’t have to define classes or call
functions.
Allows for auto width and auto height elements.
Super simple to deploy.
IE7.js will provide support for PNGs (including transparency) in IE6.
I've messed with trying to make a site with .pngs and it just isn't worth it. The site becomes slow, and you use hacks that don't work 100%. Here's a good article on some options, but my advice is to find a way to make gifs work until you don't have to support IE6. Or just give IE6 a degraded experience.
Using PNGs in IE6 is hardly any more difficult than any other browser. You can support all of it in your CSS without Javascript. I've seen this hack shown before...
div.theImage {
background : url(smile.png) top left no-repeat;
height : 100px;
width : 100px;
}
* html div.theImage {
background : none;
progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}
I'm not so sure this is valid CSS, but depending on the site, it may not matter so much.
(it's worth noting that the URL for the first image is based on the directory of the stylesheet, where the second is based on the directory of the page being viewed - thus why they do not match)
#Hboss
that's all fine and dandy if you know exactly all the files (and the dimensions of each) that you're going to be displaying - it'd be a royal pain to maintain that CSS file, but I suppose it'd be possible. When you want to start using transparent PNGs for some very common purposes: a) incidental graphics such as icons (perhaps of differing size) which work on any background, and b) repeating backgrounds; then you're screwed. Every workaround I've tried has hit a stumbling block at some point (can't select text when the background is transparent, sometimes the images are displayed at wacky sizes, etc etc), and I've found that for maximum reliability I'll have to revert to gifs.
My advice is to give the PNG transparency hack a shot, but at the same time realise that it's definitely not perfect - and just remember, you're bending over backwards for users of a browser which is over 7 years old. What I do these days is give IE6 users a popup on their first visit to the site, with a friendly reminder that their browser is outdated and doesn't offer the features required by modern websites, and, though we'll try our best to give you the best, you'll get a better experience from our site and the internet as a whole if you BLOODY WELL UPGRADED.
I believe all browsers support PNG-8. Its not alpha blended, but it does have transparent backgrounds.
I might be mistaken, but I'm pretty sure IE6 and less just don't do transparency with PNG files.
You sort of are, and you sort of aren't.
IE6 has no support natively for them.
However, IE has support for crazy custom javascript/css and COM objects (which is how they originally implemented XmlHttpRequest)
All of these hacks basically do this:
Find all the png images
Use a directx image filter to load them and produce a transparent image in some kind of format IE understands
Replace the images with the filtered copy.
One thing to think about is Email clients. You often want PNG-24 transparency but in Outlook 2003 with a machine using IE6. Email clients won't allow CSS or JS tricks.
Here is a good way to handle that.
http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/
If you export your images as PNG-8 from Fireworks then they'll act the same as gif images. So they won't look shitty and grey, transparency will be transparency but they won't have the full 24 bit loveliness that other browsers do.
Might not totally solve your problem but at least you can get part way there just be re-exporting them.
I might be mistaken, but I'm pretty sure IE6 and less just don't do transparency with PNG files.
I have two "solutions" that I use. Either create GIF files with transparency and use those everywhere, or just use them for IE 6 and older with conditional style sheets. The second really only works if you are using them as backgrounds, etc.