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」については、メイクショップのサーバー上のファイルにあり、弊社では変更ができないため、変更はしていません。

makeshop表示ずれ

カテゴリーから探す