Custom bullets in an ORDERED list?

[marketingwebaus]

Hi,

Basically my question relates to how to use custom bullets in an ORDERED list (numbered list).

A BIT OF BACKGROUND:
I built a site for one of my clients some years ago, the site does very well in search results and continues to be very successful for the client business wise.

However given the site is all font tags, tables and the like (no css) and there are quite a few limitations, i'm working with the client to plan a possible full redesign.

THE PROBLEM
On pages such as the following custom number graphics are used to refer to items on a graphic. Currently these are just individual png files, and laid out with tables - doesn't work too well any more as each modern browser seems to line it all up differently.

QUESTION:
How to I achieve an effect very similar to this using a standard ordered list and CSS to style it? (NOT CSS3 - this business does not have cutting edge clients).

I know how to work with unordered lists, just can't work out how to overlay the numbers for an ordered list.

[edited by: alt131 at 4:43 pm (utc) on Feb 25, 2012]
[edit reason] Thread Tidy [/edit]

[lucy24]

NOT CSS3 - this business does not have cutting edge clients

Oh, ###, you had to say that didn't you. See, as soon as I saw the thread title I went straight for the CSS 3 docs and found an absolutely jaw-dropping range of new numbering options [w3.org]. Basically every writing system and Unicode range under the sun except ::sulk:: UCAS.

You can sometimes sneak a CSS3 element into an innocuous CSS2 stylesheet. At worst, it will "degrade gracefully" (CSS-speak for "nothing will happen").

:: idly thinking how nice it would be if htaccess errors degraded gracefully ::

[Marshall]

Hi marketingwebaus and welcome to WebmasterWorld.

ul {
list-style-image: url(YOUR-IMAGE.gif);
}

Your other option is to do:
li {
background: COLOR url(YOUR-IMAGE.gif) left center no-repeat;
padding-left: /* In pixels the width, or a little more, of the background image */
}

Remember, the image location is relative to the CSS file, not the web page.

Marshall

[lucy24]

... except that the question was about

ol

