Random text color change in Firefox...why?

[Graycode]

For some reason when i view http://roots.sodesigns.co.uk in FF the text on the first page is a completely different color than any other browser. This is my code :

body {
	font: 75%/150% "Trebuchet MS", Tahoma, Arial;
	color: #333333;
	/*background: #FFFFFF url(images/main-bg.gif);*/
        background: #c0c0c0;
	margin: 0px;
	padding: 0px 0px 40px;
}
a {
	color: #CC6600;
	text-decoration: none;
}
a:visited {
	color: #CC6633;
	text-decoration: none;
}
a:hover {
	color: #FF6600;
	text-decoration: underline;
}
p {
	padding: 0px 0px 15px;
	margin: 0px;
}
h1 {
	text-align:center;
	font-size:18px;
	color: #333333;
	margin:0px;
	font: Verdana, Arial, sans-serif;
}
h1 a{
	color: #c9eefe;
	text-decoration: none;
}
h1 a:visited{
	color: #c9eefe;
	text-decoration: none;
}
h1 a:hover{
	color: #ffffff;
	text-decoration: none;
}

h2.pageheader {
	font-size:14px;
	font
	color: #333333;
	margin: 0px 0px 2px;
	font: Verdana, Geneva, Arial, sans-serif;
	padding: 3px 3px 3px 3px;
	text-align: center;
}

h2.page {
	font-size:14px;
	color: #333333;
	margin: 0px 0px 2px;
	font: Verdana, Geneva, Arial, sans-serif;
	padding: 3px 3px 3px 3px;
	text-align: center;
}

h2 {
	font-size:14px;
	color: #333333;
	margin: 0px 0px 2px;
	font: Verdana, Geneva, Arial, sans-serif;
	padding: 3px 3px 3px 3px;
	text-align: center;
}
h2 a, h2 a:visited {
	color: #59770e;
	text-decoration: none;
}
h2 a:hover {
	color: #FF6600;
	text-decoration: none;
}
/*h3 {
	font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
	color: #758d38;
	margin: 10px 0px 5px;
}*/
form {
	margin:0px;
	padding:0px;
}
#page {
	margin: 0px auto;
	width: 847px;
	/*border-bottom: 5px solid #d5e6eb;
	border-left: 5px solid #d5e6eb;
	border-right: 5px solid #d5e6eb;*/
	background: #FFFFFF /*url(images/content-bg.gif) repeat-y*/;
}
#header {
	height:419px;
	background: url(images/header.jpg) no-repeat;
	position: relative;
}
#lightbox {
	color:#FFF;
	height:70px;
	width:480px;
	padding:360px 0px 0px 20px;
	font-size:14px;
	
}
/*		#headerimg {
position: relative;
padding: 30px 0px 0px 40px;
	height: 60px;
}

/*#headerimg .description{
	position: absolute;
	left: 110px;
	bottom: 3px;
	color: #c9eefe;
	font-size: 14px;
}*/
#nav {
	width:847px;
	background:#FFF;
list-style: none;
	margin: 0px;
	position: relative;
	font-size:14px;
	padding-top: 0px;
	margin: 7px 60px 7px 60px;
/*		right: 100px;
	bottom: 100px;*/
}
#nav li {
	float: left;
	margin-left: 5px;
}


#searchbanner{
	float:left;
	background: #8d8d8d;
		width:847px;
		height:30px;
	position: relative;
	
}

#searchform {
	/*background: #000000 url(images/searchform-bg.gif) repeat-x;*/
	position: absolute;
	margin: 4px 0px 0px 630px;
	width: 273px;
	height:40px;
	float:right;
}
#content {
	margin: 10px 0px 10px 0px;
	/*padding: 0px 0px 30px 0px;*/
	float: left;
	height:auto;	
	width: 847px;
	overflow: hidden;
}

#textcontent {
	margin:0px 20px 0px 20px;
	width: 580px;
	text-align:justify;
}

#sidebar {
	background-color:#CCCCCC;
	float:right;
	position:absolute;
	top:474px;
	right:207px;
	width:15%;
	height:200px;
	float:right;
	
	
	/*top:474px;
	right: 30px;
	
 	margin:0px 177px 30px 27px;
	width: 220px;
	height:auto;
	float:inherit;
	*/
}


#sidebar h3 { /*for text headers in sidebar*/
	
	font: normal 140%/100% "Trebuchet MS", Tahoma, Arial;
	color: # ;
	margin: 10px 0px 5px;
}

/*------------------------------------------ Box 1------------------------------------------*/
#box1{
	width:214px;
	float:left;
}

#img1{
	width:214px;
	height:194px;
	background:url(images/whatsnew_pic.jpg) no-repeat;
}
#txt1{
	padding: 40px 0px 0px 0px;
	width:214px;
	height:174px;
	background: url(images/whatsnew_text.jpg) no-repeat;
	font-size: medium;
}
/* ------------------------------------------END Box 1------------------------------------------*/

/* ------------------------------------------ Box 2 ------------------------------------------*/

#box2{
	width:207px;
	float:left;
}
#img2{
	width:207px;
	height:194px;
	float:left;
	background:url(images/products_pic.jpg) no-repeat;
}
#txt2{
	padding: 40px 0px 0px 0px;
	float:left;
	width:207px;
	height:174px;
	background: url(images/products_text.jpg) no-repeat;
}

/* ------------------------------------------END Box 2------------------------------------------*/

/* ------------------------------------------ Box 3------------------------------------------*/

