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

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

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

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

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

No.1 回答者： yyr446 回答日時： 2010/10/06 16:28

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

見えます。

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

td a {display:block;}

でどうでしょう。

この回答への補足

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

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

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

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

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

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

補足日時：2010/10/07 18:58

No.2 回答者： nekomikekamo 回答日時： 2010/10/07 19:56

とりえあず、

>>トップ画像とメインページの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_ti … no-repeat;
}

#side_bg{
height:357px;
background:url("http://img15.shop-pro.jp/PA01082/471/etc/side_bg …
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.gi … no-repeat 0px 3px;
}

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

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

補足日時：2010/10/07 20:40

No.3 ベストアンサー 回答者： nekomikekamo 回答日時： 2010/10/07 22:33

#2です。

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


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

この回答へのお礼

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

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

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

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

お礼日時：2010/10/08 07:15