グローバルナビがうまくいきません。

質問

下記サイトを作っているのですが、グローバルナビがうまくいきません。
http://sample1.digi2.jp/kindergarten/index.html

ホバーしたときにサイズを縮小した背景が出るのですがなぜか上ぞろえになっていないように見えます。

予定だと下のほうがへこむように見せたかったのですが、なぜ下ぞろえになってしまうのでしょうか？

またホバーするとブラウザの問題かボタンのあいだの隙間が多少違うように見えるのですが、この状況では商用などでは厳しいでしょうか？
これくらいの誤差なら仕方がないでしょうか？

回答No.2

balloon23 · ベストアンサー

再度回答させていただきます。

ソースを拝見させていただきましたが、崩れる原因をいくつか。
検証環境が手元にないので数字だけの話になってしまいますが；

■floatをしている親要素の幅がいっぱいになっています。
└IEなどの場合、計算上は100％でもfloatが崩れます。
　div#listの横幅をもう少し広げてあげてください。

■ソース上のタブ、インデントの問題
└リストタグはソース揃えのための余白がちょっとだけ出力されてしまいます。
　リストタグはソース上は空白を開けず揃えず連結して書いた方が良いです。

■div#list直下ulへのブロック要素指定
└こちらはそれほど重要ではありませんが、一応
　display:block;width:100%;

でも、一番手早いエラー回避はtableタグを使うことかもしれませんｗ
スマホ対応など考えなければブラウザ間の差異も少なく、安全かもです。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

<br clear="both" />をつけたら問題が出なくなりました。
どうもフロートが解除されていなかったのでしょうか？

親要素の<ul class="linktop">にクリアーフィックスやオーバーフローをつければよいと思っていたのですが、それでは崩れました。
フロート解除自体間違っていたのでしょうか？

回答No.1

balloon23

とりあえず気になった点だけ。

リストを使っておりますので
<ul><li></li><li></li><li></li></ul>
な形でソース上でも改行、タブ揃えなどをしないようにした方が良いです。
（もしくはcssでulに極小のフォントサイズを指定、とか？）

あと、リスト内にある画像でメニューのサイズが変わっているかもしれません。
cssで画像にdisplay:block;を追加してみてはどうでしょう？

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

display:block;を追加したところ確かに画像の問題は解決しました。
ただ一番最後のボタンをホバーすると崩れるようになってしまいました。

フロートがきっちり解除されていないのでしょうか？
フロートしているしたのブロック要素もフロートしている場合はoverflow: hidden;をそれらの親要素に入れれば良いのでしょうか？

補足

li.linktop a:hover {
background-image: url(images/listtop1b.png);
background-position: left top;
background-repeat: no-repeat;
}
li.linktop+li a:hover {
background-image: url(images/listtop2b.png);
background-repeat: no-repeat;
}
li.linktop+li+li a:hover {
background-image: url(images/listtop3b.png);
background-repeat: no-repeat;
}
li.linktop+li+li+li a:hover {
background-image: url(images/listtop4b.png);
background-repeat: no-repeat;
}

上記にdisplay:block;を追加するということでしょうか？