Jump to content

Local Testing Fine But Not On Server


Kingy

Recommended Posts

I've encountered a strange problem I haven't seen before.I whipped up a very quick registration/login page that is made up of 2 divs next to each other.These work fine in Firefox and Opera but lo and behold not in IE.Funny thing is if I test this page in IE locally, everything looks fine.However once I upload the files onto the server and look at it normally, there are a number ofstrange problems like it does not space out the list properly, the clearing div doesn't seem towork etc.I found that strange because it is fine locally but not online. Can anyone explain this? It probably even isn't a CSS problem to be fair but I'm not entirelysure what's happening here, thanks in advance!http://cpulse.dmu.ac.uk/login.htmldemo.css

body,p,td,quote,small,form,input,ul,li,ol,label{	/* resetting our page elements */	font-family: Verdana, Arial, Helvetica, sans-serif;	margin: 0 auto;	padding:0px;}body{	/* styling the body */	width:969px;	color: #FFF;	font-size:13px;	background-color: #333;	margin:0 auto;	padding:0px;}/* Link styling */a:link {	color: #993300;	text-decoration: none;}a:visited {	color: #993300;	text-decoration: none;}a:hover {	color: #CCCCCC;	text-decoration: none;}a:active {	color: #993300;	text-decoration: none;}.clear{	/* the clearfix hack */	clear:both;}#rounded{	/* the outermost div element */	width:969px;	margin:0px auto;	/*center it on the page*/	background-color:#000;	top:1px;}.container1{	/* navigation, titles*/	width:969px;	background-color: #000000;	margin:0px auto;	/*center it on the page*/	z-index: 1;	margin:0;	padding-top: 20px;	clear:both;}.container2{	/* navigation, titles*/	width:969px;	background-color: #000000;	margin:0px auto;	/*center it on the page*/	z-index: 1;	margin:0;	clear:both;	padding-top: 130px;	height:100%;}.headercont{	margin:0px auto;	/*center it on the page*/	width:969px;	z-index: 1;}.featheader{ /* for trying to fix the issues with flash overlapping the wrong parts with respect to z-index */    z-index: 0;	background-color:#000;	width:969px;}.contalign{text-align:left;margin: 0 auto; padding-top:10px; padding-bottom: 10px;}#pageContent{	/* the container that holds AJAX loaded content *//*anything to style the inside content bits like border*/border:none;margin:0 auto;}#loading{	/* hiding the rotating gif graphic by default */	visibility:hidden;} /* position:fixed */ .outer { position:fixed; text-align:center; top:0; background-color:#000;}  /* certering */ .middle { display:table; margin:0 auto; background-color:#000;} .inner {	 text-align:left;	background-color:#000;	width:969px;	}	/* Music Page column layouts */#midcol {		background: #000;		width: auto;		text-align: center;		float:left;		padding-top: 6px;}#leftcol	{		background: #000;		width: auto;		margin: 0; padding: 6px;					float:left;}#rightcol {		background: #000;		width: auto;		margin: 0; padding: 6px;		float: left;}/* menu list styling */#menu ul{list-style: none;padding: 0;margin: 0;} #menu li{float: left;margin: 0 1em;text-align:left;}.clear {	height:1px;	margin:0 0 -1px 0;	clear:both;	overflow:hidden;}/*footer styling*/h4 {color:#000}.footdiv {width:969px; text-align:center; background-color:#cccccc;}.footwrap {text-align:left;}.footlist{background-color:#cccccc; width:16%; float:left; position:relative; padding:10px;}.footlist1{background-color:#cccccc; width:12%; float:left; position:relative; padding:10px;}.footlist2{background-color:#cccccc;width:62%; float:left; text-align:center; position:relative; padding:10px;}.footul{list-style-type:none; margin-left: 0.5em;}/* Form Styling */.myform {	margin-top: 1em;	margin-bottom: 0.3em;	padding-left:3em;	padding-bottom:40px;}.subtext {font-size: 0.8em;}.definetxt {font-weight:bold;	text-indent: 10px;}.button {background: #333333; padding: 20px; margin-left: 100px; text-align:center; border:medium #000000; width:30%; font-weight:bold;}.button2 {background: #333333; padding:20px; margin-left: 100px;  text-align:center; border:medium #000000; font-weight:bold;}/*upload styling */.fileslist {	padding-top: 5px 0 3px 0;	text-indent: 0px;	}.indent1 {text-indent: 20px;}.termbox {background-color:#333333; padding: 10px;}.editbox {background-color:#000000; width:25%; float:left; padding: 20px; border:thick #993300 double;}.editbox2 {background-color:#000000; float:left; padding: 20px; border:thick #993300 double;}	/*lightbox effects*/	#filter	{		display: none;		position: absolute;		top: 0%;		left: 0%;		width: 100%;		height: 100%;		background-color: #333;		z-index:10;		opacity:0.5;		filter: alpha(opacity=50);	}			#box 	{		display: none;		position: absolute;		top: 30%;		left: 30%;		margin:0;		z-index:101;		overflow: none;		text-align:center;	}		#boxtitle	{		position:absolute;		float:center;		top:0;		left:0;		padding:0;		margin:0;		color:white;		text-align:center;		font-weight:bold;	}		/* login register page*/#regcol	{		background: #000;		width: 50%;		margin: 0; padding: 0;					float:left;}#logcol {		background: #000;		width: 50%;		margin: 0; padding: 0;		float: right;}.formcol { padding: 10px;}.formsty {	list-style-type: none;	}

Link to comment
Share on other sites

the most immediate problem that sticks out to me is the number of validation errors on your page. (both HTML and CSS). Maybe try switching to a strict doctype? As far as the spacing goes, in FF it doesn't seem to "line up neatly", as I think that is what you were intending.What version of IE are you using? And how were you spacing out your elements? Are you trying to get all the input boxes to line up in a row?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...