CSSテクニックコミュのG-naviとlocalnaviの隙間がうまらない。

こんにちは。
いま困っています。
デザインの参考としては↓の
http://www.mcdonalds.co.jp/
グローバルナビとローカルナビの間に隙間に指定していないはずの「4px」があいてしまいます。

ポイントとしてはFire Foxではばっちり隙間なくいくんですが、IEでなぞの「4px」がでてきます。

すみませんがアドバイスをください。
お願いします。

↓htmlソース↓

<div id="navi_l">
<ul>
<li><a href="#"><img src="common/img/g_navi01_l.gif"></a></li>
<li><a href="#"><img src="common/img/g_navi02_l.gif"></a></li>
<li><a href="#"><img src="common/img/g_navi03_l.gif"></a></li>
</ul>
</div>
<div id="localavi">
<ul>
<li><a href="#">ミッション</a></li>
<li class="local_line"><a href="#">会社概要</a></li>
<li class="local_line"><a href="#">事業内容</a></li>
<li class="local_line"><a href="#">採用情報</a></li>
</ul>
</div>

↓cssソース↓

/*-----lobalNavi-----*/
div#navi_l{
margin:0;
padding:0;
width:779px;
height:38px;
text-align:left;
}

div#navi_l img{
vertical-align:bottom;
}

/*-----localavi-----*/
div#localavi{
display:block;
width:746px;
height:24px;
background:url(../img/localnavi_bg.gif) no-repeat center top;
margin:0 0 9px 0;
}

div#localavi ul{
display:block;
height:24px;
margin:0 0 0 10px;
}

div#localavi li{
display:inline;
float:left;
padding:0 15px;
vertical-align:top;
}

div#localavi li.local_line{
display:block;
background:url(../img/local_line.gif) no-repeat;

よろしくお願いします。

プリプリ。

コメント(10)

最初
全て
最新の40件

[1] mixiユーザー 06月09日 12:42

ちゃんと検証していませんが、HTML内の改行が原因ではないでしょうか。

<div id="navi_l">
<ul><li><a href="#"><img src="common/img/g_navi01_l.gif"></a></li><li><a href="#"><img src="common/img/g_navi02_l.gif"></a></li><li><a href="#"><img src="common/img/g_navi03_l.gif"></a></li></ul>
</div>
<div id="localavi">
<ul><li><a href="#">ミッション</a></li><li class="local_line"><a href="#">会社概要</a></li><li class="local_line"><a href="#">事業内容</a></li><li class="local_line"><a href="#">採用情報</a></li></ul>
</div>

これでいかがですか？

[2] mixiユーザー 06月09日 12:56

うーん現象が確認できないんですが、

div#localavi li{
display:inline;

「display:inline;」は必要ないかも。

[3] mixiユーザー 06月09日 12:57

菜さんのおっしゃるとおり、これって、HTMLのリストの改行をとると不思議と隙間がなくなります。いかがなものかと思う仕様ですが。

[4] mixiユーザー 06月09日 14:30

みなさんありがとうございます。
<ul><li>はすきですけど。隙間は嫌いです。
いわれたとおりコメントアウト入れてみました。

が！！！！

どーにもこーにも。。。
FireFoxはいいんやけども。。。

/*--------*/

あおい→↓↘さん。
すいません。まちがえて。
　display:inline;
になってましたが。
　display:block;
です。

でも！！！

かわりません。。

わかりません。。。。。

頭イタイ。。。。。。。

なぞの隙間の正体、、
グローバルナビが下方向に「4px」押してる感じがします。

心当たりのある方がいましたら、本気で困っているのでぜひ教えてください。
お願いします。

プリプリ。

[5] mixiユーザー 06月09日 14:37

解決策とは違うんですが、
*{
　border: solid 1px;
}
とかを追加して、すべてにボーダーをつけてみると、
思わぬところにボックスがあったり、
なんでこいつに隙間が？　みたいな発見があったりします。
チェック用としてたまにやったりしますが、
これをやって変な所とか見つからないですか？
ソースをしっかり見てないので、まだ意見は何も言えませんが…。

[6] mixiユーザー 06月09日 14:49

え、単純に、

<ul><li><a href="#">ミッション</a></li><li class="local_line"><a href="#">会社概要</a></li><li class="local_line"><a href="#">事業内容</a></li><li class="local_line"><a href="#">採用情報</a></li></ul>
</div>

と、</li>後の改行とることでなおりませんかね？

[7] mixiユーザー 06月09日 14:55

ソースそのままコピペして（CSSはヘッダに直書きで）、
winIE6で見てみましたけどdivとdivの間に隙間開きませんでしたよ？

他の部分が影響してませんか？

[8] mixiユーザー 06月09日 15:32

えどさん＞
返事ありがとうございます。
　border:solid 1px #CC0000;
チェック済みです。
なんら問題ないと思うんですが。。

mindsculptureさん＞
う～～～～ん。それいまコメントアウトでやってるんですけど、かわんないんですよ。。
コメントアウト使わずに一行にしても変わりませんでした。泣

あおい→↓↘さん＞
僕もそれやったんですよ。上にあるものの影響でなってるんだとふんで、その部分だけコピペしてlayout.cssをつけて。

そして。。

IEでみてみると！！！

な～～～～～んもかわんない。。。。。泣

あおい→↓↘さんと僕との違いといえば
画像があるか、ないかだけ。

それだけでくっつくのなら。。

何が原因？

画像？？

え！？

ええ！！？？

だって、Fire Foxばっちりやもん！！

泣泣泣泣泣泣

もうちょっとがんばってみよう。
負けるな自分。！

といいながら心のどこかで皆さんを頼りにしていたり。。泣

[9] mixiユーザー 06月09日 16:00

みなさん、ありがとうございました。
解決策はこれです！！！！

div#navi_l img{
vertical-align:bottom;
}

そんなのわかんね～～～～YO！！

みなさんもお困りのときは是非！！

でっかいヒントをくださったあおい→↓↘さん。
まじでありがとうございます。

僕も好きです、昇龍拳。

あ～～～つかれた。

でもやったね！！！

コメントくださった皆さん、
ほんとにありがとうございました。
心からありがとうございます。

p.s.
もっと勉強せな。

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