CSS lists aaaaaargh

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I'm working on a website which includes a sales chart (eg, a top ten
CDs). The format of the list is a typical sales chart, a bit like this:

1. [img1] 1st product info
2. [img2] 2nd product info

Obviously, the image will be bigger than this, and the product info
covers multiple lines. Previously, it was formatted using a table, like

<tr><td>1</td><td><img src=image1></td><td>1st product info</td></tr>
<tr><td>2</td><td><img src=image2></td><td>2nd product info</td></tr>

What I'm trying is to redesign it using just CSS, no tables. And it
occurred to me that a chart list like this is, essentially, an ordered
list - so I can display it as a sequence of <li> elements within an
<ol></ol> pair and let the browser take care of the numbering:

<li><img src=image1> 1st product info</li>
<li><img src=image2> 2nd product info</li>

But... if I apply any styling to the image, in order to let the text
float alongside it, IE seems to lose the numbering. Here's a test page
I've put together:


This works perfectly in Firefox, but in IE and Opera the numbers are

 From my investigations, this seems to be a problem caused by the fact
that IE and Mozilla render lists differently. I've tried various fixes
suggested by sites I've checked, but none of them seem to solve it.

Obviously, I could fix it by setting list-style: none and then
explicitly echoing the numbers from the script which generates the
chart. But that seems a rather perverse way of going about it. Does
anyone have any better suggestions?


Re: CSS lists aaaaaargh

And lo, Mark Goodge didst speak in alt.www.webmaster:

Quoted text here. Click to load it

Quoted text here. Click to load it

Quoted text here. Click to load it

This is a known bug in Opera, and I guess in IE too.  The bullets in the=
se  =

browsers (including numbers in an ordered list) stick to the first  =

statically positioned node in each list item.  Floats and  =

relatively/absolutely positioned content does not seem to count.

Firefox behaves correctly and puts the bullet to the top left of the  =

entire list item.


A solution could be to float the CD image to the right, rather than the =

left - and change the clear:left; to clear:right; in the li.chart rule.


-- =

The technical axiom that nothing is impossible sinisterly implies the  =

pitfall corollary that nothing is ridiculous.
- http://www.greywyvern.com/orca#search - Orca Search: Full-featured  =

spider and site-search engine

Site Timeline