SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot WebEminence's Avatar
    Join Date
    Jan 2012
    Location
    Chicago, IL
    Posts
    130
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Ordered lists in different browsers

    Hey CSS experts, this should be an easy one for you.

    I'm using some basic styling for ordered lists on my site using the code below.

    Code:
    #olist1 ol {
    margin-left: 20px;
    color: blue;
    font-weight:bold;
    font-size: 16px;
    }
    
    #olist1 ol p {
    margin: 10px 0;
    font-weight:normal;
    font-size:14px;
    }
    and wrapping the <li> content in <p> tags like so...

    Code:
    <div id="olist1">
    <ol>
    	<li><p>Many domain name registrars include a single email address. For example, if you buy a domain name from <a href="http://webeminence.com/godaddy" target="blank">Godaddy</a>, you’ll get 1 free email address. If one email address is all you need, then you can use their one included email address and you’re done. Just follow Godaddy's instructions for setting up your email address. In this case, you'll just pay the price of the domain name, about $10 per year.</p></li></ol>
    It shows up different in different browsers. Works fine in Chrome but looks like the left image (see attached) in IE and FF. How can I make them all look inline like Chrome?

    Thanks for helping.

    Live page example is http://webeminence.com/small-business-email/

    Capture.JPG

  2. #2
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The <p> tag in unnecessary, and unnecessary markup complicates things. Take them out and add all styling directly to the list elements.

  3. #3
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's it.
    The reason why it's working without the <p>: a <p> is a block-level element (= normally starting on a new line), and in combination with a <li> it can cause difficulties if you don't take special measures. The list-items can get the vertical margins and the line-height:
    Code:
    #olist1 li {
         font-size: 14px;
         font-weight: normal;
         margin: 10px 0px;
         line-height: 21px;
    }
    Aside: it should be better (for text-scaling by the visitor) to set the heights in a relative unit as em (see here for example). Then the line-height is increasing together with the font size, and IE users can scale the text as well if they need it.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If you really do want the p tag then just set it to display:inline and it will start alongside the marker.

    Code:
    #olist1 ol p {
    	margin:0 0;
    	font-weight:normal;
    	font-size:14px;
    	display:inline;
    }
    Alternatively don't use list-style:inside and then the text will start at the side of the markers in a neat edge.

  5. #5
    SitePoint Zealot WebEminence's Avatar
    Join Date
    Jan 2012
    Location
    Chicago, IL
    Posts
    130
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. What ended up working in all browsers is the following:

    Code:
    #olist1 ol {
    margin-left: 20px;
    color: blue;
    font-weight:bold;
    font-size: 16px;
    
    }
    
    #olist1 ol p {
    font-weight:normal;
    font-size:14px;
    display:inline;
    }
    
    #olist1 li {
    margin: 10px 0px;
    }
    I don't know why but it doesn't work without using the <p> tags. I guess that's why they were included on this CSS style I grabbed from somewhere. If I try to add the style to #olist1 li, it doesn't work.

    Adding display:inline worked but it took away the margin so I had to put that in separately as another style on the #olist1 li.

    Not sure if this is the best way but it works. Thanks.

  6. #6
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by WebEminence View Post
    If I try to add the style to #olist1 li, it doesn't work.
    That is strange. If I put the styles of post #3 in the end of the <head>, just before the </head> and therefore overruling other #olist1 li styles (if there are any elsewhere in one of the 24 (!) stylesheets), I can remove the <p>'s and it's working.

    But if you want the numbers of the <li>'s of the <ol>'s in a different style (bold, larger) as the content of the <li>'s, then you need an extra wrapping element around the text, like the <p> with the Paul O'B solution display:inline.

    And it's working now. Congratulations!


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
  •