Ordered lists in different browsers

HTML & CSS
1

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.

#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…

<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/

2

The <p> tag in unnecessary, and unnecessary markup complicates things. Take them out and add all styling directly to the list elements.

3

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:

#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 ([U]see here[/U] 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

If you really do want the p tag then just set it to display:inline and it will start alongside the marker.


#olist1 ol p {
	margin:0 0;
	font-weight:normal;
	font-size:14px;
[B]	display:inline;[/B]
}

Alternatively don’t use list-style:inside and then the text will start at the side of the markers in a neat edge.

5

Thanks guys. What ended up working in all browsers is the following:

#olist1 ol {
margin-left: 20px;
color: blue;
font-weight:bold;
font-size: 16px;

}

#olist1 ol p {
font-weight:normal;
font-size:14px;
[B]display:inline;[/B]
}

#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

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! :slight_smile: