Re: CSS text-indent not working

On 2008-03-02, removeps-groups (AT) yahoo (DOT) com <removeps-groups (AT) yahoo (DOT) com> wrote:

Hi. I have a web page which has a left panel and right panel. In the
left panel is just several lines of text. In the right panel I want a
line of text, and then bulleted indented text.

Normally for a line of text and then bulleted indented text you do:

p>Paragraph</p
ul
li>Item1</li
li>Item2</li
/ul

But when there is a left [floated] panel, then the above puts "Paragraph",
"Item1", "Item2" right below one another.

Yes, this is correct according to the spec.

The <li>s are list-item boxes, which are basically block boxes, and
their left edges are therefore right over on the left, behind the
floated panel on the left.

The spec doesn't define exactly where the bullet should go, but it does
say "outside the principal block box".

But the position to the right of the float where you would expect the
bullets to be is unfortunately inside the principal block box it's
talking about. So for browsers to move outside list item markers to the
right of floats is actually wrong.

The easiest fix in this case, since you know the width of the float, is
just:

ul { margin-left: 6em; padding-left: 40px }

Appendix D of CSS 2.1 suggests margin-left: 40px for ul, although
Firefox uses padding by default. But here we want 40px + 6em, which we
can achieve by making one of them margin and the other padding.

I should think that might even work in IE.

You could also try list-style-position: inside, which makes the bullet
an inline box, meaning it goes to the right of the float (that's what
inline boxes, but not what block boxes usually, do).

There is another trick which is to make the ul overflow: hidden. That
means that although it is still a block box, its left edge moves to the
right of the float because it has become a block formatting context. It
brings with it its 40px default left margin (or padding in Firefox) and
the <li>s inside it.

These last two fixes I would guess are less likely to work in IE but you
don't really need them since you know the width of the float.

In Firefox and Dreamweaver, the bullet point is to the left of "Item1"
and "Item2", inside the left panel!

That is the correct place even if it's not very helpful.

In Internet Explorer (IE), the bullet point does not even show.

It's probably in the same position, but behind the float. Give the float
background: transparent and you may see the bullets.

On Mar 2, 1:14 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

The easiest fix in this case, since you know the width of the float, is
just:

ul { margin-left: 6em; padding-left: 40px }

Appendix D of CSS 2.1 suggests margin-left: 40px for ul, although
Firefox uses padding by default. But here we want 40px + 6em, which we
can achieve by making one of them margin and the other padding.

Thanks, this works in all 3 browsers -- Firefox, IE, Dreamweaver.

It's interesting that "margin-left: 6em" means from the left of the
page. I would have thought it meant 6em from the right boundary of
the left panel. But I guess this way to allow you to put stuff on top
of each other!

I should think that might even work in IE.

It does.

You could also try list-style-position: inside, which makes the bullet
an inline box, meaning it goes to the right of the float (that's what
inline boxes, but not what block boxes usually, do).

The above not work in any browser. That is, I did

#page ul {
display: inline;
}

In Dreamweaver and Firefox, this "Paragraph" and "Item1" and "Item2"
are all directly below each other, and the bullet point is inside the
left panel. In IE, the "Item1" is indented from its bullet point for
some reason.

I also tried inline-block, run-in, list-item, and hidden -- but none
of them work for any browsers.

In Internet Explorer (IE), the bullet point does not even show.

It's probably in the same position, but behind the float. Give the float
background: transparent and you may see the bullets.

Yes, this is right. The bullet shows up in the left panel.

removeps-groups (AT) yahoo (DOT) com wrote:

On Mar 2, 1:14 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

[combining padding and margin, px and em]

Thanks, this works in all 3 browsers -- Firefox, IE, Dreamweaver.

Wow. Had to doublecheck: Dreamweaver seems to be using Presto, thus
Opera's engine. I would still be reluctant to call Dreamweaver a browser
though.

- Daniel

removeps-groups (AT) yahoo (DOT) com wrote:

On Mar 2, 1:14 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

The easiest fix in this case, since you know the width of the float, is
just:

