firefox not looking like ie

[paulmo]

Here's my site. Built it using notepad/ie, looks great, but firefox not so much: seems css px size, text color (!) is not being executed properly. the floating columns are overlapping on the header, that's why i tried absolute position for header pic. any help is appreciated, as would like firefox to look as good as ie. thanks, css below:

body		{			margin-top: 0%; 			margin-right: px; 			margin-bottom: 0px; 						margin-left: px;			padding: 0;			color:;			font-size: 100%;			font-family: arial, helvetica, 						sans-serif;			background-color: whitesmoke;		}				#header		{				width: 97%;			float: center;			height: 33px;			background-color: #D3D3D3; 			margin-bottom:;			margin-left: 13px;			margin-right: px;		}		#footer		{				width: 97%;			float: center;			height: 33px;			background-color: #D3D3D3; 			margin-left: 7px;			margin-right: 7px;		}				#gutter		{			float: left;			width: %;			height: 1px;		}				#col1		{	height: 670px;			float: left;			width: 41%;			background-color:white;			margin-top: 25px;			margin-bottom: 2px;			margin-left: 7;			padding: .5em;			text-align: bottom;		}				#col2		{			float: left;			width: 55%;			height: 670px;			background-color:white;			margin-top: 25px;			margin-bottom: 2px;			margin-left: 7px;			padding: .5em;		}				#col3		{	height: px;			float: right;			width: 35%;			margin-top: 110px;			margin-right:;			margin-bottom:7px;			margin-left: 7px;			padding:;			background-color: yellow;				}				#col4		{			float: left;			width: 90%;			background-color: white;			margin-top: 7px;			margin-bottom: 7px;			margin-left: 7px;			margin-right: px;			padding: .5em;		}		#col5		{			float: right;			width: 30%;			background-color:;			margin-top:;			margin-bottom: 7px;			margin-left: 7px;			padding: .5em;		}						h1		{	font-size: 135%;			color: gray;			margin-top: 0;			padding-top: 3px;			text-align: center;		}				h2		{	font-size: 135%;			color: #2F4F4F;			margin-top: 0;			padding-top: 3px;			text-align: center;		}				h3		{	font-size: 135%;			color: black;			margin-top: 0;			padding-top: 3px;			text-align: center;		}		h4		{	font: arial;			font-size: 90%;			color: #191970; 			text-align: center;			line-height: 1.3;					}		h5		{	font-size: 90%;			color: #2F4F4F;			margin-top: 0;			padding-top: 2px;			text-align: center;		}			background-image: url(plasma.png);	background-size: 100%;	background-origin: content}					}		p		{	font: arial;			font-size: 10pt;			color: #191970; 			text-align: left;			line-height: 1.3;			}		A:link {text-decoration: none; color: blue;}A:visited {text-decoration: none; color: blue;}A:active {text-decoration: none; color: blue;}A:hover {text-decoration: none; color: red;}		#col1 ul		{			list-style-type: none;			padding: 0;			margin: 0;		}				#col1 ul li {margin-top: 7px; }				#col1 ul li a		{  			display: block;			width: 150px;			padding: 3px 5px 3px 10px;			text-decoration: none;			color: lightyellow;			background-image: url(menu.gif);			background-repeat: repeat-y;		}				#col1 ul li a:hover		{			color: whitesmoke;			background-color:;			background-image: url(menu2.gif);			background-repeat: repeat-y;}.floatright{float: right;margin: 3px 0px 0px 3px;border:;padding: 2px;}.dropcap {  float: left;  font: normal 35pt/0.7em Georgia,  Helvetica, Verdana, Arial,   sans-serif;  color: #191970;  margin-right: 3px;}input.formInputButton  {	font-size: 1.2em;	vertical-align: middle;	font-weight: bolder;	text-align: center;	color: #666;	background: #f99 url(bg_button.png) repeat-x;	padding: 1px;	border: solid 1px #f66;	float: right; 	cursor: pointer;	}input.formInputText  {	font-size: .8em;	color: #666;	background-color: #fee;	padding: 2px;	border: solid 1px #f66;	margin-right: 5px;	margin-bottom: 5px;	height: 15px;	}.buttons {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 14px;  background-color: whitesmoke;  color: #191970;  margin-right: 6px; margin-top: 7px; margin-left: 23px; border: solid 1px gray;}.buttonsb {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 13px;  background-color: white;  color: #191970;  margin-right: 6px; margin-top: 7px; margin-left: 0px; border: solid 1px gray;}.absolute-image {	position:absolute;	left:13px;	top: 1px;	bottom:;}

