0

ここにこのヘッダーがあります...

.header {
    background-color: #FFFFFF;
    padding-left: 16px;
    width: 920px;
}

.logo {
    background-color: #FFFFFF;
    float: left;
    padding-left: 10px;
    padding-right: 20px;
    width: 500px;
}

.phoneNumber {
    background-color: #FFFFFF;
    color: #44BAD2;
    float: left;
    font-size: 22px;
    height: 94px;
    line-height: 95px;
    width: 155px;
}

.social {
    background-color: #FFFFFF;
    float: left;
    font-size: 18px;
    height: 69px;
    padding-left: 10px;
    padding-top: 25px;
    width: 190px;
}

.social ul {
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 15px;
}

.social li {
    float: left;
}

google chrome では見栄えが良いのですが、firefox では左右が短すぎます。これはhttp://www.surfthecurve.caで確認できます。

こちらもhtml

 <div class="header">

<div class="social">
<ul>
<li class="facebook">
<a target="_blank" href="http://www.facebook.com/SurfTheCurve"></a>
</li>
<li class="twitter">
<a target="_blank" href="https://twitter.com/SurfCurveTutor"></a>
</li>
<li class="email">
<a target="_blank" href="mailto:info@surfthecurve.ca?subject=Website Enquiry"></a>
</li>
</ul>
</div><!--social-->

<div class="logo">
<a href="http://surfthecurve.ca/"><img src="http://surfthecurve.ca/wp-content/themes/twentyeleven/images/logo.jpg" width="500" border="0" /></a>
</div><!--logo-->

<div class="phoneNumber">
647.390.3070
</div><!--phoneNumber-->


</div><!--header-->
4

1 に答える 1

2

そこのフロートをクリアする必要があります。clear:both を使用するか、clearfixメソッドを使用できます。

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
于 2012-10-02T19:18:26.593 に答える