Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.
-
Hi, I can't get the following page to work correctly.
I am using http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/ this method to provide a png fix; however, once I insert the code for it (img { behavior: url(iepngfix.htc); }), the rollover doesn't work.
Here is the page I'm working with: http://www.coastalpet.com/remington/image-rollover.html
Without the code, the rollover works fine.
Any suggestions? -
That's easy. In IE 6, you can't use the :hover element on anything except an anchor tag.
-
You should try this link for using the :hover pseudo-element on things other than anchor tags
http://www.xs4all.nl/~peterned/csshover.html -
Thanks for the reply.
The rollover actually does work in IE 6. As I said before, once I add the "img { behavior: url(iepngfix.htc); }" to the css, which fixes the pngs, it doesn't work.
So, the rollover will work if you take out the line with the "behavior: url(iepngfix.htc)" in it. -
I noticed the png fix for IE6 does indeed ruin some things in some situations. I don't think there's a real solution to it. I think you'll just have to use a transparent GIF (or a transparent 8 bit PNG, that would work in IE6 as well) instead of 32 bit PNG (but that could get ugly, depending on the background), or accept IE6 not having a rollover effect. Usually the rollover isn't really that important, so as long as it works in IE7 and other major browsers it'll be fine, i guess.
-
have you tried using filters in your css?
/*put this in an IE html comment*/
#badge:hover{
position:relative;
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/image.png');
}
/*end*/
You have to put this css after you load your initial css, and this will effect IE 6(if you tell it to just be included for IE6)
And it will allow you to use 24bit png(which can be transparent)
Otherwise i think your best bet is to just use a gif. -
Basically all you need to know is that you cannot change the background position of PNGs in IE6. It will always be top left.
-
I appreciate the comments guys. I ended up just not using a transparent background and going with a jpeg. The gifs just look awful. It worked out well. I can't wait until we can stop supporting IE6!
-
Is there a really easy fix for PNG mouseovers in IE6? A simple js script or something? You can view my issue in the sites below.
Thanks!
R. Hughes
Las Vegas Weddings
Production Music Library
1 to 9 of 9