SVG / CSS3 / IE conundrum

[AJ]

Hey all.

Making a new website for myself at the moment.

I'm using SVG's and CSS3 animations.

This is all well and good for the latest browsers, webkit especially, but obviously not so smart for those that went before.

I'm not the greatest when it comes to usability / coding standards & what not, so thought I'd see if the Sitepoint crowd could help!

It's not a commercial website, so it's not the end of the world for me if the IE6 crew can't use it, but what I'd like to do is substitute out the SVG's for PNG's where the browsers can't support them.

I have looked at the SVGWeb plugin, but that requires the SVG's to be used as <objects> or directly embedded into the page, which is not preferable, since I'm not sure i could then apply the CSS3 animations to them.

I was thinking of using something like: <!--[if IE]> and creating conditional code, but again, unsure of the best course of action here. On a Mac so no IE6 here to test. Running it through browsershots.org at the moment.

Here's the URL:

Alexander James


What would you do in this situation? How can I best reach a compromise?

Much obliged.

aj

[Paul O'B]

Hey all.

I was thinking of using something like: <!--[if IE]> and creating conditional code, but again, unsure of the best course of action here. On a Mac so no IE6 here to test. Running it through browsershots.org at the moment.

Hi,

I don't know much about svg but you could swap out the images for IE quite easily.

Use a conditional so target all IE except IE9 e.g. <!--[if lt IE 9]>

Then set the height and width of the images to zero but set padding equal to the height and width. This means that you will have to style each one if they are all a different size.

Finally add your png image as a background to the foreground image.

e.g.

#about img{display:block;background:url(about-img.png);height:0;width:0;padding:100px 0 0 100px;}
#about a:hover{visibility:visible}
#about a:hover img{zoom:1.5}

That seems to work for me in Ie6 - 8. Not sure if its the neatest method though.