スポンサーサイト

--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログ の レイアウト が崩れてしまいました… その2

2009年07月20日 05:19


ブログレイアウト が崩れてしまいました… の続き


調査にご協力下さったマイミクの皆様ありがとうございましたm(_ _)m

おかげさまで 温泉 ブログ 復旧しました。

問題はやはり、あるマイミクさんがご進言下さったこの部分。
 ↓ ↓ ↓
ブログ

この部分のせいで ブログレイアウト がこんな風に崩れていました。
 ↓ ↓ ↓
ブログ

原因は私が安易に padding で余白を作っていたことと、 IE6 と他の ブラウザpadding の認識の仕方の違いだったようです。

スタイルシート の以下の部分が諸悪の権現。

#yoyaku_h {
width : 570px;
margin: 0 0 10px 0;
padding: 14px 0px 8px 75px;
font-size: 130%;
font-weight: bold;
color: #006600;
background-image: url("http://blog-imgs-31.fc2.com/o/n/s/onsenbashi/yoyaku_h.gif");
background-repeat: no-repeat;
}

「宿泊予約できます☆彡」の位置を背景画像に合わせようと、
padding: 14px 0px 8px 75px; の部分で左余白75pxを指定しておりました。

現在使用中の Safari 4 その他の ブラウザ では問題ないのですが、 IE6 の場合 padding で左余白を指定した場合にその分は右側にはみ出る仕様になっているらしい。

ブログ

復旧にはこの padding 以降の部分を削って、「宿泊予約できます☆彡」の前にスペースを入れて位置を合わせればいいのですが、それだと今まで書いた100以上の全記事を1つ1つ訂正しなくてはならない!!

それでは大変なので他に何かないかと考えていると、ありました!!方法はいたって簡単!!

width : 570px; の部分を削除し幅の指定を解除するだけ。

これだと幅は文字の広さ分になり、 padding で右側がはみ出ようとも十分な幅が残る。

ブログ

多少強引な方法ではありますが一件落着。

今までたいした知識もなく スタイルシート をいじってきましたが、今回の件でその怖さを痛感!!

今後 IE も 7 から6へバージョンダウンし、万全のチェック体制でのぞみます。

【関連記事】
IEでだけレイアウトが崩れる場合はpaddingを探す
IE6のCSSバグ(widthとpadding)のメモ
IE6ではpaddingとwidthを一緒に設定してはならない
IE6のバグ(Web-design cssメモ)
IE6とIE7のCSS表示の違い





コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://pcbashi.blog68.fc2.com/tb.php/26-15733839
    この記事へのトラックバック


    最新記事


    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。