ジオシティーズにてのサイト作り（html＆CSS）

質問

どうしてもどうしても画像とボタン行が表示されず困っております。
ヤフーにも問い合わせましたが彼らが答えられる範囲では全て
合ってるようでした。。。

やはり私の作った拙いソース・コードに問題が有るのでしょうが。。。

ボタン行だけでも表示させたいので下記にソースを記します。。。

何処に問題アリなのか判る方おりますでしょうか？

★html★

<div id="btn">
<ul>
<li><a href="#" id="home">home</a></li>
<li><a href="#" id="live">live</a></li>
<li><a href="#" id="access">access</a></li>
<li><a href="ticket.html" id="ticket">ticket</a></li>
<li><a href="http://www.t-naoko.com/" id="fanclub">fanclub</a></li>
</ul>
</div>

★CSS★

#container #btn {
width: 600px;
background-color: #00FF00;
height: 30px;
}
#container #btn li {
float: left;
width: 120px;
}
#btn li {float:left;
list-style-type:none;
}
#btn a {
text-indent:-9999px;
height:30px;
width:120px;
display:block
}

#home {
background-image: url(image/home.gif);
height: 30px;
width: 120px;
}
#home:hover {
background-image: url(image/home_over.gif);
height: 30px;
width: 120px;
}
#live {
background-image: url(image/live.gif);
height: 30px;
width: 120px;
}
#live:hover {
background-image: url(image/live_over.gif);
height: 30px;
width: 120px;
}
#access {
background-image: url(image/access.gif);
height: 30px;
width: 120px;
}
#access:hover {
background-image: url(image/access_over.gif);
height: 30px;
width: 120px;
}
#ticket {
background-image: url(image/ticket.gif);
height: 30px;
width: 120px;
}
#ticket:hover {
background-image: url(image/ticket_over.gif);
height: 30px;
width: 120px;
}
#fanclub {
background-image: url(image/fanclub.gif);
height: 30px;
width: 120px;
}
#fanclub:hover {
background-image: url(image/fanclub_over.gif);
height: 30px;
width: 120px;
}

回答No.3

Safe_Mode

>は学校でこう習って、これ以外の書き方を知りません（汗）。。。
>どう直したら良いのでしょうか？

書き辺りが参考になるかと思います。
http://ameblo.jp/lifetrackback/entry-10239920344.html

お礼

どうも有難うございます。

勉強を続け私の頭で果たして判るようになるのか
未知数ですが。。。
今後の参考にさせて頂きます。

回答No.2

naokita

ブラウザが違えば、間違って解釈されるから
表示するユーザー環境や差異を考慮する事も大事。

画像が表示される条件で、
アンカーテキストを非表示、画像で表示するなら。
----------------------------
#btn,#btn ul,#btn li,#btn a{
margin:0 !important; padding:0 !important;} /* Reset */

#btn {
width: 600px;
background-color: #00FF00;
height: 30px;
}
#btn ul:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#btn ul {
min-height: 1px;
}
* html #btn ul {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}
#btn li {
float: left;
width: 120px;
height:30px;
list-style-type:none;
}
#btn a {
text-indent:-9999px;
height:100%;
width:100%;
display:block;
}
#home { background: url(image/home.gif);}
#home:hover { background: url(image/home_over.gif);}
#live { background: url(image/live.gif);}
#live:hover { background: url(image/live_over.gif);}
#access { background: url(image/access.gif);}
#access:hover { background: url(image/access_over.gif);}
#ticket { background: url(image/ticket.gif);}
#ticket:hover { background: url(image/ticket_over.gif);}
#fanclub { background: url(image/fanclub.gif);}
#fanclub:hover { background: url(image/fanclub_over.gif);}

----------------
但し、上記は表示出来るように修正しただけであって、
最近は、上記のようなCSSは利用しない方も多い事でしょう。。。

お礼

どうも有難うございます。

補足

ありがとうございます。

これを最初に書いた私のCSSソースと張り替え表示してみた所。。。
下の方に有る「表」まで妙なことになってしまいまして（汗）。

やはり私には、この道は無理な気がして来ました。。。
難しくて、よく判らずやってますからネ（汗）。

回答No.1

Safe_Mode

HTML側では　aのアンカー指定が無いことくらいですかね。
>　><a href="#" id="home">
　の"#"の部分
ただし、これは表示されないという問題とは無関係ですね。

css側で
>text-indent:-9999px;
これが問題と思いますけど。
-9999pxを変更すればいいでしょう。

私が試してみたところでは上記のとおりです。

お礼

どうも有難うございます。

補足

#のリンク設定は無関係としても。。。

>text-indent:-9999px;

は学校でこう習って、これ以外の書き方を知りません（汗）。。。
どう直したら良いのでしょうか？

因みに自宅PCでは画像もボタン行も問題なく表示されるのです。