473,544 Members | 1,960 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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: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?

Jul 21 '05 #1
7 22032
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: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?


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********@int ernetique.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#fl oats>

--
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

33
27706
by: Thomas Mlynarczyk | last post by:
Hi, I'm looking for a way to put a 1px solid border around the image in this link: <a href="some.html"><img src="some.gif"></a> Well, that, by itself, is simple. However, I would like to have a different border color for a mouse hover effect over the image. With Mozilla, I can simply specify img:hover {...}, but IE allows hover only for...
0
2716
by: yurps | last post by:
Hello here is my html, if you click the missing image in the first column on the left, the div is shown, when clicked again the div disappears...but the bottom border disappears as well...Is there anyway to stop this...??? <HTML> <HEAD> <title>Conform Inbox</title> <meta content="False" name="vs_snapToGrid">
3
1068
by: ireneatngs | last post by:
Hi, I have example html below which contains a couple of hidden divs. However, some of the table borders within these hidden divs are actually displayed when they should not be. In my example, I have comments indicating that if I remove the 'border-collapse' attribute for two of the tables within the hidden divs, my problem is fixed.
7
41720
by: Bob Bedford | last post by:
I've an image in a cell of a table. I've this CSS: ..dbtable{ width: 600px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border-collapse: collapse; border: 1px solid #000000;
23
52092
by: Bob Bedford | last post by:
I've a table. The table must not have any border. The TR (every line) must have a border, but not the lines between cells. The TR.pages must have no border. so .mytable{border:0px;} ..mytable tr{border:1px solid #000000;} ..mytable th{border:0px;}
2
5281
by: Jon | last post by:
Hi all, I am trying to create a page that contains a number of div elements, with links on the left side of the page allowing the user to select which div to display. Some of the pages contain tables with border styles used to block off the columns and the headers, but not the individual rows. The pages will be displayed using IE 5.5 and...
19
4592
by: Eva | last post by:
Hi, I'm really really really new to javascripts and so i couldn't really comprehend thoroughly on the the previous posts regarding this issue. Anyways, I'm setting up a picture album site. When i click on a thumbnail or a picture, a larger picture pops up in a javascript window. But it has a space on the top and on the left of my larger...
31
7159
by: jcrouse | last post by:
Is there a quick and easy way to change the color of a label controls border from the default black to white? Thank you, John
3
4303
by: Alex Maghen | last post by:
I'd like there to be a border around each row of my data-grid but NOT between the columns. I've tried setting BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" ItemStyle-BorderColor="Black" ItemStyle-BorderStyle="Solid" ItemStyle-BorderWidth="1px"
16
3266
by: FuzzyLogik | last post by:
By width, I don't mean weight. I have a row of <li>'s, with a bottom-border. I want the bottom-border to only go 90% of the <li> (centered) Is there any way to do this? I have it in this format: CSS: li {
0
7452
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, well explore What is ONU, What Is Router, ONU & Routers main...
0
7387
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7798
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
7738
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
1
5316
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupr who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
4938
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3436
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1862
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
0
688
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.