クリックしてからページが切り替わるまでにアンカーリンク周囲に現れる点線について

質問

FireFoxでブラウザしながらサイトを制作しています。
クリックしてからページが切り替わるまでにアンカーリンク周囲に現れる点線が、ボタンからはみ出て関係ないところまで広がってしまいます。

リストを横並びにしたナビゲーションリンクです。
リスト要素に記述したテキストをindentで画面外に飛ばし背景画像でボタン内容を表示しているのですが、そのせいか、画面外まで点線が及ぼうとしているかのようです。

そもそも、この点線が出ないように制御する事ができるのか、
或は、cssでの記述で何か思い当たるフシがありましたら
教えて頂けないでしょうか？

リスト内のテキスト項目のアンカーにそれぞれ次の様な
cssを用意して制作しています。

a.othersche{
display:block;
width:184px;
height:52px;
text-indent:-9999px;
background:url(imageothersche.jpg) no-repeat;
margin:0px 0px 10px 10px;
float:left;
}
よろしくお願いします。

回答No.2

senkan08 · ベストアンサー

CSSで該当のa要素に
a {
　　overflow:hidden
}
と加えれば点線をリンク範囲内にすることができます。

outline:noneでも問題を解決することはできますが、点線自体が表示されなくなり、Tabキーでリンク箇所を移動した際に何処にフォーカスが当たっているのかわからなくなります。

お礼

a {
　　overflow:hidden
}
加えてみましたが消えませんでした。
他に原因が考えられますか？
左のほうへ向かって点線が突き出してしまっています。

outline:none
しかし、これで消えましたので、とりあえず見苦しい状態は回避できました。このようなスタイルシートを知りませんでした。どうもありがとうございました。

回答No.1

noname#100277

text-decoration: none;
を指定すれば良いのでは？

補足

ありがとうございます。
でも、なおりませんでした。
text-decorationで制御できる範囲ではなさそうです。
どんなサイトのリンクをクリックときでも同じ様にあらわれる
点線なのですが、形がおかしくなっているものです。