みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

CSSでボックス内の隙間が消えない

MacのDw2004MXで、ulリストでマークアップしたナビゲーションを横に並べてa要素に背景を設定し、テキストをレフトアウトしています。

Mac上のブラウザでは問題なのですが、WinのIE6で見てみると文字サイズが最小の時以外はナビの上部に白い隙間が表示されてしまいます。もちろんpaddingもmarginも0を指定しています。隙間は文字サイズが最大のとき高さ3px、文字サイズ中のとき高さ2pxです。
しかも、a要素のfont-sizeとline-hightはpxで指定しているのでWinの文字サイズ変更は効かないはず…
ulタグをdivで括り、divのpaddingもmarginも0としています。
お助けください。

====XHTML=====
<div id="nav">
<ul><li><a id="nav1" href="index.html">TOP</a></li><li><a id="nav2" href="room.html">page1</a></li><li><a id="nav3" href="price.html">page2</a></li><li><a id="nav4" href="service.html">page3</a></li><li><a id="nav5" href="meal.html">page4</a></li><li><a id="nav6" href="reserve.html">page5</a></li><li><a id="nav7" href="access.html">page6</a></li></ul>
</div>

======CSS=====
#nav{
width:705px;
height:30px;
margin:0;
padding:0;
}
#nav ul{
list-style-type:none;
margin:0;
padding:0;
height:30px;
}
#nav ul li{
display:inline
height:30px;
margin:0;
padding:0;
height:30px;
}
#nav ul li a{
display:block;
margin:0;
font-size:6px;
height:30px;
float:left;
background:url(../i/g/nav.gif) no-repeat 0 0;
text-indent:-5000px;
line-height:10px;
}

投稿日時 - 2005-07-25 19:06:37

QNo.1537467

ao_

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

#nav ul に
line-height:1.0;

を追加したらどうですか?(単位なし)
どこかで見たバグ対策です。

投稿日時 - 2005-07-26 10:45:13

お礼

ありがとうございます。
試してみましたが変化はありませんでした。

それで、line-hightに原因があると思っていたので、#navより上の階層にあるline-hightを全て削除したら解決しました。みなさん大変お騒がせしました。多分、#nav ul liにline-hightの指定がなかったため上階層のline-hightが継承していたのが原因だと思います。ホント単純なミスでした。
しかもコードを全て掲示しなかったため皆さんにもご迷惑をかけました。

投稿日時 - 2005-07-26 11:33:46

ANo.2

> ソース自体に単純なミスがないか見ていただくために付けました。

#nav ul li{
display:inline

にセミコロンが付いていないのは単なる質問投稿時のミスでしょうか?

また、XHTMLと書かれていますが、構成的にtext-indent:-5000pxなどという指定が何を意図するものなのか理解しかねます。

よろしければ、ページを提示してください。

投稿日時 - 2005-07-26 00:40:20

お礼

ありがとうございます。
セミコロンは投稿時のミスです。すみません。

作成しているサイトは公開しておりません。提示出来なくて申し訳ないです。
text-indent:-5000pxに関してですが、ナビゲーションを背景画像で表示し、上にあるテキストを不可視エリアに飛ばしています。Javaを使用しない高速なロールオーバーになり、しかもソース上はテキストナビゲーションになります。テキストの部分をdisplay:noneとして非表示にしているサイトもありますが、音声ブラウザではこれを無視してしまうものもあります。そのためこのテクニックを使用しています。

投稿日時 - 2005-07-26 08:49:43

ANo.1

ソースコードを切り貼りしてテストページを作って確認しようとしたら、私のWIN用IE6.0ではちゃんと表示されません。(text-indent:-5000px;のせいとかで)
ただ文字サイズを変更して問題がおきるのであれば、

#nav{
width:705px;
height:30px;
margin:0;
padding:0;
font-size:6px;
}

とnavにもフォントサイズを設定してみたらどうですか?

投稿日時 - 2005-07-25 19:46:56

お礼

ありがとうございます。
テストページですが、背景画像を用意しないと何も表示されない設定になっています。ソース自体に単純なミスがないか見ていただくために付けました。
今手元のWinがなく確認できませんので明日確認してみます。

投稿日時 - 2005-07-25 22:10:02

あなたにオススメの質問