CSS text-indent not working

02/03/2008, 20h18

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 panel, then the above puts "Paragraph",
"Item1", "Item2" right below one another. In Firefox and Dreamweaver,
the bullet point is to the left of "Item1" and "Item2", inside the
left panel! In Internet Explorer (IE), the bullet point does not even
show. The full code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<div id="page">
<div id="leftpanel">
<p>Left 1</p>
<p>Left 2</p>
<p>Left 3</p>
<p>Left 4</p>
<p>Left 5</p>
<p>Left 6</p>
<p>Left 7</p>
<p>Left 8</p>
<p>Left 9</p>
<p>Left 10</p>
</div>
<p>Paragraph</p>
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</div>
</body>
</html>

So then what I tried to do was to add a CSS rule for "ul" or "#page
ul" with text-indent as 3em.

The HTML code is

#page ul {
text-indent: 3em;
}

Now in Dreamweaver and IE the text shows up as I want, with
"Paragraph" and indented "Item1" and "Item2" below it, and the bullet
point is indented too. The page looks like this -- the correct way,
or what I want:

LLLL Paragraph
LLLL - Item1
LLLL - Item 2

But Firefox shows the page differently. The bullet point is in the
left panel (that is, inside the "LLLL" above), just as it was before I
created the ul rule. The effect of text-indent is to increase the
space between the bullet and "Item1" or "Item2". In other words the
page looks like this -- the incorrect way, or not what I want:

LLLL Paragraph
LL-L Item1
LL-L Item 2

The same holds even if I put the text-indent into a rule for "#page
li".

If instead of text-ident I use margin-left, like so

#page ul {
margin-left: 6em;
}

Then the page looks just like the correct way, and is what I want, in
Dreamweaver and Firefox.

But in IE, the bullet point does not even show up, and "Paragraph" and
"Item1" and "Item2" are one below the other.

So the question is how to make this work in all of Firefox,
Dreamweaver, IE. I got a feeling that text-indent is not working in
Firefox, and also that margin-left is not working in IE.

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.

03/03/2008, 00h42

On Mar 2, 1:14 pm, Ben C <spams...@spam.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.

03/03/2008, 02h09

removeps-groups@yahoo.com wrote:
> On Mar 2, 1:14 pm, Ben C <spams...@spam.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

03/03/2008, 02h29

removeps-groups@yahoo.com wrote:
> On Mar 2, 1:14 pm, Ben C <spams...@spam.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

03/03/2008, 08h16

On 2008-03-03, Jonathan N. Little <lws4art@central.net> wrote:
> removeps-groups@yahoo.com wrote:
>> On Mar 2, 1:14 pm, Ben C <spams...@spam.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

03/03/2008, 15h46

On Sun, 2 Mar 2008, removeps-groups@yahoo.com wrote:

> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> <style type="text/css">
> <!--

On one hand, you write XHTML 1.0.

On the other hand, you write a pseudocomment that might have been
necessary for Netscape 2.

Could you explain why?

Have a look at
http://www.w3.org/TR/xhtml1/#h-4.8
http://www.w3.org/TR/xhtml1/#C_4

--
In memoriam Alan J. Flavell
http://groups.google.com/groups/sear...Alan.J.Flavell

08/03/2008, 17h29

On Mar 3, 12:16 am, Ben C <spams...@spam.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">

08/03/2008, 20h32

On 2008-03-08, removeps-groups@yahoo.com <removeps-groups@yahoo.com> wrote:
> On Mar 3, 12:16 am, Ben C <spams...@spam.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 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">

