人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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;
}

●質問者: dak
●カテゴリ:コンピュータ
✍キーワード:border CSS firefox HTML LOGO
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● i-Daisuke
●40ポイント

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

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

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


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

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

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


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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