HTMLとCSSを使い、
HTMLとCSSを使い、
メニューボタンを作成しました。
しかしIE８やgooglchromeではきちんと表示されるのに対して
Firefoxではメニューボタンの背景に設定した画像が表示されません。
以下にコーディングを記します。
**************************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style type="text/css">
<!--
#outline #ul {
margin: 0px;
padding: 0px;
height: 69px;
width: 336px;
list-style-type: none;
}
#outline #ul a .menu {
font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
font-size: 30px;
line-height: 69px;
color: #FFF;
text-decoration: none;
background-image: url(1.gif);
background-repeat: no-repeat;
text-align: center;
padding: 0px;
float: left;
height: 69px;
width: 158px;
margin-right: 5px;
margin-left: 5px;
}
-->
</style>
</head>
<body>
<div id="outline">
<ul id="ul">
<a href="#"><li class="menu">ホーム</li></a>
<a href="#"><li class="menu">トップ</li></a>
</ul>
</div>
</body>
</html>
**************************************************************
メニュー背景ボタンはPhotoshop、色はRGBで作成しました。
ちなみに、
<a href="#"><li class="menu">ホーム</li></a>
<a href="#"><li class="menu">トップ</li></a>
を
<a href="#" class="menu"><li>ホーム</li></a>
<a href="#" class="menu"><li>トップ</li></a>
に変更すると画像は表示されるようになりますが、
本来ホームとトップの裏に１つづつ表示されるはずの画像が
テキストの無い所でもう１つづつ表示されてしまいます。計４つです。
かといって
<a href="#"><li class="menu">ホーム</li></a>
<a href="#"><li class="menu">トップ</li></a>
を
<li class="menu"><a href="#">ホーム</a></li>
><li class="menu"><a href="#">トップ</a></li>
に変更しても、
a:hoverで色違いの同じ画像を背景にせっとするときにサイズなどがうまくいきません。
ボタンを全て画像にして、ビヘイビアでイメージをスワップさせるという手もありますが、
それは避けたいと思います。
Firefoxでもきちんと表示される正しいコーディングを教えてください。