ul { margin-left: 6em; padding-left: 40px }

Appendix D of CSS 2.1 suggests margin-left: 40px for ul, although
Firefox uses padding by default. But here we want 40px + 6em, which we
can achieve by making one of them margin and the other padding.

Thanks, this works in all 3 browsers -- Firefox, IE, Dreamweaver.

It's interesting that "margin-left: 6em" means from the left of the
page. I would have thought it meant 6em from the right boundary of
the left panel. But I guess this way to allow you to put stuff on top
of each other!

No, you are seeing how margins collapse when floats are involved.

I should think that might even work in IE.

It does.

You could also try list-style-position: inside, which makes the bullet
an inline box, meaning it goes to the right of the float (that's what
inline boxes, but not what block boxes usually, do).

The above not work in any browser. That is, I did

#page ul {
display: inline;
}

'display: inline' and 'list-style-position: inside' are not the same thing.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On 2008-03-03, Jonathan N. Little <lws4art (AT) central (DOT) net> wrote:

removeps-groups (AT) yahoo (DOT) com wrote:
On Mar 2, 1:14 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

The easiest fix in this case, since you know the width of the float, is
just:

ul { margin-left: 6em; padding-left: 40px }

Appendix D of CSS 2.1 suggests margin-left: 40px for ul, although
Firefox uses padding by default. But here we want 40px + 6em, which we
can achieve by making one of them margin and the other padding.

Thanks, this works in all 3 browsers -- Firefox, IE, Dreamweaver.

It's interesting that "margin-left: 6em" means from the left of the
page. I would have thought it meant 6em from the right boundary of
the left panel. But I guess this way to allow you to put stuff on top
of each other!

No, you are seeing how margins collapse when floats are involved.

This is nothing to do with margin-collapsing (and margin: 6em does not
mean 6em from the left of the page either, it means 6em from the left of
the container).

I tried to explain it to the OP, but I will try again.

A normal block box (in direction: ltr) starts right over at the left of
its container. It starts right over at the left even if there happens to
be a left float over there.

Inline boxes inside it (e.g. text) are moved to the right to get out of
the way of the float.

A list-item is more or less a block box. Its left edge therefore does
not move to the right of the float, but stays where it is, over at the
left.

Here is an illustration:

http://www.tidraso.co.uk/misc/listItemsAndFloats.html

On Mar 3, 12:16 am, Ben C <spams... (AT) spam (DOT) eggs> wrote:

This is nothing to do with margin-collapsing (and margin: 6em does not
mean 6em from the left of the page either, it means 6em from the left of
the container).

Is the container and page the same thing? My initial thought was that
a div is a container, and thus I expected that text-indent: X on the
the right panel means X units to the right of the left edge of the
div.

A normal block box (in direction: ltr) starts right over at the left of
its container. It starts right over at the left even if there happens to
be a left float over there.

Got it.

Inline boxes inside it (e.g. text) are moved to the right to get out of
the way of the float.

I modified your HTML to add the following:

<div style="display: inline">
This div is display: inline. It looks strange in
Firefox.
Need to add more lines, so that the text wraps around
to see
what it looks like.
Need to add more lines, so that the text wraps around
to see
what it looks like.
</div>

The result is that the box is to the right of the left panel, which
makes it very much like <div style="overflow: hidden">. However, each
line has its own box/border around it (so that in-between the two
lines is very thick border), but only the first line has a left border
and only the last line has a right border. All lines have top and
bottom borders.

A list-item is more or less a block box. Its left edge therefore does
not move to the right of the float, but stays where it is, over at the
left.

Got it.

The <div style="overflow: hidden"> was my favorite. Initially I liked
the <div style="margin-left: 300px"> approach as it was clear and
worked on all browsers. However, I ran into a problem with it. My
left panel is only 60ems in height. So in the right panel, if I keep
writing more and more stuff, I want the text to wrap around to below
the left panel. Something like this where L is the left panel and R
is the right panel.

LLLL RRRRR
LLLL RRRRR
LLLL RRRRR
RRRRRRRRRR
RRRRRRRRRR

