Modernizr not completely working for me

Question

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;
}

Answer 1 · 2013-06-12T12:31:48Z

June 12, 2013 12:31pm

#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;
}

Welcome to the Treehouse Community

Looking to learn something new?

gareth connop

gareth connop

Modernizr not completely working for me

1 Answer

Matthew McCulloch

Matthew McCulloch

gareth connop

gareth connop