PHWinfo - Afficher un message - CSS text-indent not working

02/03/2008, 21h14

On 2008-03-02, removeps-groups@yahoo.com <removeps-groups@yahoo.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 ful.

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

02/03/2008, 21h14	#2
Ben C Messages: n/a Hébergeur:	Re: CSS text-indent not working On 2008-03-02, removeps-groups@yahoo.com <removeps-groups@yahoo.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 ful. > 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.