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
Related
I found a way to do this with CSS3, but IE still doesn't support it. I wish to know if there is a way to do it so that it may be compatible with all of the popular browsers.
I understand I can do it with a mask, but if I want to display a user-uploaded image in the background this is not an option or at least I don't know how to achieve that. Can anyone give me an idea about it? Maybe an image processing in the background when the image is uploaded to turn it into circle and make a transparent background, but I don't know how to process that?
You can do this via CSS3 border-radius, but as you mentioned, old IE does not support this property.
But PIE.htc (PIE.js in my example) can pollyfill this in-
hence- http://codepen.io/hwg/pen/IBrow.
This uses standard border-radius, and a copy-and-pasted pie.js,
The border radius is 50% of the height and the width of the image.
I can't speak for performance (see the docs), but I think this does what you want.
You can overlay a PNG image that has a transparent circle in the middle of a square with the background color you need. Then position this over the uploaded image to give it the illusion of being a circle.
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.
I'm wondering if this is something somewhat simple, but I'm having a problem ONLY on iPad with my sprited images. I have an tag that I use a sprite for to display an image of a star (similar to gmail or picasa) to indicate a favorite. On every other browser (including safari) on a computer, it's all completely fine.
The problem is on an iPad, it's showing more of the sprite than it should and it looks strange. What's even stranger is that this image is repeated several times and it doesn't seem to happen consistently.
Is this some sort of zoom issue or viewport setting problem specifically for iPad? It's driving me crazy, and anything I do to fix it cuts off some of the image and ruins the normal browser look.
Here's an example of what I mean since I can't put up the page I'm currently working on.
On this site I've worked on in the past, the viewing options look strange on an iPad:
http://demo.qlikview.com/index.aspx?section=Life
For example the "Download" viewing option looks different on the FEMA app than on the Kick It app so it doesn't even appear to be consistent.
Any help would be appreciated.
Thanks!
This is because the iPad scales your page.
The size of your element where the sprite is used is scaled and the sprite image to. But it seems not to behave precisely.
The same thing happens when you zoom out in safari. This is because an image is not scaled the same way in the browser then a dom element. A dom element is rendered as vector object. So when you zoom in or out, the lines keep sharp. When you do the same with a bitmap. It gets blurry and the browser need to guess how the image would look like smaller or bigger.
You have two options:
use more space between the sprites.
use EMs and not Pixels in your CSS
PS: Don't use !important in your css
Like meo pointed out, best option would be to leave space between the sprites.
There is also one last thing you can do, which is not to let the user zoom the web page by putting the following line in your tag. It would look the exact same as you view in the browser, which is pretty neat if you have loads of elements messed up in the iPad because of the sprite issue.
<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0" />
Good luck!
The simplest fix for this is to put an outline around your spite with the border color the same as the parent container's background color. The outline is outside you element and does not effect layout. What you see is a problem mobile Webkit has when it scales down images with background color or background images, they bleed out of their container. The outline will sit on top of that and cover it.
What I usually do is just define separate images (non-sprited) for iPad users. I know it doesn't load as quickly as you're hoping for with sprited images, but I feel it's a price they have to pay. What I do is have individual images on the server with #media in your stylesheet to define different images for iPad browsers. A quick review of how to use #media for iPad can be found at:
http://css-tricks.com/snippets/css/ipad-specific-css/
I just ran into this problem as well. I've been leaving extra space between my sprites since I first noticed the iPad imperfections. However, my current project involved sprites and another element with CSS3 transforms. The combination made the sprites blurry, with strange clipping around the edges. I actually found a fix over at No more jagged edges in iOS. Try applying the following CSS to your sprites:
/* IOS fix for incorrectly scaled sprites */
-webkit-background-clip:padding-box;
background-clip:padding-box;
Those few lines worked magic in my project. Of course, YMMV.
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
I'm trying to create a box with round corners using images. I know how to use CSS3 but I need to use images as I have some custom made corners with shadow and transparency.
The result I need:
I have divided the box into several images:
http://i37.tinypic.com/2w6b14g_th.png
I know there is plenty of info about this topic, but I have been working with this for the last days and from the articles I've read I cannot get exactly what I need. The problem seems to be that I need the background of all images to have a some transparency (both the white part and the shadow part). Anyone has an idea on how to do this using divs?
My personal favorite technique is this one: even more rounded corners. Look at the demo page: http://www.schillmania.com/projects/dialog2/. It does exactly what you want.
Plus, unlike other techniques, you don't have to cut up your background image.
I've been wrestling with rounded corners in this way today. I'm using GIF's which have the corners in the colour of the background. Because these are GIF's the corners could be transparent, but I'd rather not worry about what's 'behind'. But in your situation a GIF would be better than a JPG(is this what you are doing?), as transparency is supported, or a PNG if you don't need to support old browsers. Then you can put the background colour in the style for the DIV is you want too.
HTH