CSSテクニックコミュのメニューの区切り線が出ない（ネスケ）

現在、下記のようなスタイルでサイドメニューを作っています。
テキストのメニューで、テキスト周りに背景色をつけています。
メニューごとの区切りに高さ1pxの画像をボックスの下に背景で配置しています。

この内容でブラウザチェックをしたところ、IEとFirefoxでは問題なかったのですが、
ネスケ(7.1)で見ると区切りの画像が出ない場所があります。
詳しくは3、6、8、11行目の下の区切り画像が出なくなります。
区切りを画像ではなく、border-bottomで入れても同じことになりました。

ちなみに文字サイズを変えると区切りが出ない場所も変わります。
これを何とか解決する方法があれば、ご教授いただけませんでしょうか？

ul.s_menu{
width:150px;
margin:0;
padding:0;
}

.s_menu li{
width:149px;
margin:0;
padding:0 0 1px 0;
font-size:80%;
font-weight:bold;
list-style-type:none;
vertical-align: bottom;
background-image:url('../img/s_menu_line.gif');
background-position:bottom;
background-repeat:repeat-x;
border-left:1px #666666 solid;
}

.s_menu a{
background-image:url('../img/s_menu_arrow.gif');
background-repeat:no-repeat;
background-position:3px 8px;
padding:6px 0 6px 15px;
width:134px;
background-color:#FDF8BE;
display: block;
}

.s_menu a:link{
color:#555555;
text-decoration:none;
background-image:url('../img/s_menu_arrow.gif');
background-repeat:no-repeat;
background-position:3px 8px;
padding:6px 0 6px 15px;
width:134px;
display: block;
}

.s_menu a:visited{
color:#555555;
text-decoration:none;
}

.s_menu a:hover{
color:#777777;
text-decoration:none;
background-color:#FFDF64;
}

コメント(6)

最初
全て
最新の40件

[1] mixiユーザー 08月29日 12:22

前、遭遇しました（けど放置してました）
NN7だと、ブロック要素の間に1pxの隙間ができたりできなかったりするらしく、それが文字サイズによって場所が変わっていました。
<div>
あああ
あああ
あああ
あああ
あああ
あああ
</div>
div{
background:red;
margin:0; padding:0;
}
p{
background:orange;
margin:0; padding:0;
}
とやったら、pの間に、たまに1pxぶんだけ赤い背景が見えてしまったという・・・
borderを、1pxの背景画像にしてrepeat-xにしたりすると、直るかもしれないです。
まぁ、NN7とかシェアほぼ０ですが

[2] mixiユーザー 08月29日 15:10

回答ありがとうございます。
NN7だけのバグなんですね。

> borderを、1pxの背景画像にしてrepeat-xにしたりすると、直るかもしれないです。

今実際にその状態なんですが、やっぱり効果がないです…。
シェアが低いということで無視してもいいんですが、
何か方法を知っている方が居れば、情報をお待ちしています。

[3] mixiユーザー 08月30日 23:48

やっぱり方法は無いものでしょうか？
1回だけ上げさせていただきます。

[4] mixiユーザー 08月30日 23:59

ざっとソースを見ただけなんで間違ってるかもしれませんが、ネスケでbackground-positionで位置指定するとき「%」を使わないと表示がズレるバグがあるんですけど、それではないですかね？

因みにうちのクライアントさんはセキュリティの関係でまだネスケ7（WIN）を使ってます（IE6と併用）。デザインに不具合があったときに、シェアが低いので…と言い訳したら、うちは社員全員がまだ使ってるのよ、と怒られました（苦笑）

[5] mixiユーザー 08月31日 01:50

情報ありがとうございます。

%で指定してみたんですが、変わりませんでした。
それに元々border-bottomで指定してたのを、表示がおかしいのでbackground-imageでやってみた…という経緯なので、
今回はbackground-positionは関係ないのではないかなと思います。

引き続き、情報をお待ちしています。

[6] mixiユーザー 08月31日 02:06

唐突ですが、解決いたしました。

区切りの線を引きたくて、borderを使ったりbackground-imageを下に配置したりしてたのですが、
どうやらボックスのズレはボックスの一番下の1pxだったので、
線をボックスの上に配置すれば問題なく表示されました。
「線は下」という固定概念があっただけで、
発想の違いと言うか…凄く簡単なことでした。

バグ自体の解決はしなかったのですがやりたいことは出来たと言うことで、
自己解決とさせていただきます。
お騒がせいたしました。

ログインすると、みんなのコメントがもっと見れるよ