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

General Discussion

gareth connop
gareth connop
14,865 Points

Modernizr not completely working for me

I am trying to provide fallback for browsers that don't support svg's and didn't want to use IE conditionals. I therefore implemented modernizr.

Unfortunately, although it is working on my logo, it isn't working on any of my icon images. Can someone give me an idea as to why this might be?

Code below for logo works:

HTML:

<a href="<?php echo BASE_URL; ?>">
    <div id="logo">
        <h1>Gareth Connop Web UI/UX Designer</h1>
    </div>
</a>

CSS:

#logo {
    width: 275px;
    height: 61px;
    float: left;
    margin: 20px 0 20px 0;
    background: url(data:image/svg+xml;base64,......) no-repeat top left;
}

.no-svg #logo {
    width: 275px;
    height: 61px;
    float: left;
    margin: 20px 0 20px 0;
    background: url("../images/logo.png") no-repeat top left;
}

Code below for icon doesn't work:

HTML:

<li id="phone">
    <a href="tel:mynumber">
        <?php
        include(ROOT_PATH . 'inc/phone.svg');
    ?>
        <div id="phone_fallback"></div>                                         
    </a>
    <a href="tel:mynumber" class="infophone">mynumber</a>
</li>

CSS:

#phone {
    width: 153px;
    float: left;
    margin: 0 23px 0 0;
}

#phone_fallback {
    display: none;
}

.no-svg #phone_fallback {
    background: url("../images/phone.png") no-repeat top left;
}

#phone svg, .no-svg #phone_fallback {
        width: 15px;
    height: 30px;
        margin: 0 6px 0 0;
}

1 Answer

Matthew McCulloch
Matthew McCulloch
5,341 Points
#phone_fallback {
  display: none;
}

I don't have an environment set up to test php, but are you ever setting this div back to visible? inline-block is probably what you want from the looks of it.

.no-svg #phone_fallback {
  background: url("../images/phone.png") no-repeat top left;
  display: inline-block;
}
gareth connop
gareth connop
14,865 Points

Thanks for that Matthew. It now works perfectly.