clear:none and :first-child failings and how to deal with

[johnyboy]

here's a slightly stripped down version of what i've got:

the html:

<ul>
	<li><a href="#">First list 1</a></li>
	<li><a href="#">First list 2</a></li>
	<li><a href="#">First list 3</a></li>
</ul>
<ul class="carryon">
	<li><a href="#">Second list 1</a></li>
	<li><a href="#">Second list 2</a></li>
	<li><a href="#">Second list 3</a></li>
	<li><a href="#">Second list 4</a></li>
	<li><a href="#">Second list 5</a></li>
</ul>

here's the css:

ul {
	list-style: none;
	font-family: sans-serif;
	font-size: x-small;
	clear:left;
}
ul.carryon, li.carryon, a.carryon { clear:none }
ul.carryon li:first-child {
	padding-left: 1px;
	border-left: 2px solid #555;
	margin-left: 2px;
}
li {
	float: left;
}
a {
	display:block;
	text-decoration: none;
	color: #000;
	padding: 2px 5px 2px 5px;
	margin: 2px 1px 2px 2px;
	border: 1px solid #999;
	background: #ddf;
}

and here it is on a web page: http://www.hdbatik.co.uk/carryontest/carryontest.html

in a very recent version of safari and in ie 7 (and maybe other browsers but those are the only two that i've tried and the following applies) it looks like this:



which is exactly as intended.

in safari 1.2.3 (which isn't that old) it looks like:



clear:none is failing but the seperator line isn't (which is applied via li:first-child)

in ie 6 (and 5) i'm wondering if it looks like the older safari above *minus* the dark grey seperator line (to the left of 'Second list 1') maybe? i reckon it might, as ie doesn't listen to :first-child i don't think, and i guess although don't know clear:none fails in ie like the slightly earlier safari.

how does it look in ie 6 (and/or 5)?

and what would anyone recomend for dealing with it? -- so far as making it look reasonable in most browsers? (i know that's a pretty general question but that's intentional. i'm not specifically asking how can i get rid of the gray line in browsers that fail to clear:none, or, how do i make the lists run on in all browsers?)

the way it looks in the slightly older safari isn't so good, as as the clear:none is failing it'd be better if the dark grey seperator also wasn't there. so, dark grey seperator and clear:none failing, or both working would be best.

i know i could get rid of the clear:left in ul and use a class to add the clear:left to the ul's that should be on two different lines, but i want the lists on two different lines by default. carrying on should be the further specified version like it is now.

any suggestions?

thanks

[johnyboy]

could anyone tell me how it ( http://www.hdbatik.co.uk/carryontest/carryontest.html ) looks in ie 5 and 6 please? just: does the 2nd list carry on from the first horizontally or start on a new line, and does the small dark grey seperator bar (to the left of the "Second list 1" list item) appear or not?

thanks.