Written pages, why in the ie6 png images in it will automatically cast a shadow
There are two possible reasons, depending on how it looks.
IE 6 doesn't support transparency for PNG images (unless you use a filter to display the image), so if there is a transparent background in the image it will be replaced with a solid gray.
The PNG format contains a gamma correction value that was intended to solve some color profiling problems, but it actually hurts as much as it helps as images are displayed somewhat differently on different systems. If you have a color in your PNG image that is supposed to match the background of the page, it might be slightly off, which will show the iamge as a square with a slightly different color.
that's one of the many bugs of IE6: wrong rendering of transparent png's.
there are a lot of JS fixes, like this one, but i've never seen one that works perfectly.
some break the clickable elements that have png background, some others change alignment or margis or position
Related
I'm adding CSS to a Bootstrap-based web app, to match a PDF from a designer. There's a button image, whose background color Seashore reports as rgb(0,186,158) aka hsl(171,100,36%). So I set the background colour of the button to match the image:
background-image: url('images/elements/small-search-button-up.png');
background-color: hsl(171,100%,36%);
Only...it doesn't.
Subtracting 3% from the luminosity fixes it:
I'd love to know why. I can't see any obvious causes in all of the other CSS styles applied. This happens in both Chrome and Firefox, on OS X Snow Leopard.
I'm seeing something similar with certain fonts (comparing the web rendered output with a provided PDF), but that cause could be different.
EDIT
Here's the original image. Hopefully SO doesn't process it.
EDIT2
Why use PNG? That's how the designer provided the images. I wasn't aware that there was a trade-off with color space information. Also, I would have thought that PNGs are better for glyphs needing flat backgrounds and crisp edges (compared to JPEGs), no?
It's most likely the color of the PNG image that is not displayed consistently.
A PNG image doesn't have color space information, instead it has a gamma value, and there is a problem to interpret that value to determine a color space. You will probably see that there is a color difference between different browsers, so if you adjust the color for how one browser displays the PNG, it won't match in other browsers.
Use a different file format if you need the color match other elements, or make the background of the PNG transparent instead of green.
Rendering text is a different matter. There will always be slight differences in how browsers renders different fonts, depending on the rendering method used, which fonts are installed, and system/user settings. You simply can't expect exactly the same result in different browsers.
Google Chrome always seems to be changing the color of an image that I'm trying to match to a background color. I tried saving it in Photoshop and GIMP and even adjusted the color settings in each but it doesn't help in Chrome. FF and IE work fine (for once).
The color of my image is #282828. After I saved it as a PNG, I reopened it in both GIMP and Photoshop and used the eyedropper tool to confirm that the color was still #282828. When it renders in Chrome it's darker. I have a div with a background color of #282828, and the image is right next to it. I took a screen shot and the div's background color was #282828 and the images background color was #1d1d1d. I tried this for several different colors and each has had the same result. I even tried making the source image the color Chrome was rendering it as but Chrome still changes it. So for example, since Chrome was changing #282828 to #1d1d1d, I made the source image #1d1d1d, and when I rendered it in Chrome it was not #1d1d1d, but some other darker color.
At this point, I'm looking for either a fix or a programmatic work-around. Because the image is transparent, has curves, and a drop-shadow, there's really no way for me to avoid replacing the it, or even parts of it, with html.
Update:
I also tried saving it as a jpg and gif. gif actually works but can't preserve the drop shadow. The image I'm using is attached. If I take a screenshot of this in Chrome, GIMP's eyedropper tool says it's #1d1d1d. If I open the original and do the same, it's #282828.
PNG uses gamma correction to try to ensure that the image looks kinda the same across all monitors, and this can cause color mismatches like the one you're seeing. It's a combination of image editor issues and browser issues: image editors are not forced to embed gamma data inside images, and browsers are free to ignore the gamma correction if it's there and free to enforce some at random when it's not there. In this case, I'd rather think that Firefox ignores it.
Use a transparent PNG if you don't want its background to interfere with your page's background.
[EDIT] For your specific case, you may be able to replicate the graphics you're looking for by styling elements, using border-radius and box-shadow, two widely-implemented CSS3 properties that reasonably decay on older browsers.
I've done CSS for many years, but I've always tried to stay away from transparent images or backgrounds due to the lack of support on older browsers. Right now I need to create rounded borders, and I know you can do this in CSS3, but just as well I can use a .png image. Neither is supported on ie6 - except there is a .png fix for ie6 which seems to work sometimes - so I'm wondering what the best approach is.
25% of my viewers use ie6 (most from middle eastern countries), so even though I wish I can pretend ie6 doesn't exist, I must.
I believe that most (if not all) .png fixes do not work for repeating or positioned backgrounds, so you will need to use a single image as the background. You would need to re-create these background images if the content of your site changed to have longer blocks of copy in these areas, as the static background images will not scale to your content.
Consider the fact that using a .png is not the best choice in terms of accessibility for visually impaired users.
For users which need to have an increased font size for reading text on screen, the text may end up running outside of the container with the .png background, and may in these cases become unreadable.
The best bet may be to use css3 to style the container, and have it fall back to square corners for IE users.
If the only thing you need is rounded corners, use CSS3 border-radius and drop in PIE.htc for IE6 support. It's probably the easiest and simplest way to go about it.
Is it possible to have a transparent photoshop image render in CSS? I tried saving as jpg and gif with transparency selected but when I overlay it in css it shows the background color behind it and not the image which is under it. I played with the z-index and it didn't help.
Thanks
JPEG images do not support transparency.
You need to save the image as a PNG file, which does support transparency.
If you need to support IE6, you'll also need to use the filter proeprty.
You need to save it using an image format that supports the type of transparency that you want. The JPEG format doesn't support transparency at all.
There are two types of transparency, transparency index and alpha channel. The GIF and PNG-8 formats support transparency index, i.e. one of the 256 colors are chosen to represent transparency. That means that each pixel in the image can only be either 100% transparent or 100% solid.
The PNG-24 format support alpha channel. That is transparency value for each pixel, so that it can be anything from 100% transparent to 100% solid (in 256 levels).
If your image has mostly fully transparent or fully solid pixels, you can use transparency index, but if it has a lot of partly transparent pixels, you have to use alpha channel.
Note that older versions of IE has problems displaying the transparency in PNG-24 images correctly.
First, have a transparent background (as in no background) as the first layer of your photoshop file.
Be sure it has grey and white squares in the background, which means it is transparent.
When you're ready to save, go to the File Menu, and hit Save for Web
Select the PNG file format and be sure it has "Transparency" checked.
Just press SAVE and give it a name and that photoshop image will be saved into a transparent background PNG file which presents more colors, and it's smaller than a GIF file and is as good as a jpg.
As SLaks pointed out, use a PNG image file for this. JPEG won't do, I am not sure why GIF wouldn't work...
I took a look at a project I was doing involving some translucent background and its CSS, and this is what I found:
background-image: url(../images/translucent_white.png);
So it really is that simple. Just save your picture with transparency as a PNG.
You need to save it as a .png file as mentioned but this is tricky when it comes to IE6. It depends on if the image you have is using a gradient that transistition to the transparency. For instance a shadow.
If you have an image that has a shadow (or any gradient) than you are best off using a .png but this will now work for IE6 and you should follow the advice of SLaks. In my experience though I stay away from javascript fixes like this and just choose to save the image w/ the desired background.
If you do no have a gradient then the .gif is the way to go as it will be supported in all browsers.
I recommend using a .gif filetype; it supports transparent backgrounds and works in most cases. .jpgs don't support transparent backgrounds at all. .pngs support nice alpha-transparent backgrounds, but not in IE6. (Using the AlphaImageLoader filter can cause page slowdown and browser crashes.)
First off, make sure that your image has a transparent background in Photoshop - often a white and grey checkerboard. Then, choose "Save for Web" (or something close to that, it varies in different versions) from the File menu, choose whatever GIF preset works best, and be sure that "Transparency" is checked.
I've tried jquery.pngFix.js and pngfix.js and neither seem to cater for all issues.
Any images that are anchored end up distorted with the former and the latter doesn't like positioned/repeating background images.
Unfortunately the design I'm working on calls for PNGs to be used in the way I have done, so I'm not really sure where to go from here?
google for DD_belatedPNG - this is the best one I have seen
You can check out this site for a decent fix:
http://www.greyhats.com/tech/a-better-ie6-png-fix-37
I have used that successfully, with some caveats. You can't make the image tile, which is a deal-breaker for some uses.
The ways I deal with transparent pngs and IE6 are:
Make the transparent color of the png the background color of your site. Works best for things like rounded corners, drop shadows and elements that overlay the background only.
If the background is a gradient or image, replace the png with a gif in your IE6 stylesheet. This is very easy if you are using sprites for background images. The rounded corners may not be as smooth in IE6 as other browsers but I consider that an acceptable trade off.
If I really need a javascript solution, I use DD_belatedPNG