SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
-
Apr 1, 2006, 14:17 #1
- Join Date
- Apr 2002
- Posts
- 2,322
- Mentioned
- 3 Post(s)
- Tagged
- 0 Thread(s)
clear:none and :first-child failings and how to deal with
here's a slightly stripped down version of what i've got:
the html:
Code:<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>
Code: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; }
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
-
Apr 2, 2006, 09:35 #2
- Join Date
- Apr 2002
- Posts
- 2,322
- Mentioned
- 3 Post(s)
- Tagged
- 0 Thread(s)
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.
Bookmarks