CSSでボックスレイアウトをしています。下記の#logo,#menuと#mainのボックスの間に隙間が出来てしまいます(Firefoxのみ)。なお、文字サイズを変更すると隙間の幅も変化しますが、相対サイズを指定した要素はありません。この隙間を消す方法を教えて下さい。


■HTMLソース
<div id=”logo”><a><img /></a></div>
<ul id=”menu”>
<li id=”active”><a><img /></a></li>
<li><a><img /></a></li>
<li><img /></li>
<li><a><img /></a></li>
</ul>
<div id=”main”>
</div>
■CSSソース
#logo {
float: left;margin: 0;padding: 0;
}
#menu {
float: right;position: relative;top: 90px;padding: 0;margin: 0;
}
#menu li {
float: left;margin: 0;padding: 0;
}
#main {
clear: both;padding: 10px 0px 0px 0px;margin: 0;margin-right: 1px;border: 1px solid #999999;border-top: none;font-size: 13px;
}

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/10/01 20:03:06
  • 終了:--

回答(1件)

id:i-Daisuke No.1

i-Daisuke回答回数10ベストアンサー獲得回数02005/10/05 11:45:41

ポイント40pt

http://oshiete1.goo.ne.jp/kotaeru.php3?q=1593000

[教えて!goo] 隙間をなくすには?

このURLで似た感じの質問が出ています。


・li要素のhtmlの改行をなくす

・img要素とliにvertical-align:text-bottomを指定。

・li要素にdisplay:block;を指定


等を試してみてはいかがでしょうか?

id:dak

おお、これ、行けそうですね。実は、実務的には#mainを#logoより上に持ってきてmargin-topを取り、そこに#logoをposition:absolute;で流し込むという形で解決してしまいました。ですが今後のためもありますので、まだ何か付け加えられる方がいらっしゃいましたら宜しくお願いします。関連ありそうなものにはポイント付けます。

2005/10/05 20:29:27

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません