Why does the formatting of my Ordered List not show up?

Below is a screenshot of my page as it looks on my box:

screenshot
...and here's how it looks live:

screenshot
Here's my CSS:

 #code_container {
 width:807px;
 height:250px;
 overflow:auto;
 margin:auto;
border: 1px #000000 solid;
 }
 
ol {
white-space: normal;
width:750px;
margin:auto;
background-color:#036; background-repeat:repeat-y;background-position:center;
font-family:Helevtica, Arial;
font-size:10pt;
color:#ffffff;
}

ol	li {
padding:3px;
background-color:#ffc;
color:#ffffff;
}
	
ol li span{ color:#000000; }	

Open in new window


The code_container works, everything looks fine, but the blue background along the left hand side doesn't show up and I can't figure out why.

Thoughts?
brucegustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

brucegustPHP DeveloperAuthor Commented:
OK, here's how it looks live on a different server. No issues. Everything looks exactly as it should. Check it out:

http://hihatwebdesign.com/verizon/csv_demo.php

So, the question is: What could be distinct about the server that I'm running it on internally that would cause my formatting to not show up?
0
Dave BaldwinFixer of ProblemsCommented:
Well, No, that's Not your CSS in the working page.  You need to learn how to use Firebug.  Your CSS for the 'ol' on the working page is this:
ol {
    background-color: #013c76;
    background-repeat: repeat-y;
    color: #ffffff;
    font-family: Arial;
    font-size: 10pt;
    margin: auto;
    width: 750px;
}

Open in new window

See the blue background color?  It's Not the server.
0
brucegustPHP DeveloperAuthor Commented:
OK, Dave, check this out:

Run this page on your test server:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ordered List Test</title>
<style>
ol {
background-color: #000000;
background-repeat: repeat-y;
color: #ffffff;
font-family: Arial;
font-size: 10pt;
margin: auto;
width: 750px;
}
ol	li {
padding:3px;
background-color:#ffc;
color:#ffffff;
}
ol li span{ color:#000000; }	
</style>

</head>

<body>

<ol><li><span>$body.=\'&lt;table border="0" align="center"&gt;&lt;form action="csv_store.php" method="Post"&gt;</span></li>
<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td class="vivian"&gt;</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;your file</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt;</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td class="vivian"&gt;</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target file</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt;</span></li>
<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;\';</span></li></ol>

</body>
</html>

Open in new window


When I run the exact same code on my intranet server, this is what I get:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ordered List Test</title>
<style>
ol {
background-color: #000000;
background-repeat: repeat-y;
color: #ffffff;
font-family: Arial;
font-size: 10pt;
margin: auto;
width: 750px;
}
ol	li {
padding:3px;
background-color:#ffc;
color:#ffffff;
}
ol li span{ color:#000000; }	
</style>

</head>

<body>

<ol><li><span>$body.=\'&lt;table border="0" align="center"&gt;&lt;form action="csv_store.php" method="Post"&gt;</span></li>
<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td class="vivian"&gt;</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;your file</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt;</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td class="vivian"&gt;</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target file</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt;</span></li>
<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;\';</span></li></ol>

</body>
</html>

Open in new window

screenshot
Something's going south somewhere and I can't figure it out. It looks fine on my box and my test server, but the moment I put it on my intranet site, I lose the black background of my numbers in my ordered list.

Why?

What do you think?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

brucegustPHP DeveloperAuthor Commented:
FYI: It looks fine in Firefox...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ordered List Test</title>
<style>
ol {
background-color: #000000;
background-repeat: repeat-y;
color: #ffffff;
font-family: Arial;
font-size: 10pt;
margin: auto;
width: 750px;
}
ol	li {
padding:3px;
background-color:#ffc;
color:#ffffff;
}
ol li span{ color:#000000; }	
</style>

</head>

<body>

<ol><li><span>$body.=\'&lt;table border="0" align="center"&gt;&lt;form action="csv_store.php" method="Post"&gt;</span></li>
<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td class="vivian"&gt;</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;your file</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt;</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td class="vivian"&gt;</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;target file</span></li>
	<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt;</span></li>
<li><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;\';</span></li></ol>

</body>
</html>

Open in new window

0
Dave BaldwinFixer of ProblemsCommented:
Well where does it not look fine?  I always use Firefox unless I have a reason to use a different browser.  And it looks like this in Firefox, Chrome, and IE8.
ol display
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brucegustPHP DeveloperAuthor Commented:
Dave, short answer: I don't know. I got it to work, but then what worked with the intranet server that I'm working on doesn't work with Firefox so I just punted, thinking that what I got to work will have to suffice for now.

Here's what I did:

#code_box {
border:1px solid #000000; 
width:807px; 
height:250px; 
overflow:auto; 
background-color: #013c76;
font-family:Arial; 
color:#ffffff; 
font-size:10pt; 
margin:auto;
}

ol {
background-color:#ffc; 
color:#ffffff; 
margin-top:0px; 
margin-bottom:0px;
}

ol li {
padding-top:3px; 
padding-bottom:3px; 
padding-left:3px;
}

ol li span {
color:#000000;
}

Open in new window


Thanks for verifying that I'm not nuts!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.