Центральный нижний колонтитул исправлен в нижней части IE

Я кодирую веб-интерфейс для университетского проекта, и я занимаюсь этой проблемой:

Я хочу, чтобы мой нижний колонтитул был закреплен внизу, чтобы он был на месте независимо от того, какой экран я использую или если я переключаю полноэкранный режим.

Работает во всех остальных браузерах, кроме IE7 (мне не нужно поддерживать предыдущие версии)

HTML

    <div id="menu">
        <a href="information.html"  rel="shadowbox;height=500;width=650"      title="INFORMATION" >
            <img src="images/info.png" alt="information icon" />
        </a>
        <a href="images/bricks_of_destiny.jpg" rel="shadowbox[gallery]"  title="IMAGES" >
            <img src="images/image.png" alt="image icon"  />
        </a>
        <a href="music_player.swf" title="MUSIC" rel="shadowbox;height=400;width=600" >
            <img src="images/music.png" alt="music icon" />
        </a>
        <a href="#" title="MOVIES"><img src="images/television.png" alt="movies icon"  /></a>
        <a href="quotes.html" title="QUOTES" rel="shadowbox;height=300;width=650" >
            <img src="images/male_user.png" alt="male user icon"  />
        </a>
        <a href="#" title="REFERENCES">
            <img src="images/search_globe.png" alt="search globe icon"  />
        </a>
    </div>
    <a href="images/destiny_1.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
    <a href="images/destiny_carma_jewell.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
    <a href="images/destiny-joan-marie.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>
    <a href="images/pursuing_destiny.jpg" rel="shadowbox[gallery]" title="IMAGES"></a>

    <div class="clear"></div>


    <div id="destiny">
        Discover more about the word <span class="strong">DESTINY </span>! Click one of the icon above!
        (F11  Toggle Full / Standard screen)
     </div>

     <div id="footer">
        <ul id="breadcrumbs">
            <li>Disclaimer</li>
            <li> | Icons by: <a href="http://dryicons.com/" rel="shadowbox">dryicons.com</a></li>
            <li> | Website by: <a href="http://www.eezzyweb.com/" rel="shadowbox">eezzyweb</a></li>
            <li> | <a href="http://jquery.com/" rel="shadowbox">jQuery</a></li>
        </ul>
    </div>
</div>

CSS:

#wrapper{
text-align:center;
margin:0 auto;
width:750px;
height:430px;
border:1px solid #fff;
}
#menu{
position:relative;
margin:0 auto;
top:350px;
width:450px;
height:60px;
}
#destiny{
position:relative;
top:380px;
color:#FFF;
font-size:1.5em;
font-weight:bold;
border:1px solid #fff;
}
#breadcrumbs{
list-style:none;
}
#breadcrumbs li{
display:inline;
color:#FFF;
}
#footer{
position:absolute;
width:750px;
height:60px;
margin:0 auto;
text-align:center;
border:1px solid #fff;
bottom:0;
}
.clear{
    clear:both;
}

Белые рамки нужны только для отладки.

Приложение размещено по адресу http://www.eezzyweb.com/destiny/.

Любое предложение приветствуется


person Mirko    schedule 05.05.2010    source источник


Ответы (2)


margin: auto; — это то, что не работает в IE7. Вы можете обойти его с

#footer {
  width: 100%;
  left: 0px;
}

, так как таким образом div растягивается на всю ширину, а ul автоматически выравнивается по середине.
Но, возможно, это не то, что вам нужно.

Если это неприемлемое решение, люди в Интернете говорят, что вы можете исправить это, выровняв родительский текст по центру, но это может испортить оставшуюся часть макета... вам придется поиграть с этим, но по крайней мере ты знаешь, что идет плохо.

person ANeves thinks SE is evil    schedule 05.05.2010
comment
«хлебные крошки» определенно пишутся с двумя «б», так как в «крошке» есть «б». - person quoo; 05.05.2010
comment
@Mirko, я рад, что это помогло. @quoo: Спасибо за исправление. Я действительно был самодовольным - ldoceonline.com/popup/popupmode.html? search_str=крошка - person ANeves thinks SE is evil; 07.05.2010

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -150px; /* the bottom margin is the negative value of the footer's height */
}
#footer, #push {
    height: 150px; /* #push must be the same height as #footer */
}

HTML:

<body>
    <div id="wrapper">
        <!-- ALL non-footer content goes in this DIV. -->

        <div id="push"></div>
    </div>
    <div id="footer">
        <ul id="breadcrumbs">
            <li>Disclaimer</li>
            <li> | Icons by: <a href="http://dryicons.com/" rel="shadowbox">dryicons.com</a></li>
            <li> | Website by: <a href="http://www.eezzyweb.com/" rel="shadowbox">eezzyweb</a></li>
            <li> | <a href="http://jquery.com/" rel="shadowbox">jQuery</a></li>
        </ul>
    </div>
</body>

Код адаптирован с http://ryanfait.com/sticky-footer/.

Я использовал этот подход на нескольких сайтах, которые я разработал, включая мой личный сайт. Это прекрасно работает! И даже в IE6 (хотя вы сказали, что это не нужно).

person Joshua Carmody    schedule 05.05.2010
comment
Прикольно, попробую. Я не могу голосовать за двух человек, поэтому я выбрал sr pt, потому что его решение сразу решило мою проблему. - person Mirko; 06.05.2010