makeshop表示ずれ

Question

お世話になっております。
度々の投稿失礼いたします。

http://www.morinoen.com/shopdetail/000000000406/ct194/page1/order/

こちらのＰＣで見た場合の商品ページなのですが、新しい商品詳細画面を作ってから、
表示がずれてしまいます。

上部に、商品１枚目画像が左に配置され、右側にカートにいれるボタンが
くるのですが、ちょうど右にこず、少しずれた下の方から表示されてしまいます。

以下の商品は正しく表示されています。
http://www.morinoen.com/shopdetail/013000000011/ct194/page1/order/

ちなみに、IEではずれていますが、googlechromeでは商品画像のとなりにしっかりカートに入れるボタン等が表示されています。


また、両方のＵＲＬの商品とも下部にあるレビュー投稿ボタンである「評価を送信する」というオレンジのボタンがおかしな位置に表示されてしまいます。

また、追加商品画像で登録した画像も変な位置に表示されてしまいます。
どのように修正したらよいでしょうか。こちらは、ＩＥでもgoogle chromeも変な表示です。

どうぞよろしくお願いいたします。

Answer

ECマスターズの田中です。


＞上部に、商品１枚目画像が左に配置され、右側にカートにいれるボタンが
＞くるのですが、ちょうど右にこず、少しずれた下の方から表示されてしまいます。

最初に、ページの構造についてご説明いたします。

〜によって、
商品に関する情報（レフトナビの右、パンくずリスト〜ユーザー評価の部分）が
囲まれており、

その中で、商品画像を表示させる 〜
および商品コード〜いいねボタンを表示させる 〜
が、左右にfloatする形で設置されております。

〜の横幅は300ピクセル、
〜の横幅は380ピクセルありますので、
横並びに表示させるには、〜の横幅が
680ピクセル以上必要なのですが、

http://www.morinoen.com/shopdetail/000000000406/ct194/page1/order/
の〜の中には
横幅680ピクセルを超える要素がないため、
並べて表示させる横幅が確保できず、上下にズレて表示されております。

http://www.morinoen.com/shopdetail/013000000011/ct194/page1/order/
の場合は、
説明文の中に横幅730ピクセルと指定されたタグがあるため、
〜の横幅も730ピクセルとなり、
左右に並んで表示させることができております。

たとえば、必ず説明文の中に横幅680ピクセル以上の画像を設置する、
スタイルシートで「#detail」に対して横幅を680ピクセル以上設定する、
などの方法でご対応ください。


＞また、両方のＵＲＬの商品とも下部にあるレビュー投稿ボタンである「評価を送信する」というオレンジのボタンがおかしな位置に表示されてしまいます。

こちらは、InternetExplorer（以下IE）と他ブラウザの
解釈の違いが原因です。

通常のブラウザでは、ユーザー評価の入力欄の真下、中央の位置から
スタイルシートによって、右に240ピクセル、上に110ピクセル移動させることによって
送信ボタンを設置しているのですが、
IEの場合のみ、移動を始める開始位置が
中央ではなく左端になっているため、
同様に右に240ピクセル、上に110ピクセル移動させたことによって
「内容」の入力欄に被ってしまっております。

可能であれば、HTMLを修正していただき、
〜を、〜の中に
含めていただければ、安定して表示させることができるようになりますが、
HTMLの編集が難しい場合は、「評価を送信する」ボタンを操作している
下記スタイルシート規則を、

===== この下の行から ================
#reviewBtn {
    position: absolute;
    margin-left: 240px;
    margin-top: -110px;
}
===== この上の行まで ================

下記のように修正していただきますようお願いします。

===== この下の行から ================
#reviewBtn {
    position: relative;
    margin-left: 550px;
    margin-top: -110px;
    margin-bottom: 60px;
    display: block;
    height: 60px;
    width: 80px;
}
===== この上の行まで ================

なお、このスタイルシートによる修正は
修正前と同様に、環境の違いによるズレが発生しやすいので
ご注意ください。


＞また、追加商品画像で登録した画像も変な位置に表示されてしまいます。
＞どのように修正したらよいでしょうか。こちらは、ＩＥでもgoogle chromeも変な表示です。

追加商品画像を囲む 〜 の高さに
50pxが指定されていることが原因です。

同時に「position:relative;」が指定されているため、
いわば50ピクセルの高さの表示領域を確保してページから浮いている状態なので、
その中に50pxを超える画像が設置されても
高さが変わらず、画像がそのままの高さで表示され、このような結果となります。

「.inner」への規則内にある「height: 50px;」を削除していただくことで解決しますが、
そうすると〜が他の場所で使われていた場合、
その場所が逆にズレを起こす可能性がありますので、

#r_addImg .inner { height: auto; }

のように、場所を限定して上書きしていただくことで
他の場所のズレを防ぐことができます。

ですが、もし自家焙煎ほうじ茶専門店さんによるスタイルシートの変更が原因で
このようなズレが発生したのであれば、
原因を把握していないままさらに変更を加えることで
さらに別の箇所のズレが発生する可能性もありますので、

「.inner」について、スタイルシートの変更を行ったことがないかどうか、
今一度ご確認いただきますようお願いいたします。

Answer

すっきり解決いたしました！
現在、それぞれのブラウザで正常に表示されています。
詳しく原因も教えて頂き理解いたしました。
本当にありがとうございます。

※「.inner」については、メイクショップのサーバー上のファイルにあり、
弊社では変更ができないため、変更はしていません。