<< CFメモ−ファイルアップロードと呼び出し・表示 | top | ネットショップはもはや「バーチャルショップ」ではない >>

スポンサーサイト

一定期間更新がないため広告を表示しています

スポンサードリンク | - | | - | - | - | - |

CSSメモ−IE6レイアウト崩れ対策

 Webクリエイターを恐怖のどん底に突き落とす、噂のIE6。の対策です。
 エミュレーターは、私は念のためIE TesterMultipleIEsを使用していますが、どちらか片方で良いと思います。

 これまでは何かあれば適当にいじって直していたのですが、いい加減面倒になってきたのでざっとメモしておきたいと思います。
 心の中で何度も呪いながら書いたので、そろそろIE6はなくなってくれるでしょう……と思いたいです……。


 さて、先程NEXCOMサイトを更新したのですが、IE6で確認したらメニューがこんなことになっていました。

IE6崩れ1
 サイトをリニューアルした際にもちゃんと確認しており、その時は正常に表示されていたにも関わらずです。
 よく見ると最下段のブログバナーにもおかしな空白ができており、すごい崩れ方をしていました。

 確認してみると、

・ヘッダーのdivの高さ→○
・〃margin→○

 という訳で、ヘッダーのdivと下のコンテンツ用のdivの間に余分な空白ができているということでした。

・対策→ヘッダーのdivにoverflow: hidden;

IE6元通り1
 メニューはこれで一件落着。


-----------------------------------------------------------------------------------------------------


 次はこれです。

IE6崩れ2

 なんという…………。


 この辺りでDreamweaverが共有違反とか何とか、よくわからないエラーを出して保存ができなくなってしまったので、Eclipseで作業しました。Firebugにもお世話になりつつ。
 共有違反のエラーは調べてみたのですが、テンプレートをいじっていた訳でもなく別の場所でファイルを開いていた訳でもないので、なぜ起こったのか全くわかりません。


 こちらの原因は、よくあるpaddingのバグでした。
 ここのwrapにあたるdivは890pxで、上下左右にpaddingを20px取っています。
 通常はその分widthからマイナスするので、divは850pxになるはずなのですが、IE6ではそれが適用されないことがあります。そのため、padding分を引かず890pxのままにする必要があります。
 こちらはどうしようもないので、CSSハックを使用しました。

#lower-ps-product-back {
    width: 850px;
    _width: 890px;
            ・
            ・

 もしくは

* html #lower-ps-product-back {
    width: 890px;
            ・
            ・

IE6元通り2

 これで良しです。

 あまり大きな場所にpaddingは使わない方が良いそうですが、入れ子のdivにmarginを適用する方法でやるともっとひどいことになったので、もうこれで良いと思います……。
くみっち | Webデザイン | 11:55 | comments(0) | trackbacks(0) | - | - |

スポンサーサイト

スポンサードリンク | - | 11:55 | - | - | - | - |
Comment









Trackback
URL:

06
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
--
>>
<<
--