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