ordered list next to floated element: issue with vertical alignment and text indent

[Thatsid]

Hi,

I have an issue with an ordered list.
When the line wraps, in IE6 the number aligns suddenly to the bottom. And the text indentation Firefox goes wrong also. It should properly align with the first line of the wrapping <li>.

The same list could appear next to floated element or stand to the left side of the box.

I had to use a separate stylesheet for IE only to get the left margin right in all browsers.

See testcase here:
http://www.flink.nl/test/ordered-list-ie6.html

Because it's being used in a content management system, this structure has the following conditions:

• You cannot define any widths for any of the elements
• The list should also align properly to the left, without standing next to the floating element.
• The content has to wrap around the element.
• it's not allowed to place extra HTML-tags or classes in or around the list to influence it's behavior.

Does anyone have a bright idea?

thanks in advance!
Flink

[Fang]

Does anyone have a bright idea?

Get a decent CMS, the restrictions are ridiculous.

Alternatively, as this is the second related posting, it's sounding more like homework which you should be solving yourself.

[Thatsid]

Get a decent CMS, the restrictions are ridiculous.

Thanks for the tip but I think it's a fairly simple and straight forward structure. How would you achieve the same flexibility (wrapping text around image) in an other way?

Alternatively, as this is the second related posting, it's sounding more like homework which you should be solving yourself.

Excuse me, but i spend some hours trying to solve this myself! Without any luck...

[Fang]

The problem is with the lists, once you change margin, padding or float the list-style-type tends to disappear depending on the property values used.
The easiest way is to place a background image in the li in place of the bullets.

If you look through this typical css reset list, you will notice that lists are displayed is simple lines of text. Consequently any further changes to their properties will render them the same across all browsers.

I can not see why a CMS would restrict you in such a way.

[Thatsid]

The easiest way is to place a background image in the li in place of the bullets.

If you look through this typical css reset list, you will notice that lists are displayed is simple lines of text. Consequently any further changes to their properties will render them the same across all browsers.

Maybe I wasn't clear: the current issue is with the ordered list, not the bullets. The bullets work fine now. As described in the example page: in IE6 the number of the ordered list aligns to bottom of the two lines when it wraps and in Firefox the second line of the wrapped text indents unwanted.

[Thatsid]

Any other ideas anyone?