cssについて質問です。
cssについて質問です。
IE8で思ったように表示されるものが、Firefoxだとレイアウトが崩れてしまいます。
imgの高さや横幅がFirefoxで反映されず文字が上部に表示されるのですがいろいろやっても改善出来ずに途方に暮れています。
ヘッダーやフッターなどもありますが、関係のありそうな部分を抜き出してみました。
添付画像のように画像を３つならべて表示したいのですが、
一番無駄無くdivで組む方法もありましたらご教授下さい。
よろしくお願いします。
■HTML■
<div class="subcontentsbox">
<div class="imgbox">
<a href="#">
<span><img src="#" /></span>
<p class="code">12345</p>
<p class="name">12345</p>
<p class="price">12345</p>
</a>
</div>
<div class="imgbox">
<a href="#">
<span><img src="#" /></span>
<p class="code">12345</p>
<p class="name">12345</p>
<p class="price">12345</p>
</a>
</div>
<div class="imgbox">
<a href="#">
<span><img src="#" /></span>
<p class="code">12345</p>
<p class="name">12345</p>
<p class="price">12345</p>
</a>
</div>
</div>
■css■
.subcontentsbox {
font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Osaka,"ＭＳ Ｐゴシック",sans-serif;
font-size: 100%;
width: 100%;
margin: 20px 0px;
padding: 0;
text-align: justify;
-ms-text-justify: inter-ideograph;
overflow: hidden;
display: block;
}
.imgbox {
background-color: #987654;
height: 250px;
width: 33.33333%;
text-align: center;
float: left;
}
.imgbox a{
text-decoration: none;
border: 0;
height: 180px;
width: 180px;
}
.imgbox img{
border: 0;
height: 180px;
width: 180px;
}
お礼
解決しました ありがとうございました