土屋くすりさん@<a href="http://d.hatena.ne.jp/chepooka/">チープカ@?D</a>へ。
Mozillaはboxの大きさを仕様書通り解釈する筈なので、IE用に書かれているチープカ@?Dのdiv.sidebarやらdiv.section周りの様子が微妙におかしいです。Mozilla Firefox 0.8で見たチープカ@?D
div.body { padding: 10px 0; margin: 0; background-color: #ffffff; width: 100% ; border-bottom: solid 1px #9ac260; border-left: solid 1px #9ac260; border-right: solid 1px #9ac260; } ul.hatena_antenna li a, ul.hatena_section li a, ul.menu li a{ display: block; padding: 3px 7px; border-top: solid 1px #9ac260; width: 100%; } ul.hatena_antenna li a:hover, ul.hatena_section li a:hover, ul.menu li a:hover{ background-color: #fcd9d8; color: #777777; width: 100%; }
widthの100%をautoに直すとMozillaユーザーは幸せです。土屋さんの三段カラムcssは各所に広まっているのでIE以外のブラウザを使用している約5%にも愛の手を。
上記書き直しを行ったチープカ@?D
html * {box-sizing: border-box;} html * {-moz-box-sizing: border-box;}
ってCSSに書いて、尚且つNN4.x系切り捨ててる俺が言うのも何ですが。
追記:了解。そういえばそういうIEのバグがありました。
それならば、上記「html *〜」の二行を追加して頂けると、1.8%のMozillaユーザーは喜びます。
上がCSS3で予定されている奴で、下がMozilla系の独自拡張。widthの計算方法をIEと同じ様にするCSSでござい。
Mozillaの独自拡張なので書くとvalidじゃなくなるよ。これを使わなくてもうまく出来るようにしようね。