HighDots Forums  

Floating elements and text-indent

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Floating elements and text-indent in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Vincent
 
Posts: n/a

Default Floating elements and text-indent - 10-03-2003 , 04:45 PM






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...


Reply With Quote
  #2  
Old   
The Plankmeister
 
Posts: n/a

Default Re: Floating elements and text-indent - 10-05-2003 , 03:46 PM







Quote:
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 ; }


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.




Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.