45 users online (1 members and 44 guests)  


  Results 1 to 4 of 4

Related

  1. Pop up menu AP Div buttons behavior    Forum: CSS Forum
    Replies: 5
  2. Unusual CSS behavior    Forum: CSS Forum
    Replies: 4
  3. Strange view source behavior.    Forum: HTML Forum
    Replies: 1
  1. #1
    illusionbuster's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2009
    Location
    north carolina
    Posts
    4

    help with <ol><li> behavior

    I am trying to have my <li> show up in red but I want the text that follows to be in black.
    I have a CSS as follows: li {color:red;}
    But in order to have text in black I have to use either <font color or a font class="color" or a <span class="color">. Is there a way of cancelling the effect of the text being red following the <li> being red? thanks
    ib

  2. #2
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: help with <ol><li> behavior

    So you are looking to make the dot/number of the list a different color from the text, right?

    If so, then you have two choices:
    1. Use an image as the marker
    2. Put the text within a <span> tag that is styled differently from the list as in the following code:
    HTML Code:
    <html>
        <head>
            <style type="text/css"><!--
                ul.specials li { color:green; } 
                ul.specials li span { color:navy; } 
            --></style>  
        </head>  
        <body>  
            <ul class="specials">  
                <li><span>One.</span></li>  
                <li><span>Two.</span></li>  
            </ul>  
        </body> 
    </html>
    Personally, I would choose the second choice, but that is up to you.

    Code borrowed from http://http://www.gidforums.com/t-7254.html
    Last edited by HTML; 03-09-2012 at 10:47 AM.

  3. #3
    illusionbuster's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2009
    Location
    north carolina
    Posts
    4

    Re: help with <ol><li> behavior

    Thanks for the tip it work perfectly.
    I did something similar but used it a bit differently and your method saves some xtra typing. and since I am using it a lot of times it save a real lot of typing.
    here is how I did it.
    <style type="text/css">
    li {color:red;}
    .black {color:#000000;}
    </style>
    <body>
    <ol>
    <li><span class="black">One.</span></li>
    </ol>
    </body>

    As you can see your method putting the class in <ol> saves me from a lot of work considering there may be up to 10 <li> items. Again I thank you very much.

  4. #4
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: help with <ol><li> behavior

    No problem. Glad to be of assistance.



Tags for this Thread