1218854510 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は省略

回答の条件
  • 1人2回まで
  • 登録:2008/08/16 11:41:51
  • 終了:2008/08/16 15:13:01

ベストアンサー

id:poch-7003 No.1

poch-7003回答回数43ベストアンサー獲得回数82008/08/16 15:03:06

ポイント60pt

.mainMenuにheight: 画像の高さ

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

id:nacbox

ビンゴです!

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

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

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

勉強になりました。

.mainMenu {

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

overflow:auto;

padding: 10px 0 0 0;

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

}

2008/08/16 15:12:43
  • id:Mars
    書かれているソースだと、Firefox、IE共にリンク部分が画面上にあらわれません。
    とりあえず、リンクにwidthを足して検証しましたがIE(Win IE7)でも問題なく透過して背景が表示されました。

    a2/a3はいいとしても、他の部分に省略はありませんか?
  • id:nacbox
    すいません、文字数制限に引っ掛かってこちょこちょ省略しています。

    .mainMenu {
    background: url(../img/menu_background.gif) 0px 0px no-repeat;
    overflow:auto;
    padding: 10px 0 0 0;
    }
    .mainMenu ul.menuUL {
    margin: 0;
    padding: 0;
    }

    .mainMenu ul.menuUL li {
    display: block;
    margin: 0;
    padding: 0 0 0 10px;
    float: left;
    }

    .mainMenu ul.menuUL li a{
    margin: 0;
    padding: 0;
    display: block;
    text-indent: -5000px;
    height: 30px;
    }
    .mainMenu ul.menuUL li.a1 a{
    background: transparent url(../img/a1.gif) 0 0 no-repeat;
    width: 73px;
    }
    .mainMenu ul.menuUL li.a1 a:hover{
    background: transparent url(../img/a1.gif) 0 -60px no-repeat;
    width: 73px;
    }

    IE7だと表示できるんですね。
    IE6で設問のような現象が起こっています。
    URLが提示できればいいんですけどね……。申し訳ないです。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません