Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Sarah Jee Watson
.a{fill-rule:evenodd;}techdegree seal-36
Sarah Jee Watson
UX Design Techdegree Graduate 28,197 Points

Smells Like Bakin: Flexible Images Vector Graphics

Swap out <img src=”img/love-at-first-bite.gif alt=”Love at First Bite”> tag with the correct HTML markup to instead bring in an love-at-first-bite.svg, located in the same “img” folder.

Really cannot get my head around this one!

I have added object to the css: 

img, object {
max-width: 100%;
}

And this to the html:

<object data="img/love-at-first-bite.svg" type="image/svg+xml">
<a href="img/love-at-first-bite.svg">
<!--[if lte IE 8]-->
<img src="img/love-at-first-bite.gif" alt="Love at first bite">
<!--[endif]-->
</a>
</object>

To replace: 

<div class="grid_2 omega"><img src="img/love-at-first-bite.gif" alt="Love at First Bite"></div>

It says "Be sure to add the svg object. What am I doing wrong?

5 Answers

Jennifer Fry
Jennifer Fry
9,855 Points

I used the following which rendered as a correct answer:

            <div class="grid_2 omega">
      <object data="img/love-at-first-bite.svg" type="image/svg+xml" alt="Love at First Bite"></object>
            <img src="img/love-at-first-bite.gif" alt="Love at First Bite">
            </div>
Ian Pilsner
Ian Pilsner
5,174 Points
Ian Pilsner
Ian Pilsner
5,174 Points

It looks like you're doing a code challenge. In the case of these code challenges I have noticed that if you don't follow instruction explicitly, the "code checker" will fail you. In a real world situation "alt" text case sensitivity does not "break" the code however for these tests if you don't type exactly what they ask for it will fail.

So they're asking for " Love at First Bite", take a look at your code and you'll see the problem :)

It's frustrating I know, but it helps train us to be detailed.

Sarah Jee Watson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Sarah Jee Watson
UX Design Techdegree Graduate 28,197 Points
Sarah Jee Watson
.a{fill-rule:evenodd;}techdegree seal-36
Sarah Jee Watson
UX Design Techdegree Graduate 28,197 Points

Hi Ian, Thanks for your response. I have amended the alt text to be exactly as written but it doesn't want to work! It says "Be sure to add the svg object". Am I missing something else?

<object data="img/love-at-first-bite.svg" type="image/svg+xml">
<a href="img/love-at-first-bite.svg">

<!--[if lte IE 8]-->

<img src="img/love-at-first-bite.gif" alt="Love at First Bite">
<!--[endif]-->
</a>
</object>
Robbie Poteet
Robbie Poteet
2,722 Points
Robbie Poteet
Robbie Poteet
2,722 Points

Did you ever figure this out? Because I'm stuck....

Jaime Borschuk
Jaime Borschuk
6,112 Points
Jaime Borschuk
Jaime Borschuk
6,112 Points

Jennifer Fry's answer worked for me. I initially used the code the instructor used in the video that included the IE 8 allowance, as below, but that did not work. The chart class may have also been an error.

<object data=”img/love-at-first-bite.svg” type=“image/svg+xml” class=“chart”>
<a href=“img/love-at-first-bite.svg”>
<!--[if lte IE 8]-->
<img src=“img/love-at-first-bite.gif” alt="love">
<!--[endif]-->
</a> 
</object>