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:left;">item 1</LI>
<LI STYLE="border: 1px solid #00F000;float:left;">item 2</LI>
<LI STYLE="border: 1px solid #00F000;float:left;">item 3</LI>
</UL>

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

[Els]

Claude Schneegans wrote:

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:left;">item 1</LI>
<LI STYLE="border: 1px solid #00F000;float:left;">item 2</LI>
<LI STYLE="border: 1px solid #00F000;float:left;">item 3</LI>
</UL>

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

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]

Hi,

You asked this already before I think?
I did, but I didn't get my own message, so I was not sure.
yes, it's normal, but I'm not Doc

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]

Claude Schneegans wrote:

Hi,

You asked this already before I think?
I did, but I didn't get my own message, so I was not sure.
yes, it's normal, but I'm not Doc

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.

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]

Claude Schneegans <sc********@internetique.com> wrote:

Ok, let's say it is, but how come it is ?

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#floats>

--
Alexander

[Claude Schneegans]

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

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]

Claude Schneegans wrote:

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.

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]

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

Ah ah! Very good thank you.