みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

IEの時に空白ができてしまします。

CSSを使ってホームページ制作をしはじめたのですが、まだまだ勉強不足の為修正の仕方がわかりません。申し訳ございませんがどなたか詳しいかた教えて頂けないでしょうか。

内容はと言いますとリモートロールオーバーを設定している際にIEで#Content01 ul li#menu01~03 aの背景画像の下に空白ができてしまうのです。FireFoxでは思い通り表示できているのですが。。。

---HTML---
<div id="Content01">
<!- コンテンツ01 -!>
<ul>
<li id="menu01"><a href="#"><span>あああああ</span></a></li>
<li id="menu02"><a href="#"><span>いいいいい</span></a></li>
<li id="menu03"><a href="#"><span>ううううう</span></a></li>
</ul>
</div>

---CSS---
/* コンテンツ01 */
#Content01{
position:relative;
background:url(../.jpg) no-repeat right top;
width:800px;
height:300px;
}

#Content01 ul li#menu01 a{
display:block;
width:200px;
height:100px;
background:url(../.jpg) no-repeat left top;
}

#Content01 ul li#menu02 a{
display:block;
width:200px;
height:100px;
background:url(../.jpg) no-repeat left top;
}

#Content01 ul li#menu03 a{
display:block;
width:200px;
height:100px;
background:url(../.jpg) no-repeat left top;
}

#Content01 ul li{
position:relative;
margin:0px;
right:40px;
top:0px;
}

#Content01 ul li a span{
display:none;
}

#Content01 li{
list-style:none;
}

#Content01 ul li#menu01 a:hover span{
position:absolute;
top:0px;
right:-40px;
display:block;
width:600px;
height:300px;
text-indent:-9999px;
}

#Content01 ul li#menu02 a:hover span{
position:absolute;
top:-100px;
right:-40px;
display:block;
width:600px;
height:300px;
text-indent:-999px;
}

#Content01 ul li#menu03 a:hover span{
position:absolute;
top:-200px;
right:-40px;
display:block;
width:600px;
height:300px;
text-indent:-999px;
}

#Content01 ul li#menu01 a:hover span{
background:url(../.jpg) no-repeat;
}

#Content01 ul li#menu02 a:hover span{
background:url(../.jpg) no-repeat;
}

#Content01 ul li#menu03 a:hover span{
background:url(../.jpg) no-repeat;
}

#Content01 a:hover{
border:none;
}

このような記述を致しております。
色んなサイトを見ながら作りましたので不適切な箇所も多いとは思いますがどうか宜しくお願い致します。

投稿日時 - 2009-12-11 05:51:30

QNo.5513776

困ってます

質問者が選んだベストアンサー

IEはちゃんと8.0を使用しているのでしょうか?
古いIEはCSSの解釈が独自仕様なので、古いIE以外では問題なく見られるページを作成しても、古いIEでのみデザインが崩れるのはごく普通の事です。

IE8で確認して問題ないのなら、問題ありません。
ついでに、下のサイトで紹介されているタグを貼り付けておくとGoodです。

[参考]IE6はいらない、IE6 No More.com | エンタープライズ | マイコミジャーナル
http://journal.mycom.co.jp/news/2009/08/07/041/index.html

投稿日時 - 2009-12-11 20:15:23

補足

IE7を使用しており、色んなサイトでIE8以外は表示が崩れる可能性があるということは知っておりましたが、CSSの知識がないので自分の記述がどこかおかしいと思い込んでおりました。

早速IE8にアップグレードをし確認しましたら思い通りの表示になってました。

本当にありがとうございます!!

質問に対しての解決はできたのですが、いまだIEの古いバージョンを使われている方が多いのですが、ホームページ制作をされている方はやはり最新のブラウザでうまく表示されるようにをメイン制作されている方が多いんでしょうか。

申し訳ございませんがお教え頂けないでしょうか。

投稿日時 - 2009-12-12 02:14:56

お礼

とても親切なご回答ありがとうございました。

投稿日時 - 2009-12-12 17:14:55

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

実際のコードは以下の日本語の物を。
使用に際して特に報告は要ら無いですよ。

[参考]Code Samples - IE6 No More
http://www.ie6nomore.com/code-samples.html

投稿日時 - 2009-12-12 19:12:30

お礼

何度もご解答頂き感謝致しております。

報告いらないのですか。
報告がいらないならすぐに使用したいと思います。

ご丁寧に日本語のコードもお教え頂きありがとうございます。

本当に色々とCSSについてお教え頂きましてありがとうございました。

投稿日時 - 2009-12-12 23:39:19

>ホームページ制作をされている方はやはり最新のブラウザでうまく表示されるようにをメイン制作されている方が多いんでしょうか。

商用の場合、金をかけられるなら古いIEにも対応させます。
金が無ければ、閲覧時の注意に「IE8より前には対応していない」旨を記載して、古いIEは無視します。

個人の場合は好き好きですが、うちは古いIEは無視した上で、前回提示したコードを貼りつけています。
かつ、IE8とFirefoxを推奨ブラウザとして提示してあります。

投稿日時 - 2009-12-12 07:46:05

補足

ご回答本当にありがとうございます。

個人経営で商用サイトなので古いIEにも対応させてたいですが、まだまだ知識が足りず時間がかかりそうなのでまずはIE8とFireFoxで制作したいと思います。

また前回教えて頂いたコードも凄いありがたい情報で助かりました。
使用する際の報告メールが英語でややこしそうですが、是非利用させて頂きます。

この度は、CSS初心者にもわかるようご丁寧にご回答頂きまして本当にありがとうございました。

投稿日時 - 2009-12-12 17:08:39

ANo.1

なんにも試していません。
とりあえず答えてみます。

CSSの最初に
*{
margin:0:px;
border:0px;
padding:0px;
}

を入れてみてください。
margin、border、paddingが必要な要素は、個別に設定したほうがいいです。

投稿日時 - 2009-12-11 11:10:50

補足

ご回答ありがとうございます。

margin、paddingはまず最初に試しましたが駄目でした。

今まではmargin、padding:0pxも1つ1つ記述していましたが、一括で指定した方が楽ですね!これからうまく使わして頂きます。

投稿日時 - 2009-12-12 02:33:13

あなたにオススメの質問