CSSで画像の横に余計な余白が・・・

質問させて下さい。

以下のようなソースを書いた時のことです。

HTML部分-------------------------------

<DIV id="box-s">
<img src="********" width="290" height="140" border="0" >
</DIV>
<DIV id="box-s">
<img src="********" width="290" height="140" border="0" >
</DIV>



CSS部分-------------------------------

#box-s{
width:300px;
float:right;
text-align:left;
border: 1px solid #000000;
clear: none;
margin: 2px;
padding: 4px;
}


と書くと、IEだと問題ないのですが、firefoxでみると画像の
右側の余白がかなり不自然に開くんです。
少しぐらいの崩れは良いのですが、、、あまりに違いすぎる
のでどなたかお助け願えないでしょうか。

No.4 ベストアンサー 回答者： fujillin 回答日時： 2010/04/06 11:13

表示内容のimgがwidth:290pxで、divがwidth:300pxの指定になっているので、そのようになります。

例えば、#box-sの指定でwidthを省略すれば、お望みの表示になりませんか？

質問には関係ないですが、idは唯一ということになっているので、ご提示のような場合はclassなどで指定するほうがよろしいかと…

この回答への補足

>>例えば、#box-sの指定でwidthを省略すれば、お望みの表示になりませんか？

ちょっと他の配置との兼ね合いで、幅指定は外せなさそうです。


>>ご提示のような場合はclassなどで指定するほうがよろしいかと…

なるほど、そういう使い分けなのですね。。初めて理解しました。
ありがとうございます！

補足日時：2010/04/06 11:34

No.5 回答者： vancunt 回答日時： 2010/04/06 11:23

互換モードだったんですね。

失礼しました。

参考URL：http://2xup.org/log/2007/07/27-2111

No.3 回答者： vancunt 回答日時： 2010/04/06 11:03

ご提示されたソースで下記ブラウザで確認してみました。

IE6,7,8,Firefox3.6

どのブラウザも同じように表示されていますので、
他の箇所に問題があるのではないでしょうか？

もしくはFirefoxのバージョン？

No.2 回答者： BellBell 回答日時： 2010/04/06 11:00

#box-s{

width:300px;
border: 1px solid #000000;

上記のような指定では、IEのみ内寸で298pxになって、それ以外のブラウザでは300px(外寸302px)になります。
borderの1pxのせいで2ピクセルおかしくなっているって事ですね。

そのうえで
text-align:left;
のせいで、左右余白が2ピクセル違う、元々padding: 4px;なので2ピクセルの違いが目立つ、という事です。
text-align:center;として、中央に寄せればよいかと。
IEのみ左右4ピクセル、それ以外では左右は5ピクセルとなる。

この回答への補足

１～５ピクセルぐらいの少しの余白ではなく、15ピクセルぐらい
余白が出来るんです；；
centerにしても、左右が同じだけ大きな余白が。。

補足日時：2010/04/06 11:34

No.1 回答者： hisajiro 回答日時： 2010/04/06 10:57

text-alignがleftだからでは？

試しにcenterにするか・・・
余白で調整するか・・・・
できると思います。

この回答への補足

１～５ピクセルぐらいの少しの余白ではなく、15ピクセルぐらい
余白が出来るんです；；
centerにしても、左右が同じだけ大きな余白が。。

補足日時：2010/04/06 11:32