Internet Explorer 6、7のレイアウト崩れ

解決済

質問者：nkmyr
質問日時：2010/08/19 09:49
回答数：3件

Internet Explorer 6、7のレイアウト崩れ
Webを制作し、FireFox3.6とInternet Explorer8で確認しながら作業をしておりました。
友人達に確認してもらったところ、Internet Explorer 6、7ではメニューのレイアウトが崩れているとのことでした。
menu.cssにある#header関連が原因のようです。
どうすればInternet Explorer 6、7にも綺麗に表示できるのでしょうか？
http://team-aoyama.lolipop.jp/

アドバイスをお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： kuzumiHK
回答日時：2010/08/19 21:54

No.2さんの対処策にプラスで、

ul#navにwidthを追加すればIE6でも表示できるはず。

ul#nav {
width:840px;
margin:0;
padding:0;
float:none;
clear:both;
position:relative;
top:3px;
z-index:1;
}

- 0
- 件

通報する

この回答へのお礼

お蔭様でレイアウトがきちんと揃えました。
しかし、メニュー以下コンテンツが消えてしまっています…
これは新たに質問させて頂きたいと思います。
どうもありがとうございました。

通報する

お礼日時：2010/08/19 23:21

No.2

回答者： nekomikekamo
回答日時：2010/08/19 13:52

#1さん言われている通り、headerを900pxにしていることがそもそも問題です。

以下の通りCSSを修正すれば問題ないのではないでしょうか？
(ポイントのみ修正)
#header {
width:840px;/* 900→840px */
margin:auto;
position: relative;
/*left: -40px; ←削除*/
}
ul#nav {
margin:0;
padding:0;/* ←追加 */
float:none;
clear:both;
position:relative;
top:3px;
z-index:1;
}

この回答への補足

返答をありがとうございます。
修正しましたら、IE7では対応できましたが、IE6ではメニューが消えてしまいます。
IE6用のindex.htmlを制作し、名称をindex_ie6.htmlと名付け、javaScriptかCSSでブラウザを判断し、IE6なら自動的にindex_ie6.htmlにジャンプする方法がいいと思うのですが、その方法を探しているのですが、なかなか見つかりません…ある様に思えるのですが、ないのでしょうか？

補足日時：2010/08/19 15:16

通報する

- 0
- 件

通報する

No.1

回答者： yyr446
回答日時：2010/08/19 11:53

なんか、IE8でも表示しようとすると、エラーがでてますけど....

関係ないけど<html style="">は、よしましょう。

レイアウト崩れ
＝＝＞意図がわからんけど、
width 840pxにセットした#containerの中に設置したメニュ－部
#header {
left:-40px;
margin-bottom:auto;
margin-left:auto;
margin-right:auto;
margin-top:auto;
position:relative;
width:900px;
}
のwidth:、left:、position：　の値の目的は？

この回答への補足

返答をありがとうございます。
修正後、IE7はうまく表示できてもIE8やFireFox、Chromeは逆にレイアウトが崩れてしまいます。
IE７の場合は#header 内のleft:-40px;を削除すればうまく収まりますが、IE8などは崩れます。
「特定のバージョンでのみ読み込ませたいCSSのスタイル定義ファイルをリンクする」の記事を参考に作成しました。
http://www.marguerite.jp/Nihongo/WWW/CSS/ForIE.h …
#header {
width:900px;
margin:auto;
position: relative;
margin-bottom: 10px;
}
menu_ie7.cssで保存し、
index.html内に

を追加しておきましたが、何の変化がありません。
間違っておりますか？
IE6用、IE7用のCSSを作成し、振り分けるようにしたいのですが、方法がありましたら、教えてくださいますか？
宜しくお願いします。