SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation IE screwing up my Ordered List

    I've had this problem before but I've shrugged it off because I never really needed the numbers to be present, but now I do and it's driving me nuts!

    This is the page in question.

    I would like the list to display the way firefox is displaying the list. I don't know why the decimals are at the very bottom of the li tag and I'm not sure why the numbering isn't catching on.

    IE is hideous.

    the css is short and sweet (it's included in that same page, but here's the code again)

    Code:
    .commentlist ul.alt, .commentlist li.alt{ 
    	background-color: #999999;
    	width: 60%;
    	max-width: 40em;
    	padding: 1%;
    	margin: 0px;
    	list-style: decimal;
    	list-style-position:inside;
    }
    .commentlist ul, .commentlist li{ 
    	background-color: #CCCCCC;
    	width: 60%;
    	max-width: 40em;
    	padding: 1%;
    	margin: 0px;
    	list-style: decimal;
    	list-style-position:inside;
    }
    As always, you have my heartfelt thanks in advance!

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2006
    Location
    Ohio USA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup, which is why you need to assign the width to the parent container (OL), not the LI's.

    Code:
    .commentlist {
    	display:block;
    	width:60%;
    	max-width: 40em;
    }
    
    .commentlist li { 
    	background-color: #CCCCCC;
    	padding: 1%;
    	margin: 0px;
    	list-style: decimal;
    	list-style-position:inside;
    }
    .commentlist li.alt{ 
    	background-color: #999999;
    }
    You'll note I stripped it down a bit shorter, and added display:block; - IN THEORY ordered lists are supposed to be block level elements - unfortunately such theory rarely survives contact with the myriad of browsers... the real fix though is moving the width setting.

  4. #4
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, thank you so much guys! It worked!

    And I also realized I kept styling for ul and not ol, gah, that resolves it though.


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
  •