0

CSSでタブメニューを作成しました。
IEでは、動くのですが、FireFoxでは動きません。
text-indent:幅;)を利用し、外側にずらして
リンク部分はを設定してみました。
http://www.ctrl-beauty.com/ IE以外では
text-indent:（幅）;の表記は使えないのでしょうか？？
まったく無知で申し訳ございません。
******CSSは******

p {width:50px;
float:left;
margin-left:3px;
display:block;
margin-top:5px;
}

li {float:left;display:block;}

.box1 {height:20px;}

ul {margin:0px;}


/*-------------------- tabaction --------------------*/

.tab1on,
.tab1off,
.tab2on,
.tab2off,
.tab3on,
.tab3off,
.tab4on,
.tab4off
{
display:block;
width:80px;
height:20px;
float:left;
margin-right:1px;
text-align:center;
background-repeat:no-repeat;
background-position:center top;
}
.tab1on {background-image : url(tabfure.jpg);}
.tab1off {background-image : url(tabfure-off.jpg);}
.tab2on {background-image : url(tabskin.jpg);}
.tab2off {background-image : url(tabskin-off.jpg);}
.tab3on {background-image : url(tabdiet.jpg);}
.tab3off {background-image : url(tabdiet-off.jpg);}
.tab4on {background-image : url(tabhobby.jpg);}
.tab4off {background-image : url(tabhobby-off.jpg);}


.tab1on a,
.tab1off a,
.tab2on a,
.tab2off a,
.tab3on a,
.tab3off a,
.tab4on a,
.tab4off a,
{
display:block;
width:80px;
height:20px;
text-indent:-1000em;
text-decoration:none;
}

/*-------------------- boxcolor --------------------*/

.box21
{
clear:both;
border-top:solid 10px #000000;
border-bottom:solid 1px #000000;
border-left:solid 1px #000000;
border-right:solid 1px #000000;
height:212px;
}

****ｈｔｍｌ****
<div class="box1"><BR>
<p>MENU:</p>
<ul>
<li class="tab1on"><a href="menu1.html">タブメニュー</a></li>
<li class="tab2off"><a href="menu2.html">タブメニュー</a></li>
<li class="tab3off"><a href="menu3.html">タブメニュー</a></li>
<li class="tab4off"><a href="menu4.html">タブメニュー</a></li>
</ul>
</div>
<div class="box21">ブルガリフレグランス特集<BR>
<BR>
<BR>
ブルガリ・ブルガリ<BR>
</div>

質問者が選んだベストソリューション

Yahoo!知恵袋 5690日前