今更ながら・・・

web

CSS（スタイルシート）で「OFF LEFTを使わないように！」と禁止令が出ていたにもかかわらず、
まだ修正していなかった私の個人サイト。
少しだけ修正しようと試みたのだが、上手く出来なかった。
ということで、今日はそのままです。


headerにある a のところに画像（img）を嵌め込み、代替テキストに"Flower song"と入力。

【a に書いたCSS】

①　#header p a {
height: 102px;
width: 310px;
display: block;
}

②　#header a img {
outline: none;　→　border: none;
}

③　#header p a:hover {
background-image: url(images/f_top_rogo2.gif);
background-repeat: no-repeat;
}

④　#header p a:hover img{
visibility: hidden;
}


【解決できなかったこと】

  • 画像の四角い外側の枠が消えない。②は意味ないのかな？

→　解決しました。

FirefoxはOKだが、IE6はロールオーバーしたときに上にあるimg画像が消えない。
→　未解決
ロールオーバーした時に上の画像が消えない。ロールオーバーされない。（IE6のみ）
④をa:hover img{z-index:-1; position: relative;}に書き変えても、同じ状態です。
私のIE6が変なのかな？
ちなみに、あつのすけさんのサンプルはIE6もFirefoxも問題なし。


問題のサンプルをアップしてみました。IE6だとロールオーバーされない。
→問題のsample　（IE6で見て下さい。）

サンプルファイルも一応ダウンロードできるようにしておきます。
みなさん原因が分かったら、教えて下さい。
→sampleファイルダウンロード

→　解決しました。画像のずれは外枠の線のずれだったようです。

  • このやり方だと、検索エンジンはテキストを読まないのだろうか？

そう考えると、ロールオーバーの設定はやめてテキストだけをvisibility: hidden;で
見えなくする方が良いのかもしれません。
→　今後の課題かな。