![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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;
}
このような記述を致しております。
色んなサイトを見ながら作りましたので不適切な箇所も多いとは思いますがどうか宜しくお願い致します。
No.2ベストアンサー
- 回答日時:
IEはちゃんと8.0を使用しているのでしょうか?
古いIEはCSSの解釈が独自仕様なので、古いIE以外では問題なく見られるページを作成しても、古いIEでのみデザインが崩れるのはごく普通の事です。
IE8で確認して問題ないのなら、問題ありません。
ついでに、下のサイトで紹介されているタグを貼り付けておくとGoodです。
[参考]IE6はいらない、IE6 No More.com | エンタープライズ | マイコミジャーナル
http://journal.mycom.co.jp/news/2009/08/07/041/i …
この回答への補足
IE7を使用しており、色んなサイトでIE8以外は表示が崩れる可能性があるということは知っておりましたが、CSSの知識がないので自分の記述がどこかおかしいと思い込んでおりました。
早速IE8にアップグレードをし確認しましたら思い通りの表示になってました。
本当にありがとうございます!!
質問に対しての解決はできたのですが、いまだIEの古いバージョンを使われている方が多いのですが、ホームページ制作をされている方はやはり最新のブラウザでうまく表示されるようにをメイン制作されている方が多いんでしょうか。
申し訳ございませんがお教え頂けないでしょうか。
No.4
- 回答日時:
実際のコードは以下の日本語の物を。
使用に際して特に報告は要ら無いですよ。
[参考]Code Samples - IE6 No More
http://www.ie6nomore.com/code-samples.html
何度もご解答頂き感謝致しております。
報告いらないのですか。
報告がいらないならすぐに使用したいと思います。
ご丁寧に日本語のコードもお教え頂きありがとうございます。
本当に色々とCSSについてお教え頂きましてありがとうございました。
No.3
- 回答日時:
>ホームページ制作をされている方はやはり最新のブラウザでうまく表示されるようにをメイン制作されている方が多いんでしょうか。
商用の場合、金をかけられるなら古いIEにも対応させます。
金が無ければ、閲覧時の注意に「IE8より前には対応していない」旨を記載して、古いIEは無視します。
個人の場合は好き好きですが、うちは古いIEは無視した上で、前回提示したコードを貼りつけています。
かつ、IE8とFirefoxを推奨ブラウザとして提示してあります。
この回答への補足
ご回答本当にありがとうございます。
個人経営で商用サイトなので古いIEにも対応させてたいですが、まだまだ知識が足りず時間がかかりそうなのでまずはIE8とFireFoxで制作したいと思います。
また前回教えて頂いたコードも凄いありがたい情報で助かりました。
使用する際の報告メールが英語でややこしそうですが、是非利用させて頂きます。
この度は、CSS初心者にもわかるようご丁寧にご回答頂きまして本当にありがとうございました。
No.1
- 回答日時:
なんにも試していません。
とりあえず答えてみます。
CSSの最初に
*{
margin:0:px;
border:0px;
padding:0px;
}
を入れてみてください。
margin、border、paddingが必要な要素は、個別に設定したほうがいいです。
この回答への補足
ご回答ありがとうございます。
margin、paddingはまず最初に試しましたが駄目でした。
今まではmargin、padding:0pxも1つ1つ記述していましたが、一括で指定した方が楽ですね!これからうまく使わして頂きます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ワードにコピペ、画像が表示さ...
-
htmlの文字が縦書きになる
-
HRタグ 枠線を透明にするには?
-
form input テキストを上下中央...
-
含む含まないという概念自体の...
-
textareaの幅を画面と合わせたい
-
htmlのolやulなどlistにtitleや...
-
CSS:animation開始位置の設定
-
<div id="container">の使いか...
-
【ヒトの神秘】美男美女から何...
-
ラジオボタンの装飾(色の違う2...
-
favicon.ico はもういらない?
-
smallにtext-allignが効かない
-
tdに対してmin-heightの定義、...
-
VBAでの素数の求め方
-
訪問済のリンク色を変えない方法
-
「・」(黒い点)を非表示にした...
-
1サイト内にHTML5とXHTMLが混在...
-
<table>の高さ固定。情報増加時...
-
idの中のid指定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ワードにコピペ、画像が表示さ...
-
ドリームウィーバーでリスト作...
-
リストの画像をくっつけたい!
-
ホームページビルダー14でメニ...
-
CSSのどの部分を変更すると...
-
光沢のあるボタンの作り方について
-
IEの時に空白ができてしまします。
-
CSSの外部参照について。
-
CSSの継承について...
-
箇条書きで表される点がずれる...
-
Firefoxだとメニューバーが崩れ...
-
CSSのposition指定で親要素の背...
-
SEO対策について
-
階層型ドロップダウンメニュー...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
widthやheightの数値に単位(px...
-
【ヒトの神秘】美男美女から何...
-
<h1>、<h2>と<p><div>の行間を...
おすすめ情報