#box3{
	width:213px;
	float:left;
}
#img3{
	width:213px;
	height:194px;
	float:left;
    background:url(images/salons_pic.jpg) no-repeat;

}
#txt3{
	padding: 40px 0px 0px 0px;
	width:213px;
	height:174px;
	float:left;
	background:url(images/salons_text.jpg) no-repeat;
}

/* ------------------------------------------ END Box 3------------------------------------------*/


/* ------------------------------------------ Box 4------------------------------------------*/

#box4{
	width:213px;
	float:left;
	
}
#img4{
	width:213px;
	height:194px;
	float:left;
    background:url(images/press_pic.jpg) no-repeat;
}

#txt4{
	padding: 40px 0px 0px 0px;
	width:213px;
	height:174px;
	float:left;
	background:url(images/press_text.jpg) no-repeat;
}

/* ------------------------------------------ END Box 4------------------------------------------*/

/* ------------------------------------------ Text settings ------------------------------------------*/

 
#searchform label {
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
}

#footer {
	clear: both;
	background: #048DB4 url(images/footer.jpg) no-repeat;
	height:180px;
	
	font-size: 95%;
	line-height: 130%;
}
#footer a, #footer a:visited{
	color: #ffffff;
}
#footer .left-col{
	width: 240px;
	float: left;
	margin-left: 10px;
}
#footer .right-col{
	width: 220px;
	float: right;
	padding-right: 10px;
	padding-left: 10px;

}
#footer h4 {
	font: normal 146%/100% "Trebuchet MS", Tahoma, Arial;
	color: #9cdbfb;
	margin: 10px 0px 5px;
}
.recent-comments {
	list-style: none;
	margin: 0px;
	padding: 0px;
	line-height: 110%;
}
.recent-comments li{
	background: url(images/mini-footer-comments.gif) no-repeat;
	padding: 0px 0px 10px 20px;
}
.recent-comments a{
	font-size: 105%;
	line-height: 130%;
	font-weight: bold;
}
.recent-posts {
	list-style: none;
	margin: 0px;
	padding: 0px;
	font-size: 92%;
	line-height: 110%;
}
.recent-posts li{
	background: url(images/mini-footer-post.gif) no-repeat;
	padding: 0px 0px 10px 20px;
}
.recent-posts a{
	font-size: 115%;
	line-height: 130%;
	font-weight: bold;
}
#credits {
	margin: 0px auto;
	width: 847px;
	color: #000000;
	font-size: 85%;
	line-height: 120%;
}
#credits a, #credit a:visited{
	color: #404040;
}
.rss {
	background: url(images/mini-rss.gif) no-repeat left center;
	padding-left: 18px;
	padding-bottom: 2px;
	margin-left: 10px;
}
.left {
	float: left;
}
img.left, a img.left {
	float:left;
	margin: 4px 10px 5px 0px;
	border: 1px solid #bdd77f;
	padding: 3px;
	background: #FFFFFF;
}
a:hover img.left{
	border-color: #FF6600;
	background: #FF6600;
}
.right {
	float: right;
}
img.right, a img.right {
	float:left;
	margin: 4px 10px 5px 0px;
	border: 1px solid #bdd77f;
	padding: 3px;
	background: #FFFFFF;
}
a:hover img.right{
	border-color: #FF6600;
	background: #FF6600;
}
.clear {
	clear:both;
}
hr.clear {
	clear:both;
	visibility: hidden;
	margin: 0px;
	padding: 0px;
}
img.img_border, a img.img_border {
	border: 1px solid #bdd77f;
	padding: 3px;
	background: #ffffff;
}
a:hover img.img_border{
	border-color: #FF6600;
	background: #FF6600;
}

Please help! It was working well before so confused!!?

Thanks

[Dandello]

Well, your h1 tag is #333333 and your h1 a is #c9eefe (light blue) with a #ffffff hover.

For whatever reason FF is seeing the h1 inside a link as a h1 a while Safari renders the same h1 tag as #333333 - the hover also doesn't work in Safari - it underlines the link on mouseover even though you have text-decoration:none on the a tags.

The same thing is happening with the h2 tags. FF is rendering the h2 inside the a as an h2 a.

If you want it Safari to render it like FF, put the links inside h1 and h2 tags, otherwise, change the colors of the h1 a and h2 a to match the h1 and h2.

BTW, in my MSIE8, all the widths are off - the main graphic is too narrow and there isn't enough room for all four boxes to be side by side.

[Graycode]

Dandello, you are fab! Thanks for the tips (I had implemented the above before you responded though). You mentioned MSIE8... I'm working on a Mac, but a recent version is unavailable... is there a way to test browser compatibility online perhaps? (Silly question, but if I don't ask, I don't know...)

[Dandello]

I'm not sure that it's a matter of compatibility - this is one of the few sites I've run across that MSIE8 has had issues with - check the page's validation first. There are a number of validation issues such as all those extra stylesheet calls (two of which are above the HEAD tag), some ULs missing, DIVs (block elements) inside A elements (inline) any one of which could cause MSIE to choke.

Fix those problems and chances are very good that the MSIE8 issues will disappear.

Then see if anybody you know will let you look at the site using their Windows machine. (Or make friends with the gamer down the street.)

[Graycode]

I'll do that thank you. It may have to be the gamer down the street though! In terms of validation, I ran it through w3c last week and 4 errors arose mentioning 'frameset'... maybe best useful in a wordpress forum but i'll try it nonetheless. The version of the site is a lot older than running locally so i will definitely give it another go once updated.

Thanks alot once again for your help Dandello.

[Dandello]

If the validation issues have been taken care of, then chances are that the final version will look fine in MSIE8. (I don't know if you're in the UK or US. If you're in the US, chances are the local public library will have a computer running Windows, or one of the community college libraries.)