htmlの描画がずれてしまう

Question

楽天goldでhtmlを作ってiframeで埋め込みをしています。

IE、Chromeではきれいに表示されているのですが、
Firefoxだとずれてしまっています。

htmlの記述のどこかが悪いのだと思いますが、どこが悪いのかがわかりません。

すみませんが、お教え願えますでしょうか？

該当サイトはここです。
(解決後、urlをけしました。)

よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

失礼いたしました、確かにpaddingを調整すると、背景画像も影響を受けてしまいます。

文字だけを移動するために、
まずタグの中身を〜で囲んでいただき、
例えば
feature01 dd.txt div { margn-top: 25px; }
のように、囲むために使ったタグに、上方向の空白を加え、
文字の位置を調整していただけますでしょうか。

Answer

ECマスターズの田中です。

説明文を記載しているtxtクラスのタグが、
本来ブロックレベル要素ではないため、
Firefoxの場合は高さの指定が無視されてしまった結果、
レイアウト崩れの原因になっておりました。

楽天GOLD「category」フォルダ内「category.css」の指定の中に、

dd.txt { display: block; }

を加えていただくか、
td.feature0* dd.txt { （*の部分は1〜4の数字）
の各規則の中に、「display: block;」を加えていただくことで、
背景の表示崩れは解消することができます。

ですが、上記指定だけですと、
OS（Windows、Mac）やブラウザ（IE、Chrome、Firefox）の違いにより
文字の位置にズレが発生します。

一行あたりの高さや、フォントの大きさが
「em」「%」のように、環境によって変わりやすい単位で
指定されていることが原因です。

該当箇所は、必ず固定のサイズで表示される場所になりますので、
td.feature0* dd.txt { （*の部分は1〜4の数字）
の各規則の中で、line-height や font-size の値の単位を
pxにご変更いただき、見た目の調整を行っていただけますでしょうか。
また、文章の開始位置の調整も、現在タグで行われておりますところを、
paddingの値を調整することで行っていただけますでしょうか。

CSSの調整方法がわからない場合は、再度ご返信ください。

Answer

ご回答ありがとうございます。

>td.feature0* dd.txt { （*の部分は1〜4の数字）
>の各規則の中に、「display: block;」を加えていただくことで、
>背景の表示崩れは解消することができます。
⇒いれました。

>各規則の中で、line-height や font-size の値の単位を
>pxにご変更いただき、見た目の調整を行っていただけますでしょうか。
⇒pxに変更しました。

>また、文章の開始位置の調整も、現在タグで行われておりますところを、
>paddingの値を調整することで行っていただけますでしょうか。
⇒この方法がうまくいきません。
　で文字開始位置を下げていますが、td.feature0* dd.txt のpaddingをマイナスにしたりしてお
　文字が下がりません。
　背景も一緒に下がってしまってしまいます。

　すみませんが、どのようにしてで文字を下げているところを
　paddingでどう設定すればよいでしょうか。

どうぞ、よろしくお願いいたします。

Answer

ご回答ありがとうございます。

divで囲むことで、描画ズレが解消しました。

ありがとうございました。