ジオシティーズにてのサイト作り（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 回答日時： 2011/04/18 23:31

>は学校でこう習って、これ以外の書き方を知りません（汗）。

。。
>どう直したら良いのでしょうか？

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

この回答へのお礼

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

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

お礼日時：2011/04/20 21:37

No.2 回答者： naokita 回答日時： 2011/04/18 01:14

ブラウザが違えば、間違って解釈されるから

表示するユーザー環境や差異を考慮する事も大事。

画像が表示される条件で、
アンカーテキストを非表示、画像で表示するなら。
----------------------------
#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ソースと張り替え表示してみた所。。。
下の方に有る「表」まで妙なことになってしまいまして（汗）。

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

補足日時：2011/04/18 15:35

この回答へのお礼

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

お礼日時：2011/04/18 15:43

No.1 回答者： Safe_Mode 回答日時： 2011/04/17 15:50

HTML側では　aのアンカー指定が無いことくらいですかね。

>　><a href="#" id="home">
　の"#"の部分
ただし、これは表示されないという問題とは無関係ですね。

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

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

この回答への補足

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

>text-indent:-9999px;

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

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

補足日時：2011/04/17 16:17

この回答へのお礼

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

お礼日時：2011/04/18 15:44