人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSについて質問です。
親要素divに背景画像を敷き、その上にリストメニュー画像を表示しています。メニュー画像は透過GIFです。
Win/Firefoxだと望む表示がされるのですが、Win/IEだと、画像のように親要素の背景がリスト画像の部分だけ表示されません。
これを回避する方法はありますか?


以下ソースです。
<div class="mainMenu">
<ul class="menuUL">
<li class="a1"><a href="a1.html">A1</a></li>
<li class="a2"><a href="a2.html">A2</a></li>
<li class="a3"><a href="a3.html">A3</a></li>
</ul>
</div>


CSS----------
.mainMenu {
background: url(../img/menu_background.gif) 0px 0px no-repeat;
overflow:auto;
}

.mainMenu ul.menuUL li {
display: block;
float: left;
}

.mainMenu ul.menuUL li a{
display: block;
text-indent: -5000px;
height: 30px;
}
.mainMenu ul.menuUL li.a1 a{
background: url(../img/a1.gif) 0 0 no-repeat;
}
※a2/a3は省略

1218854510
●拡大する

●質問者: nacbox
●カテゴリ:インターネット ウェブ制作
✍キーワード:A1 A3 background CSS firefox
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● poch-7003
●60ポイント ベストアンサー

.mainMenuにheight: 画像の高さ

を指定すれば表示されませんか?

◎質問者からの返答

ビンゴです!

なんとなく、子要素にheightを指定してあったので

親要素に指定しなくても追随しそうなイメージがあったんですが、

背景画像を表示するためには駄目なんですね!

勉強になりました。

.mainMenu {

background: url(../img/menu_background.gif) 0px 0px no-repeat;

overflow:auto;

padding: 10px 0 0 0;

height: 50px; <-- この行を追加

}

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