PDA

Click to See Complete Forum and Search --> : Text-indent solves my problem, but why?

upand_at_them
11-02-2007, 01:33 PM
I created a tree list a while ago and finally found out how to fix a wrap-around problem based on an example from ALA's website where a negative 'text-indent' prevents the text from wrapping to underneath the list bullet (or, in my case, a checkbox).

But I don't understand why it works. It seems to me that the text would still wrap underneath the bullet (checkbox), because 'text-indent' only applies to the first line. (In my example I'm using DIV, not ULs and LIs, so no list styles are causing it, but I get the same effect.)

before:
* blah blah
blah blah

after:
* blah blah
blah blah

Anyone?

Mike
Fang
11-02-2007, 01:50 PM
Code would be easier to understand, the description is confusing.
upand_at_them
11-02-2007, 01:58 PM
Here's my demo example using ULs and LIs:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<body>

<style type="text/css">
.tree2 { border: 1px solid #000; margin: 2em; width: 10em; padding: 5px; }
.tree2 ul { list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; }
.tree2 li { list-style-image: none; list-style-type: none; }
</style>

<div class="tree2">
<ul>
<li><img src="images/box.gif"/>Item 1</li>
<li><img src="images/box.gif"/>Item 2</li>
<li><img src="images/box.gif"/>Item 3</li>
<li><img src="images/box.gif"/>Item 4</li>
<li><img src="images/box.gif"/>Item 5 we'll make a bit longer so that it will wrap</li>
</ul>
</div>

</body>
</html>
dtm32236
11-02-2007, 01:59 PM
i think he's saying that:

<ul>
<li>blah <br> blah</li>
</ul>

would produce this:
* blah
blah

while this:

<ul>
<li style="text-indent:-1px;">blah <br> blah</li>
</ul>

will produce
* blah
blah

he's asking why this is...

edit: he beat me to it.
upand_at_them
11-02-2007, 02:05 PM
Actually, 'text-indent' is being applied to the UL, which further confuses me about why it works. I just don't see any reason why it should work.

Mike
upand_at_them
11-02-2007, 02:41 PM
Nevermind, I must be stupid. I see why it works.
Fang
11-02-2007, 02:45 PM
The confusion is the way different browsers display lists and their default paddings, margins and list-style-type.
This simple case div shows how the text-indent works:<div style="border:1px solid red; text-indent:-1em; width:5em;">Item 5 we'll make a bit longer so that it will wrap</div>
The first line is indented as expected, lists on the other hand have default paddings, margins and list-style-type which are browser dependent.
upand_at_them
11-02-2007, 03:09 PM
What I didn't realize is that the negative indent is pulling it outside of its container. As for why it works when applied to the UL, I guess all the LIs are considered separate "paragraphs" and negative indents each one.
Fang
11-03-2007, 03:51 AM
The comparison to "paragraphs" is correct, each block has a text-indent applied to it.