Solved

Text alignment conundrum, or, is it possible to control number color in an ordered list?

Posted on 2004-09-14
6
151 Views
Last Modified: 2011-10-03
Greetings,

It's been a while since I've had a plain production job, and this is the first time I am working with a print designer to build a website based on a Quark document.

Anyhow, if you go to http://stevenjs.com/avocado/reciFoto.htm, then proceed to one of the ten recipe links, you can see page and source.

The conundrum is this. Designer wants the numbers left of  indented or seemingly indented text, but a different color. In fact, two different colors. See,  http://stevenjs.com/avocado/avoBeet.htm for an example of the look and alignment desired. However, the Avocado & Beet page was edited on a Mac to get the numbers to align with their corresponding paragraphs, hence they will appear misaligned on a PC, being separated vertically with a spacer.gif, which renders differently across platform browsers.

The way I have it now, the numbers are in their own table, the text in another, though it would make little difference, and in fact it was originally done, as one table.

I would just designate table heights, but this has to be 4x browser compliant as well as Mac versions, and table heights are not supported cross-browser.

I have tried <br>'s but these are blunt instruments, and produce only "more or less" alignment.

If the color attribute of the number of an ordered list could be controlled with cross-browser CSS, even with a hack, that would be ideal, as an ordered list is just the right look, just the wrong number color.

Should I just tell him it is impossible? Or am I missing something entirely. Or is there some new and ingenious solution just waiting to be found?

regards,

stevenjs
____________________________________
"I am but an egg."
--Stranger in a Strange Land
0
Comment
Question by:stevenjs
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
6 Comments
 
LVL 2

Expert Comment

by:whitefael
ID: 12079352
You can use CSS to do this. Just put this in your stylesheet:

li {
      list-style-type: decimal;
      list-style-position: outside;
      margin-left: -15px;
}


Just keep in mind that you might have to play with the negative left margin a little to get it to line up.

Hope this helps!
Brian
0
 
LVL 2

Expert Comment

by:whitefael
ID: 12079378
I missed the color part in your post. I'm looking at it now...
0
 
LVL 2

Accepted Solution

by:
whitefael earned 500 total points
ID: 12079460
Okay, you can do it this way:

CSS:
li {
      list-style-type: decimal;
      color:red;      
      list-style-position: outside;
      margin-left: -15px;
}

code {
      color:black;
}

Then, in your HTML:
<ul>
    <li><code>List Item</code></li>
    <li><code>List Item</code></li>
    <li><code>List Item</code></li>
</ul>


This should work. You can modify the font style anyway you want using CSS.

Hope this helps!
Brian
0
On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

 
LVL 2

Expert Comment

by:whitefael
ID: 12079466
Make that <ol> for an ordered list. This just isn't my day ;)
0
 

Author Comment

by:stevenjs
ID: 12191480
Thanks, really clever CSS.

I wonder, though, is it possible to get rid of the decimal next to the number?

And, which browsers does it not work in?

stevenjs
______________________
"I am but an egg."
--Stranger in a Strange Land

0
 
LVL 2

Expert Comment

by:whitefael
ID: 12193772
As far as I know, there isn't a way to remove the decimal point next to the number. If someone else knows, I would like to see it, too. As for browser support, I know it works in IE 5, 5.5, and 6; and it works with Firefox 1.0PR. I don't have access to any other browsers at the moment or I would try them too.

Brian
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question