Solved

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

Posted on 2014-11-14
6
54 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
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:brucegust
Comment Utility
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 82

Accepted Solution

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

744 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now