Question

I’m not sure what’s causing the problem, but for some reason sidebar of my website is not showing in older versions of IE (tested in IE9 Compatibility view).
This is the page: http://freshbeer.lv/development/en

In modern browsers you can see brown sidebar on the left of the page, but in old IE you can’t see it.

Could anyone suggest a solution for the problem?

---

HTML of Sidebar

<!-- sidebar -->
        <div id="sidebar">
            <!-- logo -->
            <div id="logo"><h1>Bryuvers</h1></div>
            <!-- navigation -->
            <div id="navigation">
                <ul id="nav">
                    <li style="margin: 0;"><a id="current" href="index.php" >Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Production</a></li>
                    <li><a href="contact.php">Contact</a></li>
                </ul>
            </div>
            <!-- search -->
            <br />
            <br />
            <div id="search">
                <form id="searchForm" method="post">
                <fieldset>
                <input id="s" type="text" placeholder="Search" />
                <input type="submit" value="Submit" id="submitButton" />
                </fieldset>
            </form>
            </div>
            <div id="footer">&copy; Bryuvers - <?php echo date("Y"); ?></div>
        </div>
        <!-- sidebar_strip -->
        <div id="sidebar_strip"></div>

CSS of Sidebar

#sidebar {
    height: 100%;
    width: 300px;
    position: fixed;
    float: left;
    background: url("../images/sidebar_bg.png") repeat-y #2a1708;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;

    -webkit-transition: 0.45s;
    -moz-transition: 0.45s;
    -o-transition: 0.45s;
    -ms-transition: 0.45s;
    transition: 0.45s;
}

#sidebar:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

#sidebar_strip {
    height: 100%;
    position: fixed;
    margin: 0 0 0 300px;
    width: 10px;
    float: left;
    background: url("../images/sidebar_cover.png") repeat-y #866a3f;
}

---

Is there a plausibility to somehow edit my code so it works in ie7 at least?

Answer 1

Sounds like a weird quirk in IE, you can quickly fix it by setting your #inner_wrapper to display:inline-block; instead of float:left;, like so:

#inner_wrapper {
  display:inline-block;
}

Remove the float:left attribute and your sidebar appears again.