IE and Lists

liunx · Jan 11, 2008

My goal is to have a list display in columns. My current test page, which is very basic, displays correctly in IE and Opera. However, it doesn't display properly in NS and Moz.

I've included the page (very basic). BTW, the colors were just to see the delimitation of the elements on the page

Is it even possible to have lists display in a specified number of columns?

<html>
<head>
<style type="text/css">
ul {
list-style-type: disc;
width: 100%;
background: pink;
}
li {
background: green;
display: inline;
width: 48%;
}
</style>
</head>
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</body></html>not unless you

a) break the list into three, float one left, one right, and leave one in the middle

b) add a class to each li - left, right, center, and then float as above.Hi there DanDigiMan,

This seems to work OK in IE6, Opera7 and FireBird0.7<html>
<head>
<style type="text/css">
ul
{
width:100%
}
li
{
float:left;;
width: 19%;
}
</style>
</head>
<body>
<ul>
<li>one</li>
<li>two</li><li>three</li><li>four</li>
<li>five</li><li>six</li><li>seven</li>
<li>eight</li><li>nine</li><li>ten</li>
<li>eleven</li><li>twelve</li><li>thirteen</li>
<li>fourteen</li><li>fifteen</li><li>sixteen</li>
<li>seventeen</li><li>eighteen</li><li>nineteen</li>
<li>twenty</li>
</ul>
</body>
</html>

c

theadwhat happens if the text causes a line break?....Well in that case it can be done like this...
<html>
<head>
<style type="text/css">
div
{
float:left;
width:20%;
}
</style>
</head>
<body>
<div>
<ul>
<li>one<br />this has a<br />LINE BREAK</li>
<li>two<br />this has a<br />LINE BREAK</li>
<li>three<br />this has a<br />LINE BREAK</li>
<li>four <br />this has a<br />LINE BREAK</li>
<li>five<br />this has a<br />LINE BREAK</li>
</ul>
</div>
<div>
<ul>
<li>six<br />this has a<br />LINE BREAK</li>
<li>seven<br />this has a<br />LINE BREAK</li>
<li>eight<br />this has a<br />LINE BREAK</li>
<li>nine<br />this has a<br />LINE BREAK</li>
<li>ten<br />this has a<br />LINE BREAK</li>
</ul>
</div><div>
<ul>
<li>eleven<br />this has a<br />LINE BREAK</li>
<li>twelve<br />this has a<br />LINE BREAK</li>
<li>thirteen<br />this has a<br />LINE BREAK</li>
<li>fourteen<br />this has a<br />LINE BREAK</li>
<li>fifteen<br />this has a<br />LINE BREAK</li>
</ul>
</div>
<div>
<ul>
<li>sixteen<br />this has a<br />LINE BREAK</li>
<li>seventeen<br />this has a<br />LINE BREAK</li>
<li>eighteen<br />this has a<br />LINE BREAK</li>
<li>nineteen<br />this has a<br />LINE BREAK</li>
<li>twenty<br />this has a<br />LINE BREAK</li>
</ul>
</div>

</body>
</html>

c

thead

IE and Lists

liunx

Guest