Question

I gave my logo in SVG format, and put <a> tag around the object element. But my anchor tag isn’t working its just shown a 10px height under the svg graphic. Look at my code, that will give a clear picture what I’m talking about..

<a href="#" class="logo">
<object data="images/tc_logo.svg" type="image/svg+xml" style="width:100%;">
<!--[if (gte IE 6)&(lte IE 8)]>
  <img src="images/tc_logo.png">
<![endif]-->
</object>
  </a>

and I gave logo class as display:block but its not working..

CSS

.logo{
width: 100%;
height: 210px;
display: block;
cursor:pointer;
}

EDITS MADE

At last I’ve found one solution, I know its not the right way but if you aren’t ready to step back with SVG.. try this..

Use html like this..

<span style="display:block; position:relative;">
<a href="#" class="logo"></a>
    <object data="images/tc_logo.svg" type="image/svg+xml" style="width:100%;">
    <!--[if (gte IE 6)&(lte IE 8)]>
      <img src="images/tc_logo.png">
    <![endif]-->
    </object>
</span>

and css would be..

.logo {
    display: block;
    height: 210px;
    position: absolute;
    width: 100%;
    z-index:9
}

hope you got the trick..

Answer 1

Here’s one ugly way:

<a href="#" class="logo">
    <![if gte IE 9]>
       <img src="images/tc_logo.svg">
    <![endif]>
    <!--[if lt IE 9]>
       <img src="images/tc_logo.png">
    <![endif]-->
</a>

Live example here.

This won’t work on the old android browsers though, so it’s probably better to look into other options, such as replacing all svgs with png fallbacks as soon as you detect a lack of svg support (requires javascript). See e.g http://css-tricks.com/forums/discussion/19965/svg-with-png-fallback/p1.