02/03/2008, 20h18	#1
removeps-groups@yahoo.com Messages: n/a Hébergeur:	CSS text-indent not working 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 panel, then the above puts "Paragraph", "Item1", "Item2" right below one another. In Firefox and Dreamweaver, the bullet point is to the left of "Item1" and "Item2", inside the left panel! In Internet Explorer (IE), the bullet point does not even show. The full code is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #leftpanel { float: left; background-color: #FFCCCC; width: 6em; } --> </style> </head> <body> <div id="page"> <div id="leftpanel"> <p>Left 1</p> <p>Left 2</p> <p>Left 3</p> <p>Left 4</p> <p>Left 5</p> <p>Left 6</p> <p>Left 7</p> <p>Left 8</p> <p>Left 9</p> <p>Left 10</p> </div> <p>Paragraph</p> <ul> <li>Item1</li> <li>Item2</li> </ul> </div> </body> </html> So then what I tried to do was to add a CSS rule for "ul" or "#page ul" with text-indent as 3em. The HTML code is #page ul { text-indent: 3em; } Now in Dreamweaver and IE the text shows up as I want, with "Paragraph" and indented "Item1" and "Item2" below it, and the bullet point is indented too. The page looks like this -- the correct way, or what I want: LLLL Paragraph LLLL - Item1 LLLL - Item 2 But Firefox shows the page differently. The bullet point is in the left panel (that is, inside the "LLLL" above), just as it was before I created the ul rule. The effect of text-indent is to increase the space between the bullet and "Item1" or "Item2". In other words the page looks like this -- the incorrect way, or not what I want: LLLL Paragraph LL-L Item1 LL-L Item 2 The same holds even if I put the text-indent into a rule for "#page li". If instead of text-ident I use margin-left, like so #page ul { margin-left: 6em; } Then the page looks just like the correct way, and is what I want, in Dreamweaver and Firefox. But in IE, the bullet point does not even show up, and "Paragraph" and "Item1" and "Item2" are one below the other. So the question is how to make this work in all of Firefox, Dreamweaver, IE. I got a feeling that text-indent is not working in Firefox, and also that margin-left is not working in IE.

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.

03/03/2008, 00h42	#3
removeps-groups@yahoo.com Messages: n/a Hébergeur:	Re: CSS text-indent not working On Mar 2, 1:14 pm, Ben C <spams...@spam.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.

03/03/2008, 02h09	#4
Daniel Jung Messages: n/a Hébergeur:	Re: CSS text-indent not working removeps-groups@yahoo.com wrote: > On Mar 2, 1:14 pm, Ben C <spams...@spam.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

03/03/2008, 02h29	#5
Jonathan N. Little Messages: n/a Hébergeur:	Re: CSS text-indent not working removeps-groups@yahoo.com wrote: > On Mar 2, 1:14 pm, Ben C <spams...@spam.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

03/03/2008, 08h16	#6
Ben C Messages: n/a Hébergeur:	Re: CSS text-indent not working On 2008-03-03, Jonathan N. Little <lws4art@central.net> wrote: > removeps-groups@yahoo.com wrote: >> On Mar 2, 1:14 pm, Ben C <spams...@spam.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

03/03/2008, 15h46	#7
Andreas Prilop Messages: n/a Hébergeur:	Re: CSS text-indent not working On Sun, 2 Mar 2008, removeps-groups@yahoo.com wrote: > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <style type="text/css"> > <!-- On one hand, you write XHTML 1.0. On the other hand, you write a pseudocomment that might have been necessary for Netscape 2. Could you explain why? Have a look at http://www.w3.org/TR/xhtml1/#h-4.8 http://www.w3.org/TR/xhtml1/#C_4 -- In memoriam Alan J. Flavell http://groups.google.com/groups/sear...Alan.J.Flavell

08/03/2008, 17h29	#8
removeps-groups@yahoo.com Messages: n/a Hébergeur:	Re: CSS text-indent not working On Mar 3, 12:16 am, Ben C <spams...@spam.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">

08/03/2008, 20h32	#9
Ben C Messages: n/a Hébergeur:	Re: CSS text-indent not working On 2008-03-08, removeps-groups@yahoo.com <removeps-groups@yahoo.com> wrote: > On Mar 3, 12:16 am, Ben C <spams...@spam.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 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">

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email