中央部の画像が下に下がってしまい、フッターとの間に隙間があいています。

質問

中央部の画像が下に下がってしまい、フッターとの間に隙間があいています。
どうすれば直るでしょうか。何卒、ご教授いただきたくお願い致します。

http://www.coffeenobaisenya-a.com/

CSS:
/*------------------------------------- toppage --------------------------------- */
#toppage { overflow: hidden; width: 680px; text-align: left; margin: 0px 0px 20px 0px; vertical-align: top;}
#toppage h2 { text-indent: -9999px; line-height: 0.1px; font-size: 0.1em;}
#toppage h2.mainimage { display: block; width: 680px; height: 190px; background: url("../img/toppage/bnr_01.jpg") no-repeat; margin: 0px 0px 10px 0px; text-indent: -9999px; line-height: 0.1px;}
#toppage h2.latestnews { display: block; width: 680px; height: 35px; background: url("../img/toppage/h2_latestnews.gif") no-repeat; margin: 0px 0px 10px 0px;}

#toppage .bnrarea1 {width: 680px; margin-bottom: 20px;}
#toppage .bnrarea1 ul {width: 690px;}
#toppage .bnrarea1 li { width: 680px; height: auto; margin-bottom: 10x; text-align: left; list-style-type: none;}
#toppage .bnrarea1 li img { display: block; margin-bottom: 10x;}

html:
<div id="three_maincolumn">
?<div id="toppage">
<h2 class="mainimage">ひとつぶひとつぶ、丁寧にハンドピックした豆のみをお届けいたします。当店では、オーダーをいただいてから直火焙煎しております。ハンドピックで生豆を選定し、それぞれの豆の特徴を引き出すよう細火で焙煎度合いを微調節、手間と時間をかけて本当においしい珈琲を焙煎しています。新鮮な珈琲は香り、風味がちがいます。是非、こだわりの直火焙煎珈琲をお試し下さい。</h2>
<br />
<!-- ▼オススメバナーエリア -->

<div class="bnrarea1">

<a href="/products/detail.php?product_id=33"><img src="/user_data/packages/default/img/toppage/special sale 3.jpg" alt="初回購入者様限定販売！★キャンペーンは予告なく終了させていただく場合があります。" /></a><a href="http://www.coffeenobaisenya-a.com/products/detail.php?product_id=33">初回購入者様限定販売！ この機会に是非当店のこだわりをお試し下さい。　送料込み700円(税込・200g)</a>　　　　　　　　　　　　　
</div>

回答No.2

szk9998

>スクロールダウンしていただくとフッターとの間に隙
>間が少し開いております。中央のキャンペーン画像
>とアイス珈琲画像をいれたと
>ころ、隙間ができてしまいました。

すみません。
やはりよく理解できないのですが・・・

何とフッターとの間に隙間があるのでしょうか？
フッターというのは、画面最下部の、
ホーム　 当店のこだわり　豆リスト・・・・という部分ですよね。

とりあえず、バグというか入力ミスをみつけましたので、報告しておきます。
#toppage .bnrarea1 li
#toppage .bnrarea1 li img
のmargin-bottomの単位がおかしいですね。
これは、影響ないですよね～。たぶん。

お礼

ご回答誠に有難うございます。
説明がクリアーでなくすみません。その通りです。本体？と画面最下部の間に隙間ああいております。
これをくっつけたいのです。ＥＣキューブで構成されていて、ヘッダー、フッター、左メニュー、右メニュー、本文とそれぞれわかれています。更新するときは各パーツごとに更新が必要です。

＞とりあえず、バグというか入力ミスをみつけましたので、報告しておきます。
#toppage .bnrarea1 li
#toppage .bnrarea1 li img
のmargin-bottomの単位がおかしいですね。

有難うございます。訂正いたします。

回答No.1

szk9998

IE8とchormeでＨＰを見てみましたけれど、

＞中央部の画像が下に下がってしまい、フッターとの間に隙間があいています。

という状況が、わかりませんね。
デザイン的におかしたところは無いように見受けられますが・・・
隙間てどこをさしていらっしゃるのですか？

確認作業をされたブラウザは何でしょうか？
特定のブラウザのせいかもしれませんので。

お礼

ご回答有難うございます。スクロールダウンしていただくとフッターとの間に隙間が少し開いております。中央のキャンペーン画像とアイス珈琲画像をいれたところ、隙間ができてしまいました。当方IE8を使用しております。どのよな原因が考えられるのでしょうか。何卒、ご教授いただきたくお願い致します。