Link to home
Start Free TrialLog in
Avatar of Eric - Netminder
Eric - NetminderFlag for United States of America

asked on

Ordered list

My client wants an ordered list. Easy enough... except

All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers... in a bright blue. Fortunately, he doesn't want to change typefaces, but this is bad enough.

I have a workaround (in line images), but is this sort of thing at all possible? And if so, how?

Thanks,

ep
SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
you could also do something like this, which styles the actual numbers:

<!doctype html>
<html>
<head>
<title></title>

<style>
ol {
    counter-reset:li; /* Initiate a counter */
    margin:0; /* Remove the default left margin */
    padding:0; /* Remove the default left padding */
}
ol > li {
    list-style:none; /* Disable the normal item numbering */
}
ol > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */

    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;

    margin-right:8px;
    color:blue;
    font-weight:bold;
    font-size: 28px;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;
}

</style>
</head>
<body>
<ol>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
</ol>


</body>
</html>

Open in new window


you could add a dor if you wanted, like this:
content:counter(li) ".";
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Eric - Netminder

ASKER

Outstanding. All three solutions work; however, Kyle's was almost copy and paste for my particular situation (I just had to change the font and size).

Couldn't ask for better; thanks!

ep
Just a note - the accepted solution may have an issue with older browsers. Personally I don't care about IE - I don't support it - but in case it is an issue just bear it in mind.
Julian,

I tested it in my client's pages using (among other things) IE8 on a Windows XP machine. Considering the nature of the client's business, I don't think it's much of a concern earlier than that.

Thanks, though.

ep
IE8 on a Windows XP machine
Interesting - can't get it to work on IE8 / XP here.
If you'd like, I can send you the page.
it works for me in Ie8

however, supporting ie8 is not something i do anymore. move on.
*laughing*... were it not for this client, I wouldn't support it either (okay, that and the fact that I'm still not sure whether I want to pick up a new machine in the next month or so, or load a whole new OS on this one and then reinstall all the software).
I am a staunch advocate of killing off anything IE - only raised it in case it was an issue.

Reason it was not working here - IE7 Compatibility mode - issue closed.

@Kyle - nice solution