But with the margin as 300px we don't get the wraparound effect.
Also, in my example I had the margin-left only on the ul, so the
normal text did wrap around, but if in the region below the left float
I had an unordered list, then it would be super-indented as it would
be 14ems from the left of the page, which is fine if there is a left
panel present (as then the ul is only 3ems to the right of the left
panel), but strange looking below.

So I am using <div style="overflow: hidden"> now with text-indent on
the ul.

..thrColElsHdr #container ul {
line-height: 16px;
text-indent: 2em;
}

....

<div id="container" style="overflow: hidden">

On 2008-03-08, removeps-groups (AT) yahoo (DOT) com <removeps-groups (AT) yahoo (DOT) com> wrote:

On Mar 3, 12:16 am, Ben C <spams... (AT) spam (DOT) eggs> wrote:

This is nothing to do with margin-collapsing (and margin: 6em does not
mean 6em from the left of the page either, it means 6em from the left of
the container).

Is the container and page the same thing? My initial thought was that
a div is a container, and thus I expected that text-indent: X on the
the right panel means X units to the right of the left edge of the
div.

A div is a container. Margin-left offsets from the left content edge of
the container (the "content edge" just means inside the margin, border
and padding of the container).

Text-indent offsets text from the left of the line box (if direction is
ltr). The line box's left edge is usually in the same place as the
container's left content edge, but not if there's a float there-- the
line box's left edge moves to the right of the float, but the
container's left edge stays where it is.

This means that if you have a float pushing text to the right, and then
text-indent as well, that pushes the text even further to the right.

But a block's left edge doesn't (usually) get pushed to the right by
floats, and margin-left on a block always offsets it from the left of
its container.

A normal block box (in direction: ltr) starts right over at the left of
its container. It starts right over at the left even if there happens to
be a left float over there.

Got it.

Inline boxes inside it (e.g. text) are moved to the right to get out of
the way of the float.

I modified your HTML to add the following:

div style="display: inline"
This div is display: inline. It looks strange in
Firefox.
Need to add more lines, so that the text wraps around
to see
what it looks like.
Need to add more lines, so that the text wraps around
to see
what it looks like.
/div

The result is that the box is to the right of the left panel, which
makes it very much like <div style="overflow: hidden">. However, each
line has its own box/border around it (so that in-between the two
lines is very thick border), but only the first line has a left border
and only the last line has a right border. All lines have top and
bottom borders.

Yup, that's inline boxes. An inline-block would help you out here, but
you'll have to wait for Firefox 3.

A list-item is more or less a block box. Its left edge therefore does
not move to the right of the float, but stays where it is, over at the
left.

Got it.

The <div style="overflow: hidden"> was my favorite. Initially I liked
the <div style="margin-left: 300px"> approach as it was clear and
worked on all browsers. However, I ran into a problem with it. My
left panel is only 60ems in height. So in the right panel, if I keep
writing more and more stuff, I want the text to wrap around to below
the left panel. Something like this where L is the left panel and R
is the right panel.

LLLL RRRRR
LLLL RRRRR
LLLL RRRRR
RRRRRRRRRR
RRRRRRRRRR

But with the margin as 300px we don't get the wraparound effect.

Nor do you with the overflow: hidden technique-- it's just the same. The
only difference is that with margin-left: 300px you need to know it's
300px.

To push the bullets to the right _and_ have everything flow underneath
the float properly, you really need to go to list-style-position: inside.

Although it sounds like you've managed to work something out.

Also, in my example I had the margin-left only on the ul, so the
normal text did wrap around, but if in the region below the left float
I had an unordered list, then it would be super-indented as it would
be 14ems from the left of the page, which is fine if there is a left
panel present (as then the ul is only 3ems to the right of the left
panel), but strange looking below.

So I am using <div style="overflow: hidden"> now with text-indent on
the ul.

.thrColElsHdr #container ul {
line-height: 16px;
text-indent: 2em;
}

...

div id="container" style="overflow: hidden"