Solved

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

Posted on 2014-11-14
6
59 Views
Last Modified: 2014-11-17
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?
0
Comment
Question by:brucegust
  • 4
  • 2
6 Comments
 

Author Comment

by:brucegust
ID: 40443871
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40444330
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
 

Author Comment

by:brucegust
ID: 40447403
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

Author Comment

by:brucegust
ID: 40447425
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
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 40447859
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
 

Author Comment

by:brucegust
ID: 40448133
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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

805 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question