ordered inline lists - no numbers

[surrealillusions]

I have a bunch of images arranged inline with a list, to avoid using tables to make them appear in rows.

However, i changed it to an ordered list as i wanted them numbered. However, it didn't work. I found the problem to be this -

display:inline;

How do i keep the images inline, in rows, and with numbers?

[sgietz]

Some code, please. :)

[surrealillusions]

Its pretty basic,

CSS -

#content ol
{font-family:Arial;
font-size:12px;
color:#0d3721;
padding-bottom:0px;
text-align:center;
margin-bottom:0px;}

html -

<ol>
<li><img src="image1.jpg" alt='' /></li>
<li><img src="image2.jpg" alt='' /></li>
<li><img src="image3.jpg" alt='' /></li>
<li><img src="image4.jpg" alt='' /></li>
<li><img src="image5.jpg" alt='' /></li>
<li><img src="image6.jpg" alt='' /></li>
</ol>

[pageoneresults]

Possibly a margin-left and/or padding-left issue? Something else in the CSS setting the ol margin-left and/or padding-left to less than what is optimal?

[sgietz]

Here is a generic style I start with when making horizontal lists:

ol {display:inline;margin-left:0;padding-left:0;}
ol li {display:inline;margin-left:0;padding-left:0px;}

A lot of times you have to mess with the margins/padding to make it work. More times than not the first and/or last item need to be styled separately.

[surrealillusions]

forgot this bit

#content li {
display: inline;
color:#0d3721;
padding-left:10px;
padding-right:10px;
line-height:50px;}

;)

But changing the paddings and margins didn't make any difference. The numbers still didn't show up...

[SuzyUK]

don't think it can be done, at least not x-browser and I think IE's got it wrong again..

The display property is what creates the "bullet" (or number in an <ol>). For a list item or <li> the default display property is display: list-item - as soon as you change that by using display: inline; there should be no bullet as the display property has been changed.

But floating the element does seem to work, in FF & Opera anyway. If you float the <li> the li should become a block level box, but the actual display property need not change, and in FF DOM Inspector it still shows the display property to be "list-item" so the bullet still appears as it does in opera.. however IE is a no show.

IE does not recognise very many display types and even on a default <li> without any manipulation it shows it as "display: block" instead of display: list-item, so how its bullets are generated, I don't know.

Floating the <li> element in IE makes the bullet disappear and then there seems to be no way to force them back, maybe IE8 is better?

[surrealillusions]

hmm..ok..

thanks.

The floats mess up the page layout, so i dont think i can use that..not easily anyway. Although its probably possible.

Seems i've found something that css cant do after all these years of using it.