IEとFireFoxの表示の違いで悩んでます！

締切済

質問者：eak
質問日時：2006/10/15 11:03
回答数：2件

クライアントからの要望で主にCSSを使ってコーディングをしております。

下記のコードでひとつの記事が
<div class="line_dot"></div>でラインで区切られ下に続いていくようにしているのですが、

<div class="math_newsMerchant">
<div class="icon_newsMerchant">
<table width="100%" border="0" cellpadding="0" cellspacing="3">
<tr><td><img src="img/icon1.gif" /></td></tr>
<tr><td><img src="img/icon2.gif" /></td></tr>
</table>
</div>
<div class="txt_newsMerchant">
<p><a href="#">ID:1988 Pointcageモバイル (2006/9/27)</a></p>
<p>ポイント還元率は日本最大級！Point cafeモバイル誕生</p>
</div>
<a href="#" class="btn_merchant">提携先はこちら</a>
<div style="clear:both;"></div>
</div>

<div class="line_dot"></div>

<div class="math_newsMerchant">
<div class="icon_newsMerchant">
<table width="100%" border="0" cellpadding="0" cellspacing="3">
・
・
・
・
・
・

floatを使ってるため、math_newsMerchantでくくられている各センテンスの最後に<div style="clear:both;"></div>をいれております。

これが問題で、IEだとこのdivタグを入れると勝手に空白をつくってしまします。
FireFoxは正常に表示するのですが。

divじゃなくてimgタグでそのまま表示しても同じです。

divとimgの余白をなくす方法をどなたか知りませんでしょうか？

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： matchasoft
回答日時：2006/10/16 11:41

floatをキャンセルするためにclearしているそうですが、これはline_dotの部分ですべきではないでしょうか。

それから、IEでは文書型宣言(!DOCTYPE宣言)によって後方互換モードと標準準拠モードの２種類の動作を行います。
文書型宣言なしでは後方互換モードとなり、Firefoxと違った動きになってしまいます。
文書型宣言を行って標準準拠モードにすれば、かなり近い動きになると思います。

参考URL：http://ameblo.jp/matchasoft/entry-10018174908.html

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！
非常に参考になりました。
今回は納期の問題上、テーブルを使って回避してしまいました・・。

通報する

お礼日時：2006/10/18 12:08

No.1

回答者： gryfinndors
回答日時：2006/10/15 12:10

文書型宣言をしてますか。

ＩＥはマージンとか余白がでたらめなので、宣言してあわせます。
ＰＬＵＧＩＮを使わないならＦＩＲＥＦＯＸの方を標準にして作った方がいい。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
にしてました。
特に意味もわからずに・・

matchasoftさんにも教えていただいた参考ページを見て今後は気をつけたいと思います。
ありがとうごいました！

通報する

お礼日時：2006/10/18 12:11

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！