Боковая панель веб-сайта не отображается в старых версиях Internet Explorer

Question

Я не уверен, что является причиной проблемы, но по какой-то причине боковая панель моего сайта не отображается в более старых версиях IE (протестировано в представлении совместимости IE9).Это страница: http://freshbeer.lv/development/en

В современных браузерах вы можете видеть коричневую боковую панель слева от страницы, но в старом IE вы ее не видите.

Может кто-нибудь предложитьрешение проблемы?

---

HTML боковой панели

<!-- 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 боковой панели

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

---

Есть ли вероятность как-то отредактировать мой код, чтобы он работал как минимум в ie7?

Answer 1

Похоже на странную причуду в IE, вы можете быстро исправить это, установив #inner_wrapper вместо float:left;, например:

#inner_wrapper {
  display:inline-block;
}

Удалите атрибут float:left, и ваша боковая панель появится снова.

Answer 2

Я считаю, что старые версии IE не поддерживают position: fixed;, что является (по крайней мере частично) причиной исчезновения.

Здесь вы можете найти кросс-браузерный способ создания многостолбцовой разметки: http://www.alistapart.com/articles/fauxcolumns/