?
Solved

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

Posted on 2014-11-14
6
Medium Priority
?
68 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 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month12 days, 23 hours left to enroll

578 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