macでdreamweaver cs4を使ってサイトを作っています。
背景画像がfirefoxでは表示されるのに、safariでは表示されなくてこまっています。
ただいまウィンドウズでみれる環境ではないので、もしかするとIEでも表示されなくて、たまたまfirefoxで表示されているだけで私の記述がまちがっているかもしれません。
仕様は、背景画像Aの中にimgとdlで構成された文章があり
ロールオーバーで背景自体に枠をついたものをいれるのを
liで３つをフロートで横並びにして構成しています。
<li id="g1">
<a href="#" target="_blank">
<img src="img/.jpg" width="200" height="200" alt="">
<dl>
<dt>日にち</dt><dd>３月</dd>
<dt>場所</dt><dd>東京</dd>
</dl>
</a>
</li>
cssの方では、liに幅と縦をいれてフロートでうかせ
aに画像を入れて、画像サイズとdisplay:block;をしています。
あとはa:hoverで枠ありの画像をいれています。
まだまだやりはじめたばかりで、ビギナーなので
何が違うのか、よくわかっていません。
たりない情報があるかもしれませんが何かヒントをいただけるとうれしいです。
投稿日時 - 2010-03-20 16:42:56
3人が「このQ&Aが役に立った」と投票しています
回答（1件中 1～1件目)
HTMLによる記述がそもそもおかしいので、まずはそこを直す必要があるかと思います。
・<li>要素は、<ul>ブロック又は<ol>ブロックの中に入っている？
・<a>要素はインライン要素なので、<a>～</a>内に<dl>ブロックを入れることはできない。
あと、ロールオーバーで背景画像を変えるのは、JavaScriptを使った方が無難ではないかと、個人的には考えております。
このソースの場合、<a>の位置を変える必要があることから、背景画像はクラス「li.g1」に指定する必要がでてきそうですが、IE6の場合ではCSSの「:hover」はa要素でしか働かないようですし。
投稿日時 - 2010-03-20 17:21:00
お礼
TanakaHiro様
わー、さっそくのご回答ありがとうございます！
実はさっきパソコンを起動しなおすとsafariでもちゃんと見えていたのです。。
キャッシュか何かの影響でしょうか？？
でもTanakaHirom様のおっしゃるとおり、自分もこのhtmlが微妙なことはなんとなく気づいてはいましたが、なるほど！そうですね
aの中にdlのブロックを入れることは確かにまずいですね。
dreamweaver上でも、aでかこえないところを
むりやり手打ちでかこみました。（本来ならimg dt dd など個々にaがついてしまいました）
imgでいれた画像がjsでロールオーバーができるのは知っているのですが
cssの背景画像で入れているものもjsでいけますか！？
やり方をしらないので、自分の知識の中であれこれやっている状態です。
今のところsafariとfirefoxでは見えていますが
まずい現象がおきてもおかしくないですよね。
まだまだよくわかっていないのでちょっと混乱していますが
li はulの中に入れています！
投稿日時 - 2010-03-20 18:03:30
