I noticed an irritating behaviour of the text-indent property and I
wonder if I'm the only one to feel this way about it: it seems that
text-indent applies even to floated elements. Although this is probably
correct according to the specification (text-indent is inherited), don't
you think it makes no sense to apply text-indent to such elements ?

Here is an example: I have a paragraph, starting with a clickable image,
that's followed by text, so basically:

<p><a href=""><img src="" width="110" height="110"></a>aaa bbb ccc</p>

I want the image to be floated, and the text of the paragraph should
flow around it with the firt line being indented. I have the following CSS:

a { float: left ; border: 1px solid green ; }
img { vertical-align: bottom ; }
p { text-indent: 1em ; }

The green border around the A element shows that there is some space
between the left edge of the A and the left edge of the image and this
space comes from the text-indent set on the P...which is not indented.

I would have expected that, A being floated and out of the normal flow,
the text-indent wouldn't apply to it but rather to the rest of the text.
Am I asking for something stupid ?

By the way, the problem is half as bad when removing the A element and
directly floating the IMG: neither the IMG, nor the P are indented...

--
to email me, add "poinot" before the at-sign in my
address and wanadoo after it...

[color=blue]
> <p><a href=""><img src="" width="110" height="110"></a>aaa bbb ccc</p>
>
> I want the image to be floated, and the text of the paragraph should
> flow around it with the firt line being indented. I have the following[/color]
CSS:[color=blue]
>
> a { float: left ; border: 1px solid green ; }
> img { vertical-align: bottom ; }
> p { text-indent: 1em ; }[/color]



After a little playing, I got this:


body {width : 300px;}
div.image_indent img {float : left; margin : 10px;}
div.image_indent p {text-indent : 1em; text-align : justify; margin : 0;}


<div class="image_indent">
<a href=""><img src="" width="110" height="110"></a>
<p>this is a whole bunch of random text. this is a whole bunch of random
text. (etc etc etc)</p>
</div>

Which does just what you require. (The body width is just to demonstrate
that it works)

HTH.

P.