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でもきちんと表示される正しいコーディングを教えてください。
お礼
ご丁寧なご指導有り難うございます、ＣＳＳの理解が浅く既存のＣＳＳを利用したのですが、それが前者で型崩れしてしまうのです。そこで後者の様にしたところ改善しました。お教えいただいた分を時間を掛けて理解させていただこうと思います。ところでｌｉを横に並べて記述した際の改行の仕方もご存知でしたら、ご指導いただけないでしょか？？？