SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems displaying ordered lists

    I have a really strange problem with an ORDERED list. I have a list and it's not displaying the numbers.

    I have tried creating a test page with exactly the same code and I can see exactly what is expected but if i try and put it into my page, the numbers disappear.

    You can see what I mean by click herehttp://www.jackgodfrey.org.uk/adam/jack/ and looking at the Latest News, Latest Articles and Useful Information.

    Everything worked fine before I decided to try and make the hyperlinks look better by adding a background colour to hover.

    Another question is how do i match the ordered list hyperlinks hover effect with the navigation menu hyperlinks so they all look the same. If you look at the test page I made, the hover effect seems much smaller

    Here is the css for the menu

    Code CSS:
    ul#menu, .menu2 {
      list-style-type: none;
      margin: 0;
      padding: 0;
      list-style-position: outside;
      margin-top: 5px;
    }
     
    ul#menu ul, .menu2 ul {
      display: none;
      padding-left: 0px;
      padding-top:0;
      margin-left: 0;
      border-bottom: none;
    }
     
    ul#menu li, .menu2 li{
      font: 9pt Verdana, Geneva, Arial, Helvetica, sans-serif;
      padding-bottom: 0.1em;
      list-style: none;
      margin-top: 0;
      padding: 0;
    }
     
    ul#menu ul li, .menu2 ul li {
      list-style: none;
      margin-left: 0px;
      padding: 0;
    }
     
    ul#menu li a, .menu2 li a {
       display:block;
       background-color: #E4EFFF;
       color: #000000;
       text-decoration: none;
       outline: none;
       padding: 0px 0px 1px 5px;
    }
     
    ul#menu li a:hover, .menu2 li a:hover {
       display:block;
       background-color: #D6DDE6;
       color: #000000;
       text-decoration: none;
       outline: none;
       padding: 0px 0px 1px 5px;
    }
     
    ul#menu li a.active {
       disply: block;
       background-color: #B0C4DE;
       color: #000000;
       text-decoration: none;
    }
     
    ul#menu ul li a {
       display:block;
       background-color: #EDF0F6;
       color: #000000;
       text-decoration: none;
       outline: none;
       padding: 0px 0px 1px 20px;
    }
     
    ul#menu ul li a:hover {
       display:block;
       background-color: #D6DDE6;
       color: #000000;
       text-decoration: none;
       outline: none;
       padding: 0px 0px 1px 20px;
    }
     
    ol.blah {
      font-weight: bold;
      color: #5E6E81;
      font-family: Arial, Verdana, Helvetica, "Sans Serif";
      font-size: 11px;
      list-style-position: outside;
      margin-top:5px;
    }
     
    ol.blah li, {
      font: 9pt Verdana, Geneva, Arial, Helvetica, sans-serif;
      padding-bottom: 0.1em;
      margin-top: 0;
      padding: 0;
    }
     
    ol.blah li a {
       display:block;
       background-color: #E4EFFF;
       color: #000000;
       text-decoration: none;
       outline: none;
       padding: 0px 0px 1px 5px;
    }
     
    ol.blah li a:hover {
       display:block;
       background-color: #D6DDE6;
       color: #000000;
       text-decoration: none;
       outline: none;
       padding: 0px 0px 1px 5px;
    }
     
    ol.blah li a.active {
       disply: block;
       background-color: #B0C4DE;
       color: #000000;
       text-decoration: none;
    }
    Here is the code for the test page which works how it should

    Code HTML4Strict:
    <html>
    <head>
    <style type="text/css">
    ol.blah {
      font-weight: bold;
      color: #5E6E81;
      font-family: Arial, Verdana, Helvetica, "Sans Serif";
      font-size: 11px;
      list-style-position: outside;
      margin-top:5px;
    }
     
    ol.blah li, {
      font: 9pt Verdana, Geneva, Arial, Helvetica, sans-serif;
      padding-bottom: 0.1em;
      margin-top: 0;
      padding: 0;
    }
     
    ol.blah li a {
       display:block;
       background-color: #E4EFFF;
       color: #000000;
       text-decoration: none;
       outline: none;
       padding: 0px 0px 1px 5px;
    }
     
    ol.blah li a:hover {
       display:block;
       background-color: #D6DDE6;
       color: #000000;
       text-decoration: none;
       outline: none;
       padding: 0px 0px 1px 5px;
    }
     
    ol.blah li a.active {
       disply: block;
       background-color: #B0C4DE;
       color: #000000;
       text-decoration: none;
    }
     
    .news {
       width: 190px;
       margin-left: 3px;
       margin-top:5px;
       background-color: #E4EFFF; /*#EDF0F6*/
       border: 1px solid #FFFFFF;
       clear: both;
    }
     
     
    </style>
    </head>
    <body>
    <div class="news">
    <ol class="blah">
    <li><a href="#">jgkljsldkgjlkfdjglkd</a></li>
    <li><a href="#">jgkljsldkgjlkfdjglkd</a></li>
    <li><a href="#">jgkljsldkgjlkfdjglkd</a></li>
    <li><a href="#">jgkljsldkgjlkfdjglkd</a></li>
    <li><a href="#">jgkljsldkgjlkfdjglkd</a></li>
    </ol></div>
    </body>
    </head>

    If anyone could help I would be very grateful as I'm at a dead end with this

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    the numbers are there, they are just pushed out to the side because you have reduced all the margin and padding. e.g.
    Code:
    ol.blah {
      font-weight: bold;
      color: #5E6E81;
      font-family: Arial, Verdana, Helvetica, "Sans Serif";
      font-size: 11px;
      list-style-position: outside;
      margin-top:5px;
      background-color: #E4EFFF;
      padding-left: 20px;
    }

  3. #3
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks markbrown4. I would never have thought of that.

    I do however have another question........I am trying to create a CSS rollver effect on my ordered list and when I use the original code I have noticed that if the list content is quite long it wraps underneath tidily becuase of this property

    Code CSS:
    ol.blah {
      font-weight: bold;
      color: #000;
      font: 9pt Verdana, Geneva, Arial, Helvetica, sans-serif;
      [B]list-style-position: outside;[/B]
      margin-top:5px;
      background-color: #E4EFFF;
      padding-left: 0px;
    }

    The problem is that this rollover effect doesn't stretch over the numbers which is what I am trying to do

    Code CSS:
    ol.blah li a:hover {
       display:block;
       background-color: #D6DDE6;
       color: #000000;
       text-decoration: none;
       outline: none;
       padding: 1px 0px 1px 5px;
    }

    If I change the list-style property to inside, I can get the rollever effect I am looking for but the text doesn't wrap underneath tidily.

    Any ideas how I can do this? I have tried adjusting padding but that doesn't work

  4. #4
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AdRock952 View Post
    If I change the list-style property to inside, I can get the rollever effect I am looking for but the text doesn't wrap underneath tidily.

    Any ideas how I can do this? I have tried adjusting padding but that doesn't work
    Interested in knowing about this too... TIA, Sherwin

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    When you set the list-style to inside you are basically turning the marker into an inline element and once inside it is treated just like another bit of text on that line. Therefore when text wraps it just wraps under the whole line because the marker is not outside anymore.

    I'm not exactly sure what you want but I'm guessing its something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
     ol.blah {
      font-weight: bold;
      color: #5E6E81;
      font-size: 11px;
      margin:5px 0 0 0;
      background: #E4EFFF;
      padding-left: 2.5em;
        width:185px;
    }
    ol.blah li, {
      padding:1px 0;
    }
     
    ol.blah li a {
      display:block;
      background: #E4EFFF;
      color: #000;
      text-decoration: none;
      padding:2px 0 2px 5px;
        margin-left:-2.5em;
        text-indent:2.5em;
    }
     
    ol.blah li a:hover { background: #D6DDE6}
     
    </style>
    </head>
    <body>
    <ol class="blah">
        <li><a href="#">jgkljsldkgjlkfdjglkd</a></li>
        <li><a href="#">jgkljsldkgjlkfdjglkd</a></li>
        <li><a href="#">jgkljsldkgjlkfdjglkd</a></li>
        <li><a href="#">jgkljsldkgjlkfdjglkd</a></li>
        <li><a href="#">jgkljsldkgjlkfdjglkd</a></li>
    </ol>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •