AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of Bruce Gust
Bruce Gust
Flag for United States of America

asked on 

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

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

CSS
Avatar of undefined
Last Comment
Bruce Gust
8/22/2022 - Mon
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent