页脚不会只停留在火狐浏览器网站底部



我有一个带有页脚的网站,在Chrome和Safari中显示良好。

然而,当在Mozilla Firefox中查看时,页脚不在页面底部,而是从标题下方开始,它遍布整个页面。

这与在火狐中使用 and 标签有关吗?或者别的什么。

<!doctype html>
<html>
    <head>
        Stuff.....
    </head>
    <body>
        <header>
            Stuff....
        </header>
        <div id="main_container">
            <div id="content_container">
                Text (h1, h2 and p tags)
        </div>
        <div id="networking_container">
            <div id="twitter">
                Twitter Feed...
            </div>
            <div class="fb-like" id="facebook" data-href="http://www.facebook.com/EtempaSolutions" data-send="true" data-layout="button_count" data-width="225" data-show-faces="false">
            </div>
            <g:plusone size="medium" annotation="inline" width="215"></g:plusone>
        </div>
        <footer>
            <table id="favourite_links_table" cellpadding="4">
                Stuff...
            </table>
            <div id="credits">
                <p id='main_credit'>This website has been designed and hosted by <a href='http://www.etempa.co.uk'>Etempa Solutions</a></p>
                <p id='sub_credit'>Web Design, Including Coding and Images © Copyright to Pippa Rose Smith 2012. All Rights Reserved</p>
            </div>
        </footer>
    </body>
</html>

css 位是:

html 
{ 
    padding: 30px 10px; 
    line-height: 1.4; 
    background-color: #CCC;
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
}
html, input 
{   
    font-family: Candara, Verdana, Geneva, sans-serif; 
}
body 
{ 
    width: 860px; 
    padding: 20px 30px 20px;
    border: 1px solid #b3b3b3; 
    border-radius: 4px; 
    margin: 0 auto; 
    box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff; 
    background: #fcfcfc; 
}
footer
{
    margin-top: 30px;
}
#main_container
{
    clear: both;
    padding-top: 15px;
}
#favourite_links_table
{
    text-align: center;
    width: 850px;
} 
#credits
{
    margin-top: 30px;
}
#main_credit
{
    color: #9933FF;
    font-size: 13px;
    text-align: center;
}
#sub_credit
{
    color: #9933FF;
    font-size: 12px;
    text-align: center;
}
#content_container
{
    float: left;
    width: 70%;
}
#networking_container
{
    float: right;
    width: 25%;
}
#twitter
{
    padding-top: 30px;
    padding-bottom: 20px;
}
#facebook
{
    padding-bottom: 20px;
}

我已经找到了答案

我已经添加了清晰的:两者都到我的页脚,所以 css 现在是

footer
{
    margin-top: 30px;
    clear: both;
}

相关内容

  • 没有找到相关文章

最新更新