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

質問

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

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

---ＨＴＭＬ---
<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>

---ＣＳＳ---
/* コンテンツ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;
}

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

回答No.2

noname#140925 · ベストアンサー

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

お礼

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

補足

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

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

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

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

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

回答No.4

noname#140925

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

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

お礼

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

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

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

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

回答No.3

noname#140925

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

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

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

補足

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

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

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

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

回答No.1

potluckker

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

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

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

補足

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

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

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