サイトの表示について＞＜！

質問

はじめまして。
今ホームページで困っていることがあり、質問させていただきました＞＜！

現在私が所属している団体のホームページを作成・運営しているのですが、サイトをみていただいたらおわかりいただけるように
(サイトURL：http://smile.freespace.jp/wyts_01/)
各ページへ飛ぶためのアイコン？のリンクのところだけが飛び出てしまっています。
これがどうしても気になるのでなおしたいのですが、自分ではどうなおしたらいいのか分からず、困ってしまっています。

お答えいただけると非常にありがたいです！
よろしくお願いいたします。

回答No.1

neko-ten

IE6だとそうなるみたいですね。

全体を#containerでくくって作ってますが・・・
#containerの幅→840px
#containerのpadding（余白）→5px
各ボタンの幅→120px

StyleSheetでのpaddingの扱いがブラウザごとに違うので、このようになってしまいます。
IE6などでは、幅の数値の中にpaddingの数値も入ってしまいます。
そのため、実質使える幅が
840px-5px-5px=830px
となるため、10px足らなくなってしまうのです。

それに対して、CSSにきちんと準拠したブラウザではpaddingと幅は別です。
実際の画面上では
840px+5px+5px=850px
で表示されてるのです。

解決方法としては、IE6以下では!importantを解釈しません。
（!importantは、この属性がついた値を優先的に利用させるものです。）

そのため、スタイルの#container部分を・・・

#container {
text-align: left;
margin: 0px auto;
width: 840px　!important;
width: 850px;
padding-right: 4px;
padding-left: 4px;
background: url(container_bg.gif) repeat-y center;
}

とすればなおる・・・はず！

ほかの要素（本文など）を詳しく確認していないので、メニュー部分の回答ですが・・・
参考いただければ幸いです。