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

回答No.3

naokita · ベストアンサー

３つ並べたいなら固定幅に。
リンク効かせたいならアンカーのインラインで全部囲む。
text-align: justify;もブラウザ依存。
.code　.name　.price　が動的に取り込んでるのか知らないけど
<span class="">で囲うしかないかな。
-----------------------------------------

<!-- ■　HTML -->

<div id="list">
<ul>
<li class="new">
<a href="#">
<img src="#" width="180" height="180" alt="*"><br>
テキスト１<br>テキスト２<br>テキスト３
</a>
</li>
<li class="new"><a href="#"><img src="#" width="180" height="180" alt="*"><br>
テキスト１<br>テキスト２<br>テキスト３</a></li>
<li><a href="#"><img src="#" width="180" height="180" alt="*"><br>
テキスト１<br>テキスト２<br>テキスト３</a></li>
<li><a href="#"><img src="#" width="180" height="180" alt="*"><br>
テキスト１<br>テキスト２<br>テキスト３</a></li>
<li><a href="#"><img src="#" width="180" height="180" alt="*"><br>
テキスト１<br>テキスト２<br>テキスト３</a></li>
<li><a href="#"><img src="#" width="180" height="180" alt="*"><br>
テキスト１<br>テキスト２<br>テキスト３</a></li>
</ul>
</div>

/* ■　CSS */

#list *{ margin:0; padding:0;}
#list ul{ font:100%/1.6 "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Osaka,"ＭＳ Ｐゴシック",sans-serif;
width:780px; margin:20px auto; padding:10px 0; line-height:1.6; background:#EEE; overflow:hidden;}
#list li{ list-style:none; display:block; float:left; width:260px; min-height:250px; padding:16px 0 0; text-align:center;}
#list li a{ text-decoration:none; color:#B22222;} a img{ border:none;}
#list .new{ background:url(NEW.gif) no-repeat 40px 0;}
/* NEWの画像は大画像の上に置いてみたけど、.priceの中身だったかな？ */

text-align:center;を使わず、padding-leftを使った方が綺麗になる気がするが。

回答No.2

ORUKA1951

HTML的に根本的な誤りがあります。
必ずHTMLを作成したら、Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )などで、チェックする癖をつけましょう。
たとえば__
<a href="#"><p></a>はありえません。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
12.2 A要素
　<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで
［Links in HTML documents (ja)(
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/links.html#edef-A )］より

★A要素は、内部にinline要素しか含めることができないと書いてあります。

また。最初の行に<DOCTYPEがないため、IE8でおかしな表示になるのは、互換モードで表示されているからで、IEの方が間違っているのです。他のブラウザ(firefox,Opera,safari,Google Chromeのすべてが同じになるはずです。

さて、HTML自体を書きなおしてCSSを書くと以下の様になります。HTMLは文書構造に合わせて適切にマークアップしましょう。CSSを期待通りに適用させるためには、正当なHTMLが必要です。

1) たぶん商品リストですから<li></li>でマークアップする。
2) そのうえで、リキッドデザインならfloatを使って、固定デザインならinline-blockでデザインする

　になるるでしょう。

回答No.1

rurino

修正というより、自分だったら「こう組む」というものを。

◆ HTML

<div class="subcontentsbox">

<div class="imgbox">
<p><a href="#"><img src="#" /></a></p>
<p class="code"><a href="#">12345</a></p>
<p class="name"><a href="#">12345</a></p>
<p class="price"><a href="#">12345</a></p>
</div>

<div class="imgbox">
<p><a href="#"><img src="#" /></a></p>
<p class="code"><a href="#">12345</a></p>
<p class="name"><a href="#">12345</a></p>
<p class="price"><a href="#">12345</a></p>
</div>

<div class="imgbox">
<p><a href="#"><img src="#" /></a></p>
<p class="code"><a href="#">12345</a></p>
<p class="name"><a href="#">12345</a></p>
<p class="price"><a href="#">12345</a></p>
</div>

</div>

◆ CSS

*{ margin:0; padding:0;}
body { font-size: 100%; font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Osaka,"ＭＳ Ｐゴシック",sans-serif; background: #987654; text-align: justify; -ms-text-justify: inter-ideograph; text-align:center; }

img { border: none; }

.subcontentsbox {
width: 960px;
margin: 20px auto;
overflow: hidden;
}

.imgbox {
height: 250px;
width: 320px;
float: left;
text-align: center;
}

.imgbox a{
text-decoration: none;
}

.imgbox img{
border: 0;
height: 180px;
width: 180px;
margin: 0 0 5px;
}