Respond.js hiding logo image ie8

Question

I have the following page header:

    <header id="header" class="Anonymous" data-role="header">
        <div class="content">
            <div id="logo"><a href="index.php"><img src="img/logos/logo-ddf.png" alt="Dorset Dub Fest"></a></div>
            <div class="outer-nav">
                <ul class="nav links">
                    <li class="packed"><a href="booking.php" class="active link-secondary">Book Tickets!</a></li>
                </ul>
                <ul class="nav links desktop-links">
                    <li><a href="index.php">Home</a></li>
                    <li><a href="about.php">About</a></li>
                    <li><a href="news.php">News</a></li>
                    <li><a href="event.php">What's On</a></li>
                    <li><a href="sponsors.php">Sponsors</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Trade</a>
                        <ul class="dropdown-menu trade-dropdown" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="trade-info.php">2014 Trader Information</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="docs/Dubfest%20Traders.pdf">Trader Application</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="traders.php">Traders List</a></li>
                        </ul>
                    </li>
                    <li><a href="find-us.php">Find Us</a></li>
                </ul>
            </div>
        </div>
    </header>

and my CSS:

    #header {
    padding: 10px 0;
    border-bottom: 1px solid #e7e7e7;
    background: #fff;
    font-size: 15px;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.08);
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,.08);
    box-shadow: 0 2px 5px rgba(0,0,0,.08);
}

@media screen and (min-width:960px) {
    #header {
        height: 70px;
        padding: 0;
    }
}

#header #logo {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 30px;
    width: 102px;
    margin: auto;
    float: left;
}

#header #logo img {
    height: 100%;
    width: auto;
}

@media screen and (min-width:960px) {
    #header #logo {
        margin: 20px 0 16px;
        float: left;
        height: 35px;
        width: auto;
    }

    #header #logo img {
        width: 270px;
        height: 130px;
    }
}

#header .content {
    position: relative;
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1170px;
    *zoom: 1;
}

#header .content:before, #header .content:after {
    display: table;
    content: "";
    line-height: 0;
}

#header .content:after {
    clear: both;
}

Here is a link to the site: Removed

Now the problem is illustrated below:

On IE10/Chrome/Firefox it displays this: On IE7 is displays this: However on IE8 it displays this:

The logo disappears, and I do not know why. I am using respond.js and html5shiv to read my html and css media queries.

Any ideas SO?

Answer 1

#logo {
    width: auto;
} 

It makes the logo disappear in IE8. Probably it has no dimensions to display the linked logo.

Maybe add:

#logo a {
    display: block;
} 

And better play with max-width for responsive add to the img tag:

#logo img {
    width: auto;
    max-width: 100%;
    height: auto;
}