解決済
Ads By Google
「text-indent:;」がGeckoで効きません。
livedoorブログ無料版を使わせていただいております。記事の投稿に際して段落の始めにインデントを設けたくて下記のように記述しています。
<div class="main"> <p class="in1"><a href=""><img src="" width="161" height="107" border="0" alt="‥‥" hspace="5" class="pict" align="left" /></a>文章‥‥‥‥</p> </div>
関係しそうな部分のCSSを下に記します：
.main{
width: 100%; /* 親ボックスは width:26em; */
color: #222222;
font-size: .8em;
text-align: left;
line-height: 140%;
padding: 0 0 0 .2em;
overflow: hidden;
}
.in1 {
clear: both;
width: 100%;
text-indent: 1.05em;
text-align: left;
padding: .7em 0 .7em 0;
margin: 0 0 0 0;
}
.pict{
border: inset .078em #dddddd;
width: 12.48em;
height: 8.346em;
margin: .5em .7em 0 0;
float: right !important;
}
これで意図したとおりに表示されます。ところが、imgタグをaタグで挟まない場合に、全て試した訳ではありませんが、一部のブラウザで閲覧するとインデントが設けられていないのです。
Firefox,Netscape,Mozilla,SeaMonkeyのGecko系でこの問題が発生しています。なぜこのような事になるのか知りたくて質問させていただきました。宣しくお願いいたします。
2007-12-02 03:30の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。
回答(2)
2.
2007-12-03 00:57:09
その後ちょっと調べてみました。
text-indent は、first-line に適用されるから。
例えば、
<div style="text-indent:10em">
<p>test<img src="image.jpg" ... align="left" />text</p>
</div>
なんてやってみれば良く判る様な気がします。
align 指定を無くせば、画像ごと(test：前置き文字がなくても)インデントされます。
リンク指定はとりあえずこの現象とは直接関係ない様です。
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#alignmentの「オブジェクトの浮動」の説明の処
浮動オブジェクトは、一般に、新しい行を開始する。つまりこれが理由だと思われます。
text-indent は、first-line に適用されるから。
例えば、
<div style="text-indent:10em">
<p>test<img src="image.jpg" ... align="left" />text</p>
</div>
なんてやってみれば良く判る様な気がします。
align 指定を無くせば、画像ごと(test：前置き文字がなくても)インデントされます。
リンク指定はとりあえずこの現象とは直接関係ない様です。
自信度 : 自信なし 回答レベル : 回答
お世話になりまして有難うございました。
お蔭様で解決できました。
私の場合は、要素そのものが何であるか?とか、それに付ける属性がそれでよいのか?など勉強と今の状態の洗い出しが必要なようです。
1.
2007-12-02 14:23:39
IEでは、P要素はブロックとして処理されますが、P要素はインラインエレメントです。
text-indent は、ブロックレベル要素への適用指示(言葉が正しくないかもしれません)です。
おそらくそれで思うような動作をしないのではないでしょうか。
実際には検証していませんけど、ｐ要素をｄｉｖで囲ってｄｉｖに適用してみてはどうでしょうか
text-indent は、ブロックレベル要素への適用指示(言葉が正しくないかもしれません)です。
おそらくそれで思うような動作をしないのではないでしょうか。
実際には検証していませんけど、ｐ要素をｄｉｖで囲ってｄｉｖに適用してみてはどうでしょうか
自信度 : 自信なし 回答レベル : アドバイス
Ads By Google
コメント(4)
#1. コチビ
2007-12-02 15:36:43
>>1
お世話になります、有難うございます。
＞P要素はインラインエレメントです。
存じませんでした。勉強になりました。
現状のプロパティ指定のままで、
1)p要素を囲ったdivへプロパティを移動。
2)text-indentのみp要素に残し、他は囲ったdivへ移動。
3)divで囲わず現状のp要素にdisplay:block;を追加。
など、試しましたが改善が見られませんでした。
文中にフロートさせて挿入した画像からのリンク設定を外すと問題が起きるというのが解せません。<emoji:feel_down>
#2. BLUEPIXY
2007-12-03 01:07:46
ちなみにということで、じゃあどうすればいいかというと、
<div style="text-indent:10em">
<img/><p>text</p>
</div>
とするか
<div style="text-indent:10em">
<p><img/><p>text</p></p>
</div>
なんてすればいいんじゃないかと。
#3. コチビ
2007-12-03 06:55:58
>>2,>>#2
詳しく調べて下さって有難うございました。
実は、その後自分でもいろいろ記述を変えてみたりしていましたのですが、整理がつかず頭が混乱して、半分あきらめておりました。
後ほど試してみてご報告に上がります。
御紹介いただきましたWEBページのサイトは初めて知りました。今後、最初からじっくり読ませていただきます。
#4. コチビ
2008-09-06 05:18:48
報告が遅くなりました。
一記事を段落群で形成する場合もありますので、結局、下記のようにすることにしました。
<div class="in1"> <img /><p>テキスト</p> <p class="in1">テキスト</p> <p class="in1">テキスト</p> ..... </div>
