MAC版IEのCSS、paddingを適用すると崩れてしまいます。

解決済

質問者：nomura0910
質問日時：2005/08/03 13:10
回答数：4件

質問いたします。
下記内容のHTMLを打ちますと、Windows環境では、問題なく左側に余白ができ、右側は何も無く表示されます。ですが、このHTMLをMAC版IEで表示させますと、右側にも余白が表示され、レイアウトが崩れてしまいます。何か、MAC版IEのバグでしょうか？誰か解る方、アドバイスを頂けると、助かります。
それでは、よろしくお願いします。m(__)m

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>実験用</title>
<style type="text/css">

</style>
</head>

<body bgcolor="#666666" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<table width="500" height="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>

<table border="0" cellspacing="0" cellpadding="0">

<tr>
<td class="padding">ながいながい文章を入力して、CSSのpadding-leftで制御をした場合、左側にしかpaddingの設定をしていないのに、右側にも余白が適用されてしまいます。何故でしょうか？</td>
</tr>
</table>

</td>
</tr>
</table>
</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： OhMabu
回答日時：2005/08/03 22:05

抜けていましたね、

.paddingにdisplay: blockをたしてみてください。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。無事解決ができました。
CSSは、<td>ではなく、<span>か<div>に適用させるのが良いみたいですね。勉強になりました。m(__)m

通報する

お礼日時：2005/08/04 10:33

No.4

回答者： ao_
回答日時：2005/08/04 07:34

#1です。

デーブルを使う事は間違いではないです。私も状況によっては使います。今回の場合、セル自体にpaddingではなく、セルの中にdivとしても解決できます。徐々に覚えるためにもいいのではないでしょうか。
#3さん凄いですね。勉強になりました。

- 0
- 件

通報する

この回答へのお礼

そうですね、徐々にCSSの部分を増やしてゆきたいので、できるだけ<div>で囲って、組んでゆこうと思っています。
この度は、教えていただきありがとうございました。
大変助かりました。m(__)m

通報する

お礼日時：2005/08/04 10:36

No.2

回答者： OhMabu
回答日時：2005/08/03 20:12

どうしようもないバグですね。

tdにクラス指定をする以上は回避方法が見つからないです。
以下の方法ではどうでしょうか？
<td><span class="padding">文字</span></td>

この回答への補足

実験しましたが、ダメでした。(T.T)
やはり、どうしようも無いのでしょうか…

補足日時：2005/08/03 21:02

通報する

- 0
- 件

通報する

No.1

回答者： ao_
回答日時：2005/08/03 15:50

バグかどうかわかりませんが、以前も同じ質問を見ました。

一応解決策として、tableをdivに置き換えてみたらうまく表示しました。
CSSをお使いになられるならいっそtableレイアウトをやめてみてはどうでしょうか？
以下にソースを付けます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>実験用</title>
<style type="text/css">

</style>
</head>

<body bgcolor="#666666" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div class="padding">ながいながい文章を入力して、CSSのpadding-leftで制御をした場合、左側にしかpaddingの設定をしていないのに、右側にも余白が適用されてしまいます。何故でしょうか？</div>
</div>
</body>
</html>

この回答への補足

なるほど。確かにこの方法なら、レイアウトが崩れることがないです。が…今私は、ドリームウィーバーでホームページを制作しているのですが、テーブルを使わずに、CSSだけで製作するのはちょこっと気が引けます…
難しいと言いますか…　慣れていないと言いますか…
テーブルと、CSSを組み合わせて、使用しようというのが、間違いなのでしょうか？やはり、スペーサーGIFに頼るしかないのでしょうか？

補足日時：2005/08/03 21:03

通報する