[Ingolme]

I put the CSS file in the validator and got these results:

4 body Value Error : margin-right px is not a margin-right value : px5 body Value Error : margin-left px is not a margin-left value : px7 body Value Error : color Parse Error :10 body Value Error : background-color whitesmoke is not a color value : whitesmoke16 #header Value Error : float center is not a float value : center19 #header Value Error : margin-bottom Parse Error :21 #header Value Error : margin-right px is not a margin-right value : px26 #footer Value Error : float center is not a float value : center36 #gutter Value Error : width Lexical error at line 36, column 20. Encountered: "%" (37), after : "" %;37 height Value Error : width Parse Error height: 1px;38 height Value Error : width Parse error - Unrecognized }47 #col1 Value Error : margin-left only 0 can be a length. You must put an unit after your number : 749 #col1 Value Error : text-align bottom is not a text-align value : bottom65 #col3 Value Error : height px is not a height value : px70 #col3 Value Error : margin-right Parse Error :73 #col3 Value Error : padding Parse Error :85 #col4 Value Error : margin-right px is not a margin-right value : px92 #col5 Value Error : background-color Parse Error :93 #col5 Value Error : margin-top Parse Error :124 h4 Value Error : font arial is not a font-size value : arial139 background-image Parse Error background-image: url(plasma.png);140 background-size Parse Error background-size: 100%;141 background-origin Parse Error background-origin: content}144 background-origin Parse error - Unrecognized }146 p Value Error : font arial is not a font-size value : arial175 #col1 ul li a Value Error : color lightyellow is not a color value : lightyellow182 #col1 ul li a:hover Value Error : color whitesmoke is not a color value : whitesmoke183 #col1 ul li a:hover Value Error : background-color Parse Error :191 .floatright Value Error : border Parse Error :231 .buttons Value Error : background-color whitesmoke is not a color value : whitesmoke247 .absolute-image Value Error : bottom Parse Error :

[paulmo]

thanks for that. how is that helping my site look good on firefox? i'm not seeing how it is.

[Ingolme]

You have to solve all those errors.If the CSS is not valid it won't display properly in all browsers.Example:This piece of code is probably corrupting everything after it:

	background-image: url(plasma.png);	background-size: 100%;	background-origin: content}

