SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,292
    Mentioned
    2 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>
    here's the css:
    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;
    }
    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

  2. #2
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,292
    Mentioned
    2 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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •