Website Sidebar Not Showing in older internet explorer versions

By : Ilja
Source: Stackoverflow.com
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?

By : Ilja


Answers

I believe old versions of IE does not support position: fixed; which is (at least in part) what's causing the disappearance.

You can find a cross browser way of creating multi-column layout here: http://www.alistapart.com/articles/fauxcolumns/

By : xec


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.



This video can help you solving your question :)
By: admin