solidを指定した際、左右に微妙に動くのを解除したい

[新着] Webテンプレートを仮オープンしました

0   名前： novice ： 2007/03/16（金） 18:25  ID:J.dxZrih sub-Cl
横に並べたリストにリンクを張り、Hover時のみ囲い文字になるように設定したのですが
カーソルを合わせる度にリンクが微妙に動いてしまうのが気になります。
Solidで指定した線のpx分（現在1px)動いているのだと思うのですが

【質問内容】
ラインが現れても微動しないように固定するにはどうしたらよいでしょうか？

【現在の設定】
/* *********** CSS ************** */
div.menu {
height: 20px;
width: 95%;
text-align: center;
margin-left: auto;
margin-right: auto;
}

ul.menu {
list-style-type: none;
text-align: center;
}

li {
float: left; ;
font-family: HG創英角ﾎﾟｯﾌﾟ体;
color: #ffffff;
margin-right: 20px;
padding: 2px;
text-align: left;
}

/* *********** CSS ************** */

<!-- ************ HTML ************** -->
<div class ="menu">
<ul class ="menu">
<li>
<a href="******.html">******</a>
</li>
<li>
<a href="******.html">*******</a>
</li>
<li>
<a href="******.html">******</a>
</li>
</ul>
</div>
<!-- ************ HTML ************** -->
1   名前： モノ ◆7YMtX/NYmu ： 2007/03/16（金） 18:25  ID:TeHw2026 sub-Cl
提示されたものには、hover時の指定がないようですけども。

hover以外のときのborderの色を、
背景色と同じにしてみるとか。
背景が写真とか、単色が厳しいようなら、
transparentと指定してみるとどうですか。
a{border:1px solid transparent;}
a:hover{border:1px solid #f00;}
2   名前： novice ： 2007/03/16（金） 18:25  ID:J.dxZrih sub-Cl
モノさん返答ありがとうございます。
hover時の設定入れ忘れてました、申し訳ありませんorz

/* ********** CSS ************* */
a {
text-decoration: none;
}

a:hover {
border: 1px solid #FFFFFF;
color: #FFFFFF;
}
/* ********** CSS ************* */

モノさんのおっしゃられていたtransparentを試してみたところ
全てに白い枠が出てしまいました。
指定しているhover時の色が白なのでどれにカーソルがあってるのかわからない常態に・・・orz
でも、質問の件はおかげさまで無事解消されました。
あらかじめsolidを指定しておくとは考えもしませんでした。
うまく背景に溶け込む色を探したいと思います。

回答ありがとうございました。
一覧へ戻る