UL border

[Claude Schneegans]

Hi,

In the following code:
<UL STYLE="border: 2px solid #F00000;">
<LI STYLE="border: 1px solid #00F000;">item 1</LI>
<LI STYLE="border: 1px solid #00F000;">item 2</LI>
<LI STYLE="border: 1px solid #00F000;">item 3</LI>
</UL>

The red border clearly surounds the whole list, including the LI
elements, which looks correct to me,
but if I declare the LI elements float:left , they do not appear
included inside the UL border anymore:

<UL STYLE="border: 2px solid #F00000;">
<LI STYLE="border: 1px solid #00F000;float:l eft;">item 1</LI>
<LI STYLE="border: 1px solid #00F000;float:l eft;">item 2</LI>
<LI STYLE="border: 1px solid #00F000;float:l eft;">item 3</LI>
</UL>

This happens in both IE and FireFox.
Is it normal Doc?

[Els]

Re: UL border

Claude Schneegans wrote:
[color=blue]
> Hi,
>
> In the following code:
> <UL STYLE="border: 2px solid #F00000;">
> <LI STYLE="border: 1px solid #00F000;">item 1</LI>
> <LI STYLE="border: 1px solid #00F000;">item 2</LI>
> <LI STYLE="border: 1px solid #00F000;">item 3</LI>
> </UL>
>
> The red border clearly surounds the whole list, including the LI
> elements, which looks correct to me,
> but if I declare the LI elements float:left , they do not appear
> included inside the UL border anymore:
>
> <UL STYLE="border: 2px solid #F00000;">
> <LI STYLE="border: 1px solid #00F000;float:l eft;">item 1</LI>
> <LI STYLE="border: 1px solid #00F000;float:l eft;">item 2</LI>
> <LI STYLE="border: 1px solid #00F000;float:l eft;">item 3</LI>
> </UL>
>
> This happens in both IE and FireFox.
> Is it normal Doc?[/color]

You asked this already before I think?
Anyway - yes, it's normal, but I'm not Doc ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Claude Schneegans]

Re: UL border

Hi,
[color=blue][color=green]
>>You asked this already before I think?[/color][/color]

I did, but I didn't get my own message, so I was not sure.
[color=blue][color=green]
>>yes, it's normal, but I'm not Doc[/color][/color]

Ok, let's say it is, but how come it is ?
I don't see why in the second case the border should not include the content.

[Benjamin Niemann]

Re: UL border

Claude Schneegans wrote:
[color=blue]
> Hi,
>[color=green][color=darkred]
>>>You asked this already before I think?[/color][/color]
>
> I did, but I didn't get my own message, so I was not sure.
>[color=green][color=darkred]
>>>yes, it's normal, but I'm not Doc[/color][/color]
>
> Ok, let's say it is, but how come it is ?
> I don't see why in the second case the border should not include the
> content.[/color]
Floated boxes are not included as 'box content' when the height of <ul> is
calculated - unless there is an element with 'clear: both' in the <ul> and
after all floats that is pushed below the floats and forces the <ul> bottom
edge further down.
This is not specific to <ul>s/<li>s.
You might try 'overflow: auto' on the <ul>.

--
Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://www.odahoda.de/

[Alexander Clauss]

Re: UL border

Claude Schneegans <schneegans@int ernetique.com> wrote:
[color=blue]
> Ok, let's say it is, but how come it is ?[/color]

Because you declared the LI elements as "float" and "floats" are no
ordinary blocks. "Floats" are removed from the normal flow, so nothing
(that is treated as "normal flow") is left inside the UL element.

For more information, please read the section about "floats" in the CSS
specification: <http://www.w3.org/TR/REC-CSS2/visuren.html#fl oats>

--
Alexander

[Claude Schneegans]

Re: UL border

>Because you declared the LI elements as "float" and "floats" are no
[color=blue]
>ordinary blocks. "Floats" are removed from the normal flow, so nothing
>(that is treated as "normal flow") is left inside the UL element.[/color]

Ah ok, thanks.
All what I want is having the LI elements side by side on the same line.
Is there another way to get the same result and still have them inside the UL.

I got around the problem temporarilly by giving a height to the UL, but I'd rather have this height automatic.

[Els]

Re: UL border

Claude Schneegans wrote:
[color=blue]
> All what I want is having the LI elements side by side on the same line.
> Is there another way to get the same result and still have them inside the UL.[/color]

Replace 'float:left' with 'display:inline ' (and 'text-align:left' if
necessary).

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Madness - The Sun and the Rain

[Claude Schneegans]

Re: UL border

>>Replace 'float:left' with 'display:inline '

Ah ah! Very good thank you.