ショッピングサイトのレイアウトが崩れています・・・

質問

ショッピングサイトのレイアウトが崩れています・・・

EI8で構築したショッピングサイトをFirefoxで確認したところ下にずれていました。一部の画像が下に崩れているのと、商品の枠に背景色を付けたのですが、少ししか表示されません。
http://20651.shop-pro.jp/

色々いじってみたのですが可決できませんでした。

原因は何が考えられるのでしょうか。
ご存知の方いらっしゃったらぜひお助けください。
よろしくお願いします。o(_ _)o

回答No.3

nekomikekamo · ベストアンサー

#2です。
#top_bana pにpadding:0;を追加されているようですが、私が書いたのはマージンです。
以下を追加してもダメだったのでしょうか？
こちらで確認した限り、ずれはなくなりました。

#bana_s p,
#top_bana p{
margin:0px;
}

お礼

おはようございます。＾＾

marginをpaddingと間違えてうっかりミスしちゃいました！＾。＾；

問題解決です～♪　
margin:0px;を同じように小さいバナーのところに追加した結果綺麗に枠内に収まりました。
やっとすっきりしました！＾＾

ご親切に何度もご伝授頂いて本当に助かりました。
大変お世話になりました。ありがとうございました。m(_ _)m

回答No.2

nekomikekamo

とりえあず、
>>トップ画像とメインページの4枚の画像、左側のカテゴリーのところが全体的に下に下がっていて、グレーの枠からはみ出てるんですよ。
pタグのマージン分ずれていますのでマージンを無くせば解決。
#bana_s p,
#top_bana p{
margin:0px;
}

画像の背景は以下???
.product_list a img:hover{
background:#afeeee;
}

補足

ご回答ありがとうございます。度々すみません。o(_ _)o

画像の背景はうまく行きました～♪
本当にありがとうございます。＾＾

画像のずれについてはまだ駄目です。
ちなみに、CSSは以下の通りです。

/* -------------------------------------
* トップバナーエリア
* ------------------------------------- */

#top_bana{
width:944px;
height:125px;
border:1px solid #efefef;
margin:0px auto;
padding:1px;
text-align:center;
}

#top_bana p{
padding:0;
}

/* -------------------------------------
* 小さいバナーエリア
* ------------------------------------- */
#bana_s{
width:99%;
height:255px;
border:1px solid #efefef;
padding:1px;
text-align:center;
}

#bana_s img{
border:1px solid #efefef;
float:left;
margin-left:1px;
margin-right:1px;
}

/* ************************************************
* 左側メニュー
* ************************************************ */
#side_left {
width:150px;
text-align:left;
float:left;
background:#ffffff;
}

#cate{
width:150px;
margin-bottom:20px;
}

#cate_title{
height:15px;
color:#ffffff;
font-weight:bold;
margin:0;
padding:17px 12px 0;
background:url("http://img15.shop-pro.jp/PA01082/471/etc/side_title_31.jpg"); no-repeat;
}

#side_bg{
height:357px;
background:url("http://img15.shop-pro.jp/PA01082/471/etc/side_bg_37.gif");
margin-top:0;
}

#side_cate{
width:145px; text-indent:0.5em;
background-color:#ffffff;
margin:0px auto;
padding-top:5px;
}

#side_cate p{
padding:5px 5px 5px 20px;
margin:10px;
border-bottom:1px dashed pink;
text-align:left;
background:url("http://img15.shop-pro.jp/PA01082/471/etc/list.gif") no-repeat 0px 3px;
}

★ちなみに、左側のカテゴリーのところは、サイトをIE8で正常表示させるために無理やりにずれを直したものです。

恐縮ですが、よろしくお願いいたします。

回答No.1

yyr446

画像の崩れについては、当方の環境（Firefox3.6）では、どこも崩れてないように
見えます。

商品の枠に背景色を付けたのですが、少ししか表示されません。
＝＞これはインライン要素<a>？の背景色が、インライン要素の高さ（文字の高さ）にしか
かからないからではないでしょうか、擬似的にblockに変えるとよいそうです。

td a {display:block;}

でどうでしょう。

補足

ご回答ありがとうございます。

・画像の崩れについては、当方の環境（Firefox3.6）では、どこも崩れてないように
見えます。

↑そうですか？私のパソコンはトップ画像とメインページの4枚の画像、左側のカテゴリーのところが全体的に下に下がっていて、グレーの枠からはみ出てるんですよ。
友達にもみてもらったらやはりずれてると言われましたが、パソコンによっては表示が違うんですかね？

実は、作業中にいきなりずれが落ちて商品画像の背景もおかしくなってしまいました。
その後何度も原因を探して見たのですが結局解決できず・・・

とりあえず、ご伝授通りにtd a {display:block;}
を追加して見ましたが、画像のグレーの枠の外まで背景色が表示されます。

原因が分かれば一気に解決できると思いますけどね、本当に困っています・・