ブラウザ崩れが起こりました。CSSを書き直したいのですが、よく分かりません。

質問

ブラウザ崩れが起こりました。CSSを書き直したいのですが、よく分かりません。

http://www.asahi-home.info/test/asahi-home/index2.html
でページ上部「ホーム」「会社情報」「住宅情報」などがあるメニューの部分です。
これが、ブラウザによっては青い画像の下に隠れてしまうようです。
当方PCでIE６、IE7、FireFox２．０、Safari（バージョン不明）で確認したところ問題なく表示されます。

クライアント様からこの部分の表示崩れがおきているとのクレームがありました。（クライアント様のブラウザ不明）

その部分のCSSは以下のようになっています。

アドバイス宜しくお願いいたします。

/* ナビ*/
#navi {
text-align: left;
}

#navi li {
float: left;
}

#navi li a{
display: block;
text-indent: -9999px;
}

#navi li#menu01 a{
background: url("../image/navi01.gif") no-repeat;
width: 99px;
height: 40px;
}
#navi li#menu02 a{
background: url("../image/navi02.gif") no-repeat;
width: 99px;
height: 40px;
}
#navi li#menu03 a{
background: url("../image/navi03.gif") no-repeat;
width: 99px;
height: 40px;
}
#navi li#menu04 a{
background: url("../image/navi04.gif") no-repeat;
width: 119px;
height: 40px;
}
#navi li#menu05 a{
background: url("../image/navi05.gif") no-repeat;
width: 99px;
height: 40px;
}
#navi li#menu06 a{
background: url("../image/navi06.gif") no-repeat;
width: 103px;
height: 40px;
}

#navi ul li.active a {
background-position: 0 -40px absolute !important;
}
#navi ul li a:hover {
background-position: 0 -40px absolute !important;
text-decoration: none;
}

/* メインイメージ（青の画像部分）*/
#bgmainImage {
clear: both;
margin: 0 auto;
height: 200px;
background: url("../image/main_image_bg.gif") no-repeat center bottom;
}

.mainImage {
margin: 0 auto;
width: 800px;
}

/* メイン コンテンツ部分*/
#bgmain {
margin: 0 auto;
background-color: #fff;
}

#main {
margin: 0 auto;
width: 800px;
padding: 8px 0 0 0;
}

#main h3 {
clear: both;
margin: 15px 0 0 0;
}

回答No.4

torayoshi

torayoshiです。
私のブラウザ環境はIE8,Firefox3.0.7です。

回答No.3

reverie013

マルチの場合はマルチである旨とマルチ先を明記してもらえると、
回答者に親切かと思います。

余談ですが、回答じゃないと思われるのも難なので
私からの回答は(見当外れだったかもしれませんが)知恵袋の方に
記載していますのでそちらをご覧下さい。

回答No.2

torayoshi

topの"add2.gif"とメニューの隙間が10pxほどあり、
これがメニューを押し下げてるようです。
styles.cssの
ul li {
font-family: Verdana, "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック";
font-size: 13px;
color: #555;
padding-top: 10px;
}
の"padding-top: 10px;"を0pxにしてみてください。

お礼

回答どうも有り難うございます。

アドバイス頂いたとおり
padding-top: 10px;"を0pxに変更し、アップしました。

質問にも書いたとおり当方のブラウザ、
PCでIE６、IE7、FireFox２．０、Safari（バージョン不明）
全てOKだったので面食らった感じです。

とても助かりました。どうも有り難うございます。

追伸：お手数ですが、お時間ありましたらtorayoshi様のブラウザ環境を教えていただけますと幸いです。

回答No.1

noname#83877

ウインドウサイズを小さくして右にスクロールしてみてください。
ソース内ではよくわかりませんが、width:100%;やposition:absolute;の指定などしていればそれが原因の可能性が高いです。

お礼

回答どうも有り難うございます。
width:100%;やposition:absolute;の指定は見られませんでした。

metametamuの今回のアドバイスは今後のサイト制作に役立てたいと思います。