:(

At least, I assume that was the significance of "ORDERED list" (emphasis theirs).

[Marshall]

... except that the question was about

Thank you lucy, sorry marketingwebaus.
My bad. :( :(

Though I have not tried it, I would think that
ol {
background: COLOR url(YOUR-IMAGE.gif) left center no-repeat;
padding-left: /* In pixels the width, or a little more, of the background image */
}
should work. Could be wrong.

Marshall

[marketingwebaus]

Hi everyone, thanks for the replies thus far!

Lucy, I had a feeling upfront that there would be more answers in css3 than previous versions. The ideas you were going to suggest, do you have an idea of what browsers they will/won't work in? Might be able to get away with the degrading gracefully thing depending on what browsers it does and doesn't work in.

Marshall, thanks for your answers, and definitely related specifically to ordered lists. Most of us are used to doing all sorts of clever things using UL's, in fact most horizontal menu's these days use a ul and then style it, it's ordered lists i'm having the trouble with.

For your info (since the link has been removed and you can't see) basically i'm looking to have a little orange circle (solid) with a reversed out number on it, or it could even be a square if it needed - each number matches with a point on a diagram.

I've found tutorials where the font itself can be changed, but not what I'm trying to do.

[lucy24]

Ooh, sounds like the kind of thing that would work beautifully on my computer-- not because of CSS3 but because I've got several hundred fonts installed, so all those display-number ranges would come through loud and clear.

The CSS3 writeup in this area does feel pretty preliminary-- not like some CSS3 areas that seem as if they're ready to be released next week! But if you scroll down to 9.5. Predefined Non-Repeating Styles you can see what a wonderful range of things already exist, without the need for you to make pictures. Font embedding would be a solution-- except you'd then need to find font-wrangling software so all you're embedding is the numbers (maybe a 10K file) instead of the whole font (up to several megabytes).

By "reversed out" do you mean white text against a non-white background? That should be doable without getting too fancy. You'd need to give the list-marker a background image which is your little orange doodad, and then the marker itself is set to {color: white} and {background-color: whatever color your image is}. In theory you can say color: white and background-color: transparent so you don't have to worry about matching the image color. But I wouldn't advise it, in case the background image gets lost. You can also toss in a bit of text-shadow to highlight the number.

This is all assuming your lists are dynamic, or change often, so it isn't practical just to make a series of <li> id's and set the image manually.

[marketingwebaus]

Thanks for the reply lucy.

Yes exactly right - I do mean white text on a non white background (preferably a little circle). Reason I need to stick with it is that they match points on digrams, and there are way too many to change. A simple link to what I'm talking about would explain better, but it's not allowed on here I believe (other one got removed).

The lists are not dynamic and don't change often - can you advise more re <li> id's and how to do this, it may be a simple solution. Sorry if it's a newbie question.

Currently I have an image (tiny png file) for each number up to 30 on the old site so I can reuse them. The problem is more related to the layout, to get rid of using tables to lay out (and the fact that some dot points take up one line, some a lot more).

Matt

[marketingwebaus]

Just found a possible solution here that does pretty close to what I want. Haven't tested it yet but looks good (other than the fact I can't use circles).

[456bereastreet.com...]

Hope it's OK to post this (haven't worked out webmasterworld's link policy properly yet, was surprised the one in my original post got deleted).

[lucy24]

Follow-up from my side: Dang, I'm sorry-- and glad you found an alternative fix. See, I just assumed you could assign properties directly to the list marker... and apparently you can't. At least not in CSS2:

The list properties .... do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker or adjust its position with respect to the principal box; these may be derived from the principal box.

You have to go to CSS3 to get the pseudo-element

li::marker

Do not ask me why there are two colons. It doesn't appear to be a typo.

:: now off to see if this is supported in any of my current browsers, possibly with an added -moz- or -webkit- at the front ::

[lucy24]

Further follow-up: I also discovered that you can do this, right now, in vanilla css:

li {font-size: 200%;}
li div {font-size: 50%;}

Very simple but kinda nice effect.

[alt131]

@marketingwebaus welcome to WebmasterWorld. The links policy was explained in the sticky mail you were sent when the post was edited - look at the top of the page for the "you have mail" link. It also contained a link to the TOS, or follow the one at the bottom of the page, plus more detail in the two posts pinned to the top of the forum.

Quirksmode [quirksmode.org] and msdn [msdn.microsoft.com] have some useful support tables

Do not ask me why there are two colons. It doesn't appear to be a typo.

That's the new syntax for 7. Pseudo-elements [w3.org]. Unfortunately two things have delayed use. First, legacy browsers don't understand it - but some do. Second, more modern browsers that don't understand it but use strict error handling treat it as an error so the rules following are ignored. Plus understanding of pseudo-elements varies, so some versions recognise some pseudo elements, but not others. A couple years ago we tried to figure how to use the new syntax and I made up a "table" but I haven't linked to it because it required up to three sets of rules, plus typo's meant implementing exactly what was written would fail anyway :).

Lists are a challenge because few browser versions actually conform exactly to the recs, plus user agents have discretion when rendering them. marketingwebaus it would help a lot if you could identify the browser versions you are supporting because that makes a huge difference to your options. If you need to support really legacy versions probably easiest to hard-code a "disc" image into each <li> as Lucy has suggested. I really would try to avoid using a separate image for each number as well, but if you must, at least sprite the separate images to save in server hits.

However below is an example of a place to start for more modern versions. The advantage over the BereaSt example is that it retains the default list numbering. That means the user agent can still render a numbered list even if it does not understand pseudo-elements or the other styles. The negative aspect is use of "bullet", which is not great semantics, and may be read out for users of some assistive technology. Of course, depending on versions you are supporting you could use a disc image instead.

ol {
list-style-position: outside;
/*for the example*/
line-height:32px;
}

li {
position:relative;
color:white;
}

li:first-line {color:black;}

li:before {
position:relative;
z-index:-1;
content:"\2022 ";
color: orange;
vertical-align:middle;
/*for the example*/
margin-left:-35px;
margin-right: 8px;
font-size:700%;
line-height:32px;
text-shadow: 1px 2px 3px #000;
}