For one, I'm quite sure there isn't even a "background-origin" property. And of course, you have to assign these properties to an element or class (I don't know which one it's supposed to be but there has to be something you deleted or didn't write). It has to look something like this:

   /* Note: This is not going to do anything because there's probably no element with the id "object"*/	div#object {	background-image: url(plasma.png);	background-size: 100%;	}

That's just one mistake, a whole lot of other ones are because you've written properties and haven't given them any values:margin-right: px; width: %;color:;... and so on, there are too many to count.Finally, you're naming colors that don't exist in CSS, such as "lightyellow" and "whitesmoke". Try using hex codes instead.

[paulmo]

thanks i've deleted the png, must have overlooked it. the colors are working fine though. main issue is in firefox the columns are eclipsing the header, not so in ie, and firefox is not executing the paragraph (p) font and color, which i'm thinking should be really basic!

[Ingolme]

Try using font-family instead of fontp {font-family: Arial;/* ... */}And until your CSS validates in the validator, I can't help you much with your CSS.Listen to what I told you earlier: delete or fill in all the properties that have empty values. A parse error in CSS can cause other properties not to be interpreted.Apart from that, you've given two separate elements the same id ("header"), which isn't legal in HTML.You should give the second one the id "footer" and give it the property "clear: both".

[jlhaslip]

57 errors on the link in the opening post still. The p tags might be affected by one of those.As to the header being whacked, your heqder is given a height of 33 px and the image in it is considerable taller, so, with the absolute positioning, the columns are creeping up because of the difference in heights. Give the header a height of 63 px and lose the absolute positioning.And check all those errors.

[paulmo]

thanks so much what a difference! only thing is paragraph text color not executing in either mozilla or ie now. tried color (works in ie), text-color...?

body		{			margin-top: 0%; 			margin-bottom: 0px; 						padding: 0;			font-size: 100%;			font-family: arial, helvetica,; 					sans-serif;			background-color: whitesmoke;		}				#header		{				width: 97%;			float: center;			height: 47px;			margin-left: 5px;					}		#footer		{				width: 97%;			float: center;			height: 39px;			background-color: #D3D3D3; 			margin-left: 7px;			margin-right: 7px;			clear:both;		}				#gutter		{			float: left;			height: 1px;		}				#col1		{	height: 670px;			float: left;			width: 41%;			background-color:white;			margin-top: 25px;			margin-bottom: 2px;			margin-left: 9px;			padding: .5em;			text-align: bottom;		}				#col2		{			float: left;			width: 51%;			height: 670px;			background-color:white;			margin-top: 25px;			margin-bottom: 2px;			margin-left: 7px;			padding: .5em;		}				#col3		{				float: right;			width: 35%;			margin-top: 110px;			margin-bottom:7px;			margin-left: 7px;			background-color: yellow;				}				#col4		{			float: left;			width: 90%;			background-color: white;			margin-top: 7px;			margin-bottom: 7px;			margin-left: 7px;			margin-right: px;			padding: .5em;		}		#col5		{			float: right;			width: 30%;						margin-bottom: 7px;			margin-left: 7px;			padding: .5em;		}						h1		{	font-size: 135%;			color: gray;			margin-top: 0;			padding-top: 3px;			text-align: center;		}				h2		{	font-size: 135%;			color: #2F4F4F;			margin-top: 0;			padding-top: 3px;			text-align: center;		}				h3		{	font-size: 135%;			color: black;			margin-top: 0;			padding-top: 3px;			text-align: center;		}		h4		{	font: arial;			font-size: 90%;			color: #191970; 			text-align: center;			line-height: 1.3;					}		h5		{	font-size: 90%;			color: #2F4F4F;			margin-top: 0;			padding-top: 2px;			text-align: center;		}		   		p		{	font-family: arial;			font-size: 10pt;			text-color: #191970; 			text-align: left;			line-height: 1.3;			}		A:link {text-decoration: none; color: blue;}A:visited {text-decoration: none; color: blue;}A:active {text-decoration: none; color: blue;}A:hover {text-decoration: none; color: red;}		#col1 ul		{			list-style-type: none;			padding: 0;			margin: 0;		}				#col1 ul li {margin-top: 7px; }				#col1 ul li a		{  			display: block;			width: 150px;			padding: 3px 5px 3px 10px;			text-decoration: none;			color: lightyellow;			background-image: url(menu.gif);			background-repeat: repeat-y;		}				#col1 ul li a:hover		{			color: whitesmoke;			background-color:;			background-image: url(menu2.gif);			background-repeat: repeat-y;}.floatright{float: right;margin: 3px 0px 0px 3px;border:;padding: 2px;}.dropcap {  float: left;  font: normal 35pt/0.7em Georgia,  Helvetica, Verdana, Arial,   sans-serif;  color: #191970;  margin-right: 3px;}input.formInputButton  {	font-size: 1.2em;	vertical-align: middle;	font-weight: bolder;	text-align: center;	color: #666;	 background-color: #fee;repeat-x;	padding: 1px;	border: solid 1px #f66;	float: right; 	cursor: pointer;	}input.formInputText  {	font-size: .8em;	color: #666;	background-color: #fee;	padding: 2px;	border: solid 1px #f66;	margin-right: 5px;	margin-bottom: 5px;	height: 15px;	}.buttons {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 14px;  background-color: whitesmoke;  color: #191970;  margin-right: 6px; margin-top: 7px; margin-left: 23px; border: solid 1px gray;}.buttonsb {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 13px;  background-color: white;  color: #191970;  margin-right: 6px; margin-top: 7px; margin-left: 0px; border: solid 1px gray;}

[Ingolme]

Your CSS still doesn't validate.Copy your code, paste it here: http://jigsaw.w3.org/css-validator/validat...lidate_by_inputRead each error and go to the indicated line to see what the problem is.

[paulmo]

thanks that's a great tool. still not getting one form to play fair in mozilla; not executing paragraph text/color; have tried with and w/out <p> tags. strangely, another form executes fine on html page (using <p> tags). all buttons executing fine.

<form method="post" action="contact.php"> <input type="hidden" name="redirect" value="redirect.php" /><p>E-mail: </p><input name="email" type="text" cols="25" class="buttonsb"><br><p>Message:</p> <textarea name="message" rows="9" cols="50" class="buttonsb"></textarea><br> <input type="submit" name="submit" value="Send" class="buttons"/> </form> </p>

css form code:

input.formInputButton { font-size : 10pt; vertical-align : middle; font-weight : bolder; text-align : center; color : #151b54; background : #f99 repeat-x; padding : 1px; border : 1px solid #f66; float : right; cursor : pointer; } input.formInputText { font-size : 10pt; color : #151b54; background-color : #fee; padding : 2px; border : 1px solid #f66; margin-right : 5px; margin-bottom : 5px; height : 15px; }