画像をずらしてhoverしたいのですがIE7では×
一枚の画像をずらしてロールオーバーさせてナビをつくったのですが、ＩＥ7以外の全ブラウザではうまくいきますが、唯一IE7だけはうまくいきません。
5つのナビボタンのうち、左3つがポイントしても矢印と画像が変わりません。
ですが、それはトップページのナビだけの話で、他のページは普通にロールオーバーします。
ナビの部分はDreamweaverのテンプレートで編集不可能領域に含まれてますので、全ページのコードは同一です。
以下、コードです。
<!--HTML-->
<body>
<div id="container">
<div id="hedder">
<div id="toprogo"><a href="index.html"><img src="○○"/></a></div>
<div id="main_image"><img src="○○"/></div>
<div id="navi">
<div id="top"><a href="index.html"/></a></div>
<div id="kodawari"><a href="particular.html" /></a></div>
<div id="catalog"><a href="goods-catalog.html" /></a></div>
<div id="from_producer"><a href="index.html" /></a></div>
<div id="contact"><a href="mailto:" /></a></div>
</div>
</div>
</div>
</body>
<!--ここからcss-->
body { font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
color: #473906;
background-color: #fafde1 ;
}
img { border: none; }
a { color: #473906;
text-decoration: none;
}
a:hover { color: #ff0000; }
#container { width: 950px; margin: auto; }
#hedder { widht: 950px; height: 380px; }
#top_logo {margin-top: 10px; }
#main_image { width: 950px; height: 300px;
margin-top: 10px;
}
#navi { margin-top: 20px;
/margin-top: 0 ;
}
#top a { width: 190px; height: 50px;
margin-top: 30px;
background-image: url(images/navi/navi.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
float: left;
}
#top a:hover { width: 190px; height: 50px;
margin-top: 30px;
background-image: url(images/navi/navi.gif);
background-repeat: no-repeat;
background-position: 0px -50px;
display: block;
float: left;
}
#kodawari a { width: 190px; height: 50px;
margin-top: 30px;
background-image: url(images/navi/navi.gif);
background-repeat: no-repeat;
background-position: -190px 0px;
display: block;
float: left;
}
#kodawari a:hover { width: 190px; height: 50px;
margin-top: 30px;
background-image: url(images/navi/navi.gif);
background-repeat: no-repeat;
background-position: -190px -50px;
display: block;
float: left;
}
#catalog a { width: 190px; height: 50px;
margin-top: 30px;
background-image: url(images/navi/navi.gif);
background-repeat: no-repeat;
background-position: -380px 0px;
display: block;
float: left;
}
#catalog a:hover { width: 190px; height: 50px;
margin-top: 30px;
background-image: url(images/navi/navi.gif);
background-repeat: no-repeat;
background-position: -380px -50px;
display: block;
float: left;
}
#from_producer a { width: 190px; height: 50px;
margin-top: 30px;
background-image: url(images/navi/navi.gif);
background-repeat: no-repeat;
background-position: -570px 0px;
display: block;
float: left;
}
#from_producer a:hover { width: 190px; height: 50px;
margin-top: 30px;
background-image: url(images/navi/navi.gif);
background-repeat: no-repeat;
background-position: -570px -50px;
display: block;
float: left;
}
#contact a { width: 190px; height: 50px;
margin-top: 30px;
background-image: url(images/navi/navi.gif);
background-repeat: no-repeat;
background-position: -760px 0px;
display: block;
float: left;
}
#contact a:hover { width: 190px; height: 50px;
margin-top: 30px;
background-image: url(images/navi/navi.gif);
background-repeat: no-repeat;
background-position: -760px -50px;
display: block;
float: left;
}
つめて見にくくなっていますが、お願いいたします。
