SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2000
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question SVG / CSS3 / IE conundrum

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by AJ View Post
    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.

    Code:
    #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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •