?
Solved

Why does this code show up differently on the same browser?

Posted on 2014-12-03
7
Medium Priority
?
121 Views
Last Modified: 2014-12-04
Here's my code:

<!DOCTYPE html>
		<html lang="en">
		<head>
		<title>CSV Upload Station</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<meta http-equiv="X-UA-Compatible" content="IE=9" />
	  <meta name="description" content="website description" />
	  <meta name="keywords" content="website keywords, website keywords" />
	  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		
		<script language="JavaScript"><!--
		function MM_jumpMenu(targ,selObj,restore){ //v3.0
		window.open(selObj.options[selObj.selectedIndex].value, "_self"); 
		if (restore) selObj.selectedIndex=0;
		}
		// -->
		</script>
		
			<div id="main" class="header">
				<div id="logo">
					<div id="logo_text">
					<h1><a href="../../index.php"><img src="http://cascsapws1v.nss.vzwnet.com/images/vz.png" width="100" height="100"></a><span class="logo_colour"> South Area System Performance</span></h1>
					</div>
				</div>
				
		<nav>
</nav>

Open in new window


Here's the way it looks on my box:

screenshot
...and here's the way it looks on my server:

another screenshot
Exact same code.

At first I'm thinking, "Perhaps my CSS file isn't being 'seen..' but then my image wouldn't be showing up correctly on either one of my examples.

The bottom line is the background color of my nav bar. I've attached my CSS file. What am I missing? Why will the same code look different? FYI: Both examples are on IE.

What do you think?

By the way, sorry for the huge CSS file. I just figured it would be best to give you the entire file rather than a snippet in case there's something there that's causing a problem.

Thanks!

@font-face { 
  font-family: Droid Sans; 
    src: url('../fonts/DroidSans-webfont.eot'); 
    src: local("Droid Sans"), url('../fonts/DroidSans-webfont.woff'); 
} 

@font-face { 
  font-family: News Cycle; 
    src: url('../fonts/NewsCycle-Regular.eot'); 
    src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf'); 
} 

html { 
  height: 100%;
}

* {
	margin: 0;
	padding: 0;
	
}

/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section { 
  display:block;
}

body { 
  font: normal .80em 'Droid Sans', arial, sans-serif;
  background: #FFF;
  color: #000;
  }

p { 
  padding: 0 0 16px 0;
  line-height: 1.7em;
}

img {
	border: 0;
	margin-left: 10px;
}

h1, h2, h3, h4, h5, h6 { 
  color: #000;
  letter-spacing: 0em;
  padding: 0 0 5px 0;
}

h1, h2, h3 { 
  font: normal 140% 'News Cycle', arial;
  margin: 0 0 15px 0;
  padding: 15px 0 5px 0;
}

h2 { 
  font-size: 160%;
  padding: 9px 0 5px 0;
}

h3 { 
  font-size: 140%;
  padding: 5px 0 0 0;
}

h4, h6 { 
  padding: 0 0 5px 0;
  font: normal 120% 'Droid Sans', arial, sans-serif;
}

h5, h6 { 
  font: italic 100% 'Droid Sans', arial;
  padding: 0 0 15px 0;
}

h6 { 
  font: normal 100% 'Droid Sans', arial;
}

a, a:hover {
	outline: none;
	text-decoration: none;
	color: #cc0000;
}

a:hover {

}

blockquote { 
  margin: 20px 0; 
  padding: 10px 20px 0 20px;
  border: 1px solid #E5E5DB;
  background: #FFF;
}

ul { 
  margin: 2px 0 22px 17px;
}

ul li { 
  list-style-type: circle;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 5px;
  line-height: 1.5em;
}

ol { 
  margin: 8px 0 22px 20px;
}

ol li { 
  margin: 0 0 11px 0;
}

.left { 
  float: left;
  width: auto;
  margin-right: 10px;
}

.right { 
  float: right; 
  width: auto;
  margin-left: 10px;
}

.center { 
  display: block;
  text-align: center;
  margin: 20px auto;
}



#main {
  background: transparent;
}


header {
	/*background: #000000 url(../images/dark.png)*/;
	height: 200px;
}


#logo {
	width: 160px;
	height: 170px;
	color: #FFFFFF;
	padding: 20 0 20 40;
	display: block;
}

#logo #logo_text {
	width: 1200px;
	/*background-image: url(../images/vz.png);
	background-repeat: no-repeat;*/
	height: 50px;
	display: block;
	
}

#logo h1, #logo h2 { 
  font: normal 180% 'News Cycle', arial, sans-serif;
  border-bottom: 0;
  text-transform: none;
  margin: 0;
}

