SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting ordered lists to display the same in IE as other browsers?

    Usually, if I need a list, I use an unordered list. The need for an ordered list has came up and I've never really dealt with them much. I noticed that they don't render the same in FireFox as they do in IE.

    Here is the page: http://test.ksba.org/about

    If you view in IE7 you can see where the left margin of the ordered list is being cut in half. I can easily fix this by simply adding more margin to the CSS, but that will also bump the ordered list over tot he right more in FireFox and it becomes offline with the rest of the content.

    Aside from having a separate IE only stylesheet and using conditionals, how can I get this list to render the same? Seems like it should be pretty straight forward.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I don't think it's as easy at it should be - each browser implements it slightly differently. list-style-position: inside; gives you a consistent appearance, but using position: outside I think you have to find 'magic values' that work.
    Code:
    ol {
    	margin: 0;
    	padding: 0;
    	list-style-position: inside;
    }
    ol li {
    	margin: 0;
    	padding: 0;
    }
    Code:
    ol {
    	margin: 0 0 0 1.5em;
    	padding: 0;
    }
    ol li {
    	margin: 0;
    	padding: 0;
    }
    Is close-ish.

    Another way would be to leave the defaults and use relative positioning to put it where you want

    Code:
    ol {
    	position: relative;
    	left: -15px;
    }
    Is close-ish but doesn't re-size well.

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem here is the different way different browsers do the list style positioning. By setting zero left margin on the <ol> (or <ul> ) and bringing the bullets in with padding works cross-browser :
    Code:
    ol#objectives {
    margin: 10px 0 0 0;
    padding: 0 0 0 2em;
    }

  4. #4
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I don't think it's as easy at it should be - each browser implements it slightly differently. list-style-position: inside; gives you a consistent appearance, but using position: outside I think you have to find 'magic values' that work.
    Code:
    ol {
    	margin: 0;
    	padding: 0;
    	list-style-position: inside;
    }
    ol li {
    	margin: 0;
    	padding: 0;
    }
    Code:
    ol {
    	margin: 0 0 0 1.5em;
    	padding: 0;
    }
    ol li {
    	margin: 0;
    	padding: 0;
    }
    Is close-ish.

    Another way would be to leave the defaults and use relative positioning to put it where you want

    Code:
    ol {
    	position: relative;
    	left: -15px;
    }
    Is close-ish but doesn't re-size well.
    Hey mark. I tired the "inside" approach but with that method, if there is more than one line of text the second line starts directly below the number and not indented. So, I'd rather keep it outside. Even though I'd need to find some magic to do it.

    Quote Originally Posted by Centauri View Post
    The problem here is the different way different browsers do the list style positioning. By setting zero left margin on the <ol> (or <ul> ) and bringing the bullets in with padding works cross-browser :
    Code:
    ol#objectives {
    margin: 10px 0 0 0;
    padding: 0 0 0 2em;
    }
    Hi. I'm not sure how using padding is any different then doing something like what I've got below:

    Code:
    ol#objectives {
    margin: 10px 0 0 25px;
    }
    Gives the same result and works cross-browser but still isn't the same in both IE and Firefox. I realize that nothing usually ever is the same in IE and there will always be a little difference, but being a simple ordered list you would think that IE would have the same standards as other browsers. But as Mark pointed out above, that's not the case.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I realize that nothing usually ever is the same in IE and there will always be a little difference, but being a simple ordered list you would think that IE would have the same standards as other browsers. But as Mark pointed out above, that's not the case.
    Well.. not that i've found anyway.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deronsizemore View Post
    Hi. I'm not sure how using padding is any different then doing something like what I've got below:

    Code:
    ol#objectives {
    margin: 10px 0 0 25px;
    }
    The padding spaces the internal elements, including the bullets, while applying a margin moves the whole container, which does not reveal the bullets in IE. The code I posted above does render the same in FF as IE.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Centauri
    The padding spaces the internal elements, including the bullets, while applying a margin moves the whole container, which does not reveal the bullets in IE
    Yes it will

    These two snippets will produce the same results in IE and in Firefox. Whether you use margins or padding the look is in fact the same.

    Code:
    ol {
    margin: 10px 0 0 0;
    padding:0 0 0 2em
    }
    Code:
    ol {
    margin: 10px 0 0 2em;
    padding:0;
    }
    Both have the effect of moving the marker into view in IE and Firefox. The only difference that would be noticeable was if you applied a background to the list and using margin would only put the background around the text and using padding would put the background around the text and the bullet.

    You can never change the distance from the marker to the text (when using list-style: outside) as that is determined by the browser. Using margin or padding just moves the whole line into view. IE places the bullet a little further way and Firefox has a slightly bigger bullet.

    Here's a very simple demo that you can run in both Firefox and IE to see the differences.

    http://www.pmob.co.uk/temp/list-bullet-test.htm

    It should be noted that the bullet will still show even if you set margins and padding to zero but the bullet is placed outside the principal box which often means that it doesn't appear to show.



    Quote Originally Posted by w3c
    The marker box is outside the principal block box. CSS 2.1 does not specify the precise location of the marker box.

    If you add some padding to the body you can see that the bullet is there in IE and in Firefox even when no margin and padding are used at all on the list.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    body{padding:22px;}
    ol {
    margin:0;
    padding:0
    }
    
    
    </style>
    </head>
    <body>
    <ol>
        <li>testing testing</li>
    </ol>
    </body>
    </html>
    All you are doing when you add padding or marigin is shifting the text to the side and the marker is dragged along with it because it is attached at a fixed distance from the text .

    Hope that explains what is happening clearly enough.

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But if you apply a width to the <ul>, in IE the bullets disappear from the margin indent version....

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    But if you apply a width to the <ul>, in IE the bullets disappear from the margin indent version...
    I didn't see a width in the original example

    But yes you are correct and IE will hide the bullets when "haslayout" has been forced on the ul/ol. If that is the case then the padding version is of course a better option or apply the width to the parent of the ul (if there is one)

    I should also point out that for ordered lists (ol) that if you give a width (or force "layout") on the "li" then the list numbers will all start at 1 which is not much use at all. Also if you float the lists the bullets are removed completely in IE (it seems display:list-item and float can't exist at the same time).

    There are probably a number of other bugs I have forgotten about as well

  10. #10
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone for taking time to help out with this.

    Thanks Paul for explaining the little differences that are there between IE and other browsers. I appreciate it.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore


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
  •