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
LVL 15
Eric AKA NetminderAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
There are many ways to skin this cat.

You could just style the li and then put the content in its own tags and style those. Or you could create a list-style none and add your own numbers - two examples below.
<!doctype html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
$(function() {
	
});
</script>
<style type="text/css">
ol {
  font-size: 28px;
  color: blue;
}
ol li p {
  font-size: 12px;
  color: #000;
}
ul {
	list-style: none;
	padding: 0;
}
ul li span {
	padding-right: 10px;
	font-size: 28px;
	color: blue;
	text-align: right;
	display: inline-block;
	width: 35px;
}
</style>
</head>
<body>
<ol>
  <li><p>First Item with some text to make this about thirty words long and some more text just to add words and make this the right length. I hate test data.</p></li>
  <li><p>Second Item</p></li>
  <li><p>Third Item</p></li>
  <li><p>Fourth Item</p></li>
  <li><p>...</p></li>
  <li><p>Tenth Item</p></li>
</ol>
<ul>
  <li><span>1.</span>First Item with some text to make this about thirty words long and some more text just to add words and make this the right length. I hate test data.</li>
  <li><span>2.</span>Second Item</li>
  <li><span>3.</span>Third Item</li>
  <li><span>...</span> ...</li>
  <li><span>10.</span>Tenth Item</li>
</ul>

</body>
</html>

Open in new window

0
Kyle HamiltonData ScientistCommented:
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) ".";
0
Kyle HamiltonData ScientistCommented:
Here is an alternative version in which the text is indented across multiple lines:

<!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 */
    margin:0 0 0 2em; /* Give each list item a left margin to make room for the numbers */
    padding:8px;
    position:relative;
}
ol > li:before {

    content:counter(li) "."; /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding: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>
  <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>
  <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>
  <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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Eric AKA NetminderAuthor Commented:
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
0
Julian HansenCommented:
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.
0
Eric AKA NetminderAuthor Commented:
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
0
Julian HansenCommented:
IE8 on a Windows XP machine
Interesting - can't get it to work on IE8 / XP here.
0
Eric AKA NetminderAuthor Commented:
If you'd like, I can send you the page.
0
Kyle HamiltonData ScientistCommented:
it works for me in Ie8

however, supporting ie8 is not something i do anymore. move on.
0
Eric AKA NetminderAuthor Commented:
*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).
0
Julian HansenCommented:
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
0
Kyle HamiltonData ScientistCommented:
:)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.