IE7でだけ作ったメニューが表示されません。

質問

サイトを作っているのですが、IE7でだけHOMEやImageなどのメニューが表示されません。safari,firefox,operaでは表示されました。
どうしたら表示できるのでしょうか？

またここはこうした方がいいなどHTML,CSSのアドバイスなどもして頂けるとうれしいです。

よろしくお願いします。

回答No.5

readordie · ベストアンサー

これですかね

IEで絶対配置（position:absolute）のボックスが消えるバグの検証
http://jmblog.jp/archives/180

position は割とやっかいなので、もう少し素直な構造にした方がよいかと。
ホントにIEは人を困らせますね(笑）

お礼

ありがとうございます。謎がとけました。
これはやっかいですね・・・。

素直な構造と言いますとどうしたらよいでしょうか？
アドバイスお願いします。

回答No.4

pick52

取り敢えず、直接は関係ないようですが画像が透過PNGのようですが
IE6以前は透過PNGに対応していないため、画像の背景がおかしくなって
います。

無理矢理、対応する方法がいくつかあるようなのでいろいろ、
やってみて下さい。

http://blog.kaburk.com/lang/html/ie-penetration-png.html

で、あと表示されない原因を頑張って調べてみたところ、rayout.cssの

#footer にある

clear: both;

をコメントアウトすると位置が微妙にずれるものの表示されるようです。
このずれは body のmarginを8pxくらいとると正常になるようです。

CSSについて詳しくないのでこれ以上はよく分かりません。
もっと詳しい人の登場を待って下さい。

お礼

詳しい御説明ありがとうございます。
IE6が透過pngに対応してないのを知りませんでした・・・
ズレはとりあえず教えて頂いた方法で対処してみようと思います。
ただ、提出する作品なので、先方になんて言われるかちょっと不安です。

ありがとうございました。

回答No.3

noname#77303

ホームページのデザインとても良かったのですが、IE6では、メニューは表示できませんでした。
Firefoxではこちらでもメニューの表示を確認しました。

CSSのどこかにIEに対応していない設定をしている所があるか、書き方にミスがあるのかもしれません。
どうしても分からない時は、いっそ作り直す方が早い事も・・・。

お礼

アドバイスありがとうございます。
ボタンを画像にしたのがいけないんですかね？
作り直すしかないんですかね・・・

回答No.2

koke29

こんにちはー
IE6でも表示不可でしたよー

CSSのコードを載せないと返答出来ないと思うので
どれか1個分のCSSコード載せた方が良いですよー

お礼

大変失礼しました。IE6もみれないとは・・・
ひょっとしてFirefoxとかもみえてるの家だけなんですかね？

rayout.cssです。宜しくお願いします。

rayout.css

@charset "UTF-8";
body {
color: #333333;
background-color: #FFFFFF;
background-repeat: repeat;
background-image: url(../images/item/stripe_40c32945799b257fcea4b01260da9b0a.png);
}
#base {
width: 780px;
margin-right: auto;
margin-left: auto;
}
#headder {
padding-left: 22px;
background-image: url(../images/item/new_back_image/head_down.png);
height: 170px;
background-repeat: no-repeat;
}
#main_all {
width: 780px;
height: auto;
float: left;
background-image: url(../images/item/new_back_image/main_down.png);
}
#main_head {
background-image: url(../images/item/new_back_image/main_head_down.png);
height: 25px;
}
#main {
width: 700px;
float: left;
background-image: url(../images/item/new_back_image/main_down.png);
padding-left: 40px;
padding-right: 40px;
}
#light {
float: left;
padding-right: 30px;
}
#footer {
height: 70px;
background-image: url(../images/item/new_back_image/main_foot_down.png);
background-position: center bottom;
width: 700px;
background-repeat: no-repeat;
clear: both;
padding-right: 40px;
padding-left: 40px;
}
#main img {
border: 5px ridge #999999;
}
/*以下safariなどでスクロールバーの有無で表示がづれるのを防ぐ為*/
html {
overflow-y:scroll;
}

補足

こちらがmenu.cssです。

@charset "UTF-8";
#menu {
top: 108px;
width: 760px;
background-repeat: repeat-x;
clear: both;
margin-left: 10px;
height: 50px;
position: absolute;
}
#menu ul {
list-style-type: none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#menu li {
float: left;
height: 50px;
width: 120px;
padding: 0px;
text-align: center;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #333333;
font-size: 16px;
}
#menu li a {
background-position: top;
width: 120px;
text-decoration: none;
display: block;
height: 50px;
}
.menu_push {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #333333;
}
.menu_rightline {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999999;
}

回答No.1

mikiputi

ソースかURLがないとわからないです

補足

スミマセン。ttp://collection3.konjiki.jp/test.htmlです