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