469,310 Members | 2,542 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,310 developers. It's quick & easy.

UL border

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?

Jul 21 '05 #1
7 21701
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 vo. O resto imperfeito.
- Renato Russo -
Jul 21 '05 #2
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.
Jul 21 '05 #3
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/
Jul 21 '05 #4
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
Jul 21 '05 #5
>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.
Jul 21 '05 #6
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Madness - The Sun and the Rain
Jul 21 '05 #7
>>Replace 'float:left' with 'display:inline'

Ah ah! Very good thank you.
Jul 21 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

33 posts views Thread by Thomas Mlynarczyk | last post: by
7 posts views Thread by Bob Bedford | last post: by
23 posts views Thread by Bob Bedford | last post: by
31 posts views Thread by jcrouse | last post: by
3 posts views Thread by Alex Maghen | last post: by
16 posts views Thread by FuzzyLogik | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
1 post views Thread by Geralt96 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.