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.5

vancunt

互換モードだったんですね。
失礼しました。

参考URL：

http://2xup.org/log/2007/07/27-2111

回答No.4

fujillin

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

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

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

補足

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

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

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

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

回答No.3

vancunt

ご提示されたソースで下記ブラウザで確認してみました。
IE6,7,8,Firefox3.6

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

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

回答No.2

BellBell

#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にしても、左右が同じだけ大きな余白が。。

回答No.1

hisajiro

text-alignがleftだからでは？

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

補足

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