-
This uses the default list-style-position (outside),
and an image which floats left with a top margin of 2px.
Note that, in Firefox, the number displays to the left of the image.
In IE8, Opera, and Safari (and Konqueror which matches Safari in all of these tests), the number displays inside the image.
In IE7, the number does not display at all.
-
Note that the horizontal rule below also exhibits some vagaries.
No matter how I styled it (padding-top, margin-top), it wound up snug
against the picture in all browsers.
The same is true if I put it in a div.
I eventually added a break tag, styled with clear: both, before the hr.
You might also notice that it takes the text color in Opera,
but a default color in other browsers.
-
Style1 - the same as above, except that the image now uses a right margin of 30px.
This is sufficient to cause the number to be displayed in all of IE, Opera, and Safari.
Note that Firefox now has a little extra white space between the picture and the text.
This definitely has the best cross-browser results.
-
Here is my black box, followed by an awful lot of text to ensure that
the text will wrap in order to see how ordered lists wind up handling
that situation.
Turns out even more text was needed than expected.
-
Style2 - we've moved on to list-style-position: inside.
We no longer need a right margin for Opera, IE, or Safari.
Firefox is disappointing here - a line of text, under which is the
image floated next to the remainder of the text.
-
Here is my black box, followed by an awful lot of text to ensure that
the text will wrap in order to see how ordered lists wind up handling
that situation.
Turns out even more text was needed than expected.
-
Style3 - an attempt to vertically center the text against the image, using list-style-position: outside. This uses the css display: table-cell property, and doesn't really work well in any browser. IE7 doesn't support that property - it winds up with the number vertically centered to the left of the image, and the text below. Firefox has the number to the left of the image (for list-style-position: outside), but at the bottom, not vertically centered like the text; for list-style-position: inside, the number is above the image. IE8 and Safari are like Firefox for inside; for outside, the number is to the left of and above the image. Opera vertically centers the text, but the number is nowhere to be found regardless of list-style-position. Even though this doesn't work quite well enough for ordered lists, it is possible to achieve the desired effect with some CSS 2.1 features.
-
Here is my black box, followed by an awful lot of text to ensure that the text will wrap in order to see how ordered lists wind up handling that situation.
-
Style3i - an attempt to vertically center the text against the image, using list-style-position: inside. This uses the css display: table-cell property, and doesn't really work well in any browser. IE7 doesn't support that property - it winds up with the number vertically centered to the left of the image, and the text below. Firefox has the number to the left of the image (for list-style-position: outside), but at the bottom, not vertically centered like the text; for list-style-position: inside, the number is above the image. IE8 and Safari are like Firefox for inside; for outside, the number is to the left of and above the image. Opera vertically centers the text, but the number is nowhere to be found regardless of list-style-position.
-
Here is my black box, followed by an awful lot of text to ensure that the text will wrap in order to see how ordered lists wind up handling that situation.
-
Default - here's what you see if you don't float the image.
The number (on the left) and one line of text (on the right)
vertically aligned with the bottom of the image,
with the rest of the text appearing below the image.
(If you're looking at the source, this is also Style3,
but doesn't use paragraphs, and therefore doesn't use table-cell).
-
Here is my black box, followed by an awful lot of text to ensure that
the text will wrap in order to see how ordered lists wind up handling
that situation.
Turns out even more text was needed than expected.
-
Style4 - image floated right.
Appears okay in all browsers, but short lines are far from the image.
I need to pad this a bit in order to make up a long line just to see how that's handled.
-
Short line.
-
Style4 - image floated right. Here I tried to float the text right as well to nestle the short line against the image, and this caused problems in all browsers. The short line is properly aligned in all (but far from the number). In IE7, the long line is okay, but overtypes the number. In FF, Safari, and IE8, the number remains on the left, and the long line is placed below the image. In Opera, the number is gone, and the long line is placed below the image.
-
Short line.
-
ulimbug - before getting to the best result, there's one more bug to document.
Here we have an unordered list using display: table-cell for both the image and text.
This, of course, doesn't work in IE7-.
It displays as expected in Safari, Firefox, Konqueror, and Google Chrome.
Nevertheless, there seem to be unrelated problems in
Opera, which doesn't display the image,
and IE8, which doesn't show a vertical gap between images.
Omitting the table-cell declaration for the image is permitted, and both browsers behave when it is omitted
(as do the others which don't have a problem with it in the first place).
As the next section shows, there doesn't seem to be a problem specifying table-cell for the image
in an ordered list.
-
Here is my black box, followed by an awful lot of text to ensure that
the text will wrap in order to see how ordered lists wind up handling
that situation.
-
Autocnt.
With IE8 supporting table-cell, it again became reasonable to look for another solution
to the problem of vertically centring the text,
and I think this it.
We can use CSS 2.1 counters along with list-style-type: none to display the numbers and
vertically-centered text in Firefox, Opera, Safari, Konqueror, and IE8.
We can use conditional comments to change the styles for IE7- so that it uses list-style-type: decimal
and floats the image.
This looks reasonable in all of those, and in text browsers like Lynx;
it's even passable in really old browsers like NN4 and IE4.
-
Short line.