Problems displaying ordered lists

**AdRock952** · Aug 13, 2007 06:51

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

**markbrown4** · Aug 13, 2007 07:11

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;
}

**AdRock952** · Aug 13, 2007 14:42

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

**piku** · Oct 26, 2007 10:33

Originally Posted by AdRock952

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

**Paul O'B** · Oct 26, 2007 15:15

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>

User Tag List

Thread: Problems displaying ordered lists

Thread Tools

Display

Problems displaying ordered lists

Bookmarks

Bookmarks

Posting Permissions