#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
	color: #000000;
	text-align: left;
	width: 75%;
}

#logo_text2 h1, #logo_text2 h1 a, #logo_text2 h1 a:hover {
	color: #000000;
	text-align: left;
}

#logo_text h1 a .logo_colour {
	color: #000000;
	text-shadow: 1px 1px #cc0000;
}

#logo_text a:hover .logo_colour {
	color: #000000;
	background-image: url(../images/vz.png);
	text-indent: 200px;
}

#logo_text h2 { 
  font-size: 130%;
  padding: 0 0 0 0;
  color: #FFF;
}

nav { 
  height: 44px;
  margin: -44px auto 0 auto;
  background-color: #000000; /*menu background color*/
} 

#menu_container {
	width: 1000px;
	padding-left: 100px;	
}

#site_content {
	width: 1000px;
	overflow: hidden;
	margin: 0px auto 0 auto;
	padding: 15px 0 25px 0;
	
} 

#site_content2 {
	width: 1000px;
	overflow: hidden;
	margin: 0px auto 0 auto;
	padding: 15px 0 25px 0;
	height:508px;
} 
#sidebar_container { 
  float: left;
  width: 234px;
  margin: 15px 0 0 5px;
}

#sidebar_container2 { 
  float: left;
  width: 5px;
  margin: 0 0 0 10px;
}

.sidebar { 
  width: 200px;
  margin: 0 0 0px 0;
  padding: 0 15px 5px 13px;}
  
.sidebar h3, .content h1 { 
  padding: 0 15px 20px 0;
  font: 200% 'News Cycle', arial, sans-serif;
  margin: 0 1px;
}

.sidebar h3 { 
  padding: 4px 15px 9px 0;
}

.sidebar ul { 
  margin: 0 0 15px 0;
} 

.sidebar li a, .sidebar li a:hover { 
  color: #000;
  text-decoration: none;
} 

.sidebar li a:hover { 
  text-decoration: underline;
} 

.sidebar_item, .content_item { 
  padding: 15px 0;
}

.content {
	text-align: left;
	width: 75%;
	margin: 0 0 15px 0;
	float: right;
	font-size: 120%;
	padding: 14px 0 0 0;
}
  
.content2 {
	text-align: left;
	width: 100%;
	margin: 0 0 15px 0;
	float: left;
	font-size: 120%;
	padding: 14px 0 0 0;
}

.content3 {
	

}
  
.content ul { 
  margin: 2px 0 22px 0px;
}

.content ul li, .sidebar ul li { 
  list-style-type: none;
  background: url(../images/bullet.png) no-repeat;
  margin: 0 0 0 0; 
  padding: 0 0 4px 28px;
  line-height: 1.5em;
}

footer {
	font: 100% 'Droid Sans', arial, sans-serif;
	height: 125px;
	padding: 28px 0 5px 0;
	text-align: center;
	color: #000000;
	margin-bottom: -20px;  /*border-top: 6px solid #cc00000;*/
}

footer p {
	line-height: 1.7em;
	padding: 0 0 10px 0;
	color: #000000;
}

footer a {
	color: #000000;
	text-decoration: none;
}

footer a:hover {
	color: #FF0000;
	text-decoration: underline;
}

.form_settings { 
  margin: 15px 0 0 0;
}

.form_settings p { 
  padding: 0 0 4px 0;
}

.form_settings span { 
  float: left; 
  width: 200px; 
  text-align: left;
}
  
.form_settings input, .form_settings textarea { 
  padding: 5px; 
  width: 299px; 
  font: 100% 'Droid Sans', arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;  
}
  
.form_settings .submit { 
  font: 100% 'Droid Sans', arial; 
  border: 0; 
  width: 99px; 
  margin: 0 0 0 212px; 
  height: 33px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  background: #1A1225; 
  color: #FFF;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;  
}

.form_settings textarea, .form_settings select { 
  font: 100% 'Droid Sans', arial; 
  width: 299px;
}

.form_settings select { 
  width: 310px;
}

.form_settings .checkbox { 
  margin: 4px 0; 
  padding: 0; 
  width: 14px;
  border: 0;
  background: none;
}

.separator { 
  width: 100%;
  height: 0;
  border-top: 1px solid #D9D5CF;
  border-bottom: 1px solid #FFF;
  margin: 0 0 20px 0;
}
  
table { 
  margin: 10px 0 30px 0;
}

table1 tr th, table tr td {
	
	color: #FFF;
	padding: 7px 4px;
	text-align: left;
	text-shadow: none;
}
  
table tr td { 
  
  color: #47433F;
  border-top: 1px solid #FFF;
}

