CODEWITHSUNDEEP
cssinternet-explorer
kel
kel

Reputation: 1597

CSS Issue in IE Only

I can't for the life of me figure out why specifying a image as a background for a link that it would look like this for IE and look the way it should for every other browser. The top image is IE and the bottom is every other browser. Look at the text, it is supposed to have a transparent PNG behind it and I set it to repeat. Here is the URL if you want to see the code: http://flesheatingzipper.com

enter image description here

Upvotes: 1

Views: 168

Answers (3)

Kenneth
Kenneth

Reputation: 589

My bet is that this isn't a CSS issue. My guess is that its a png issue. Depending on which version of IE you're using the rendering will be different. The early days of PNG in IE were not pretty. Especially with regards to transparency. I'm not sure why you're using this approach. I would recommend using a fully-css approach instead. You should use the following css properties to adjust a css background color to the desired transparency:

filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5;      /* khtml, old safari */
-moz-opacity: 0.5;       /* mozilla, netscape */
opacity: 0.5;           /* fx, safari, opera */

I think you'll find this approach to be much cleaner and easier in the long run with more universal output.

EDIT: As it was pointed out there is a glitch with my above recommended approach however it might be easier to get your current approach working using the techniques described here: http://www.daltonlp.com/view/217

Upvotes: 2

Jasuten
Jasuten

Reputation: 1570

Try using a 2x2px png image for the repeated background, looks like it is the bug described here: http://www.rachaelarnold.com/dev/archive/ie-gradient-bug-with-png-24

Upvotes: 1

DA.
DA.

Reputation: 40697

Since it's a solid color, I'd avoid using an image at all and use an RGBA color:

http://24ways.org/2009/working-with-rgba-colour

As for IE, you don't say which version, but IE6 and IE7 both have very wonky support for alpha transparency in PNG files. There are a variety of methods to get them working, though most still have trouble repeating as backgrounds. You could try, instead of repeating a small image, just using one larger image.

Or, be pragmatic. Use the RGBA and just let IE degrade into a solid color. We need to stop babying IE users ;)

Upvotes: 0

Related Questions