Page is a not externally linkable
appi2 - 1:48 pm on Jun 26, 2008 (gmt 0)
It's a lot easier with a single list, which I suppose is the same as your span method. This works in IE 6 7 FF and opera #cloud .lg {font-size:24px;height:27px; #cloud .md{font-size:20px; padding-top:4px;height:23px; #cloud .sm {font-size:16px; padding-top:6px; height:21px; <div id="cloud"> Tried to use list-style-image but IE seems to have problems with it and floats. Not sure if there's a fix.
I had a play with the nested list thang and could understand why you were trying to use it that way, but. It's not going to work (could be wrong). You end up with far more problems. You have to remember that each 2nd 3rd UL is actually contained within a LI. so you end up messing about more. Maybe someone else has an answer.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>List</title>
<style type="text/css">
#cloud {}
#cloud ul { list-style:none;}
#cloud li {
margin:0;
float:left;
padding:0 5px 0 20px;
white-space:nowrap;
border:1px solid #000;
}
/*list-style: inside; list-style-image:url(16x16-red.gif);*/
background:url(16x16-red.gif) no-repeat left;
}
/*list-style: inside;list-style-image:url(16x16-green.gif);*/
background:url(16x16-green.gif) no-repeat left;
}
/*list-style: inside;list-style-image:url(16x16-blue.gif);}*/
background:url(16x16-blue.gif) no-repeat left;
}
</style>
</head>
<body>
<h1> Single List</h1>
<p>Single list, much easier</p>
<ul>
<li class="lg">ONE</li>
<li class="lg">TWO</li>
<li class="md">Two Point One</li>
<li class="md">Two Point Two </li>
<li class="sm">two point two point one</li>
<li class="sm">two point two point two</li>
<li class="sm">two point two point three</li>
<li class="md">Two Point Three</li>
<li class="lg">THREE </li>
<li class="lg">FOUR </li>
<li class="lg">FIVE </li>
<li class="lg">SIX </li>
<li class="md">Six Point One </li>
<li class="md">Six Point Two </li>
<li class="md">Six Point Three </li>
<li class="sm">six point three point one </li>
<li class="sm">six point three point two </li>
<li class="sm">six point three point three </li>
<li class="md">Six Point Four </li>
<li class="lg">SEVEN </li>
<li class="lg">EIGHT </li>
</ul>
</div>
</body>
</html>