table1 tr td { 
  
  color: #FFF;
  border-top: 1px solid #FFF;
}

/* scroll to top */
#scroll {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	bottom: 15px;
	right: 0px;
	padding: 0;
	background-color: #cc0000;
}
  
#scroll a { 
  float: right;
  margin: 0 0 0 0; 
  padding: 0 0 0 0;
}
  
#scroll a img { 
  float: right;
  padding: 0 0 0 0;
  margin: 0;
}





/**
Stylesheet for SooperFish by www.SooperThemes.com
Author: Jurriaan Roelofs
**/

/* Configuration of menu width */
html body ul.sf-menu ul,html body ul.sf-menu ul li { 
  width: 150px; /* size of dropdown menu */
}

html body ul.sf-menu ul ul { 
  margin: 0 0 0 150px; /* offset of dropdown menu */
}

/* Framework for proper showing/hiding/positioning */
ul.sf-menu,ul.sf-menu * { 
  margin: 0;
  padding: 0;
}

ul.sf-menu { 
  display: block;
  position: relative;
}
  
ul.sf-menu li { 
  display: block;
  list-style: none;
  float: left;
  position: relative;
}
  
ul.sf-menu li:hover { 
  visibility: inherit; /* fixes IE7 'sticky bug' */ 
}

ul.sf-menu a { 
  display: block;
  position: relative;
}
  
ul.sf-menu ul { 
  position: absolute;
  left: 0;
  width: 10px; 
  top: auto;
  
}
  
ul.sf-menu ul a { 
  /*zoom: 1;  IE6/7 fix */ 
}

ul.sf-menu ul li { 
  float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
  width: 15px;
}
  
ul.sf-menu ul ul { 
  top: 0;
  margin: 0 0 0 15px;
}

ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, 
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul { 
  left: auto;
}
  
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul { 
  left: -999999px;
}

/* autoArrows CSS */
span.sf-arrow { 
  width: 7px;
  height: 7px;
  position: absolute;
  top: 20px;
  right: 5px;
  display: block;
  background: url(../images/arrows-white.png) no-repeat 0 0;
  background: url(../images/arrows-black.png) no-repeat 0 0; 
  overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
  font-size: 1px;
}

ul ul span.sf-arrow { 
  right: 10;
  top: 20px;
  background-position: 0 100%;
}

/* Theming the menu */
ul#nav { 
  float: left;
  
}

ul#nav ul { 
  background: #F8F8F8;
  margin-top: 5px;
  padding-bottom: 10px;
  	font:bold;
	
  
  
}

ul#nav li a { 
  padding:5px 20px 6px 20px;
  font: 150% 'News Cycle', arial, sans-serif;
  text-decoration: none;
  color:#FFF;
  margin-right: 2px;
  
}

/*ul#nav1 li a {
	font: 100% 'News Cycle', arial, sans-serif;
	color: #000000;
	border-left: thin solid #000;
	border-right: thin solid #000;
	text-align: center;
}*/

ul#nav2 li a {
	font: 100% 'News Cycle', arial, sans-serif;
	color: #000000;
	/*border-left: thin solid #000;
	border-right: thin solid #000;*/
	text-align: left;
	

	
}

ul#nav2 li a2 {
	font: 100% 'News Cycle', arial, sans-serif;
	color:#CCC;
	/*border-left: thin solid #000;
	border-right: thin solid #000;*/
	

	
}

ul#nav2 u {
	font: 100% 'News Cycle', arial, sans-serif;
	color: #000000;
	text-align: left;
	font-weight: bold;
}

ul#nav2 li {
	font: 100% 'News Cycle', arial, sans-serif;
	color: #000000;
	font-weight: bold;
	text-align: center;
}


ul#nav li a:hover,ul#nav li a:focus { 
  color: #FFF;
  font:bold;
  /*text-decoration: underline;*/
}

ul#nav1 li a:hover,ul#nav1 li a:focus { 
  color: #000;
  text-decoration: underline;
  
  font: bolder;
}

ul#nav2 li a:hover,ul#nav2 li a:focus { 
  color: #000;
  text-decoration: underline;
  
  font: bolder;
}

.vpt_td {
/*display: inline-block;
border-right:none;
border-left:none;*/
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 14px;
border-color:#7a7a7a;
}



.tbl0{
width: 1%;
/*height: 60px;*/
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 14px;
border-color:#7a7a7a;

}

.tbl1{
width: 1%;
height: 1%;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
font-size: 14px;
border-color:#7a7a7a;
table-layout:auto;

}

.tbl2 {
border-right:none;
border-bottom:none;
}

