Do you have a question? Post it now! No Registration Necessary. Now with pictures!
- Mark Goodge
April 16, 2007, 3:03 pm
rate this thread
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:
This is a known bug in Opera, and I guess in IE too. The bullets in the=
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