?
Solved

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

Posted on 2014-11-14
6
Medium Priority
?
64 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 84

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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 84

Accepted Solution

by:
Dave Baldwin earned 2000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses
Course of the Month9 days, 9 hours left to enroll

762 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