floatを利用して、画像を右か左に寄せたとき、ネットエスケープ7.1でインデント2emが反映されない。(IE6は、OK)

同じく背景を画像に合わせて付けたいのですが、何かいい方法はありませんか。

2つの疑問についてお願いいたします。

<HTML>
<HEAD>
<TITLE>無題ドキュメント</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<STYLE type="text/css">
<!--
p { background-color: #99CC00;
  text-indent: 2em;
  font-size: 12px}
img { float: right}
-->
</STYLE>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">
<p><IMG src="test.jpg" width="100" height="75">floatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについて</p>
</BODY>
</HTML>

A 回答 (3件)

indentに関しては#2の方と同じ意見です。

但し、どちらの解釈が正しいかはちゃんと調べていません。(そもそも文書型宣言がないので、どちらが正しいも何もないのですが。。)

解決策ですが、下記のようにするとどうでしょうか。
<HTML>
<HEAD>
<TITLE>無題ドキュメント</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css; charset=Shift_JIS" />
<STYLE type="text/css">
<!--
p { background-color: #99CC00; text-indent: 2em; font-size: 12px; }
img { float: right; }
-->
</STYLE>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">
<IMG src="test.jpg" width="100" height="75">
<p>floatとtext-indentについてfloatとtext-indentについてfloatとtext- indentについてfloatとtext-indentについてfloatとtext-indentについて</p>
</BODY>
</HTML>

もうちょっと綺麗にするなら下記のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ja">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css; charset=Shift_JIS">
<TITLE>無題ドキュメント</TITLE>
<STYLE type="text/css">
<!--
body { background-color:#FFFFFF; color:#000000; }
p { background-color: #99CC00; text-indent: 2em; font-size: 12px; }
img { float: right; }
-->
</STYLE>
</HEAD>

<BODY>
<IMG src="test.jpg" width="100" height="75" alt="test image">
<p>floatとtext-indentについてfloatとtext-indentについてfloatとtext- indentについてfloatとtext-indentについてfloatとtext-indentについて</p>
</BODY>
</HTML>

>同じく背景を画像に合わせて付けたい
これについては、ちょっとどうしたいのかわかりませんのでまた別の機会に。
    • good
    • 0
この回答へのお礼

ありがとうございます。
さっそく、試してみました。ちゃんと反映されてました。
これで、少しは先に進めそうです。

お礼日時:2005/07/04 19:05

回答ではないのですが、画像を回り込みさせて、インデントが反映されないのは、正しい動作だと思います。


IEが、勘違いしているのだと思います。

ブロック要素(ここではp要素)の最初に画像を書いていると、インデントは、画像に反映されるはずです。
それで、インデントが反映された画像を右側に回りこみさせているので、画像の後に書かれている文章には、インデントは適用されないと思われます。

それと、失礼ですが、img要素に必須のalt属性が抜けてます。今回うっかり忘れてしまったのならかまいませんが、普段から付け忘れているのなら、つける習慣をつけたほうがいいと思います。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。

ブロック要素の意味もあまり考えず、タグを打っていたけど、改めて考えさせられました。

お礼日時:2005/07/04 18:57

おはようございます、potan です。


不思議ですね・・ potan もどうにかfloatをつかってやってみようとしたんですが、撃沈でした。。
変わりにtableをつかったソースを書いてみました。表示上では上記ソースとほぼ変わりないはずです。(Win版IE6.02とN7.1で動作確認済み)
少しでもお役に立てれば幸いです。(^ ^)

<HTML>
<HEAD>
<TITLE>無題ドキュメント</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<STYLE type="text/css">
<!--
table{background-color: #99CC00;}
td.text
{  text-indent: 2em;
  font-size: 12px;
vertical-align:top;}
-->
</STYLE>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text" style="text-indent: 2em;">
floatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについて<br>
</td>
<td width="100">
<IMG src="test.jpg" width="100" height="75" border="0"><br>
</td>
</tr>
</table>
</BODY>
</HTML>
    • good
    • 0
この回答へのお礼

ありがとうございます。
一人でもくもくと悩んでいたのですごく助かります。

お礼日時:2005/07/04 18:49

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

今、見られている記事はコレ!

おしトピ編集部からのゆる~い質問を出題中

お題をもっとみる

このQ&Aを見た人が検索しているワード


このカテゴリの人気Q&Aランキング

おすすめ情報

カテゴリ