Browser specific CSS and transparency

Jet · 29 May 2007 at 02:44

In designing a new website I want to use things like stars and gradients and to do that properly I need the background of various items to be transparent.

GIF doesn't seem to work in anything other than a basic way so obviously PNG is better for this but the problem is IE6 doesn't support it.

How do you guys get around that? Say, for example, you wanted to suspend a star over the corner of a div and not block out what's under the corners.

With that in mind I looked at the possibility of using a 1 CSS stylesheet for IE6 and 1 for all the rest. That way the IE6 may not look as good but it would be usable.

Would this work:

<link href="css/style.css" rel="stylesheet" type="text/css" />



?? Or is this not possible either?

Any help would be great.

monkeysmith · 29 May 2007 at 07:43

I'm not sure if you could have a separate css file just for IE, be interesting if you can.

There is a way of manipulating the CSS though, I cannot remember exactly, but something like this for example:

.star {
}

both FF and IE would read this, if you then added

*star {
}

I think, big think, but think IE will ignore this, but FF wont. You'd have to google further, as it may be the wrong way round, or a different symbol, something I have read before. Look for IE CSS Hacks.

Mickey · 29 May 2007 at 07:56

Jet said:
<link href="css/style.css" rel="stylesheet" type="text/css" />



?? Or is this not possible either?

Any help would be great.

You can do that, although you'd use <!--[if lte IE 6]> to target IE6 and below, IE7 supports the transparency. Have a look here too: http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/

Only problem with this is that it doesn't support repeated background images so any backgrounds you do want repeated, you'll have to make an IE6 version of the image which is big enough to cover the desired area.

Browser specific CSS and transparency

Jet

Jet

monkeysmith

monkeysmith

Mickey

Mickey