.tbl3 {
/*display: inline-block;*/
border-right:none;
border-left:none;
border-bottom:none;
}
.usage1{
/*display: inline-block;*/
border-bottom:none;
}
.usage2{
/*display: inline-block;*/
border-right:none;
border-left:none;
border-bottom:none;
}

.tbl4 {/*display: inline-block;*/
border-right:none;
border-left:none;
border-top:none;
}

.tbl5 {
/*display: inline-block;*/
border-right:none;
border-left:none;

}

.main_table {
        height: 400px;
		overflow-x: auto;
        overflow-y: auto;
		width: auto;
}
.event_table {
        height: 400px;
		overflow-x: auto;
        overflow-y: auto;
		width: auto;
}
.venue_table {
        height: 400px;
		overflow-x: auto;
        overflow-y: auto;
		width: auto;
}


a:link {
	color: #000000;
}
a:hover {
	color: #000000;
}

table.csv_sample {
 box-shadow: 7px 7px 15px #e9e9e9;
 border-collapse:separate;
border-radius:6px;
-moz-border-radius:6px;
 margin:auto;
 width:auto;
border: 1px solid #d7d4d4;
 }
 
 td.csv_sample {
padding:5px;
border: 1px solid grey;
 text-align:center;
 background-color:#cccccc;
 }
 
 td.csv_sample_cell {
padding:5px;
border-collapse: collapse;
border: 1px solid grey;
 }
 
 td.title {
 text-align:right;
 }
 
 .conclusion {
width:750px;
margin:auto;
padding:10px;
border: solid #000000 1px;
color:#000000;
box-shadow: 5px 5px 10px #cccccc;
}

Open in new window

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
  • 3
7 Comments
 

Author Comment

by:brucegust
ID: 40479012
The nav div is on line 199 of my CSS code.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40479029
Maybe there is an old css file in the cache - try an hard refresh.
0
 

Author Comment

by:brucegust
ID: 40479084
Just tried it (deleted browsing history including cached items) and nothing changed.

And Gary, just so you know, if I eliminate the line that references the CSS file and let the server process the black nav bar at the line level, I get my black bar. It's only when I try to reference it via the CSS file that I get a blank stare from my server.

So, in other words, here's my "experimental code..."

<!DOCTYPE html>
		<html lang="en">
		<head>
		<title>CSV Upload Station</title>
		<!--<link href="css/style.css" rel="stylesheet" type="text/css" />-->
		<meta http-equiv="X-UA-Compatible" content="IE=9" />
	  <meta name="description" content="website description" />
	  <meta name="keywords" content="website keywords, website keywords" />
	  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		
		<script language="JavaScript"><!--
		function MM_jumpMenu(targ,selObj,restore){ //v3.0
		window.open(selObj.options[selObj.selectedIndex].value, "_self"); 
		if (restore) selObj.selectedIndex=0;
		}
		// -->
		</script>
		
			<div id="main" class="header">
				<div id="logo">
					<div id="logo_text">
					<h1><a href="../../index.php"><img src="http://cascsapws1v.nss.vzwnet.com/images/vz.png" width="100" height="100"></a><span class="logo_colour"> South Area System Performance</span></h1>
					</div>
				</div>
				
		<nav style="background-color:#000000; width:100%; height:25px;">
</nav>

Open in new window


...and here's the result:

screenshot
Not sure if that inspires an epiphany in your mind, but I'm throwing everything I've got against the wall, hoping that something will stick.

What do you think?
0
Technology Partners: 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!

 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40479090
Then the path to the css file must be wrong/the path is to the wrong css file.
0
 

Author Comment

by:brucegust
ID: 40479575
Gary, thanks for weighing in. I figured it out and wanted to share, just because it took several hours to finally stumble on the answer and I've got to tell somebody...

The page is written totally in PHP using a clever spin on OOP. The page is the object and all the HTML is reproduced using functions which are then categorized under either "Model, "View" or "Controller." It's cool and I wish I could say it was my idea.

In any event, the sequence of the header was off. Instead of the CSS dynamic being printed after the metatags, it was going before. Never knew that could make a difference, but that was the dealbreaker. Once I made the change, all was well.

Thanks for your help!
0
 
LVL 58

Expert Comment

by:Gary
ID: 40479584
At least you found the reason, though that shouldn't make a difference evidenced by the fact it works locally.
0
 

Author Comment

by:brucegust
ID: 40482151
I know, but it made "a" difference even if it shouldn't be "the" difference...
0

Featured Post

Industry Leaders: 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!

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
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 add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month15 days, 2 hours left to enroll

771 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