I'm currently having issues with my portfolio site www.richard-wood.co.uk. When viewed in Opera it works perfectly. However Safari and Firefox let the team down and the design becomes disjointed. It was working fine with the original layout but I can't figure out what I've changed to ruin it that badly. I've included the CSS code below so hopefully some one can spot what i've done wrong! It's driving me up the wall.

thanks for your help

Rich

/* CSS Document */

body,td,th {
margin-top:0px;
margin-left:0px;
background-color:#ffffff;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #ffffff;
}

a:link {
color: #333333;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
color: #999999;
}
a:active {
text-decoration: none;
text-decoration: #333333;
}

#Layer1 {
position:absolute;
width:229px;
height:177px;
z-index:1;
background-image: url(htdocs/Images/h1.gif);
}
#mainOrangeTop {
position:absolute;
width:500px;
height:177px;
z-index:2;
left: 234px;
top: 0px;
background-image: url(Images/h1.gif);
}
#leftOrangeTop {
position:absolute;
width:229px;
height:177px;
z-index:3;
background-image: url(Images/h1.gif);
}
#linkBoxBrown {
position:absolute;
width:189px;
height:122px;
z-index:4;
left: 0px;
top: 182px;
background-color: #442222;
padding: 20px;
a:link;{
color: #935800;
text-decoration: none;
}
a:visited;{
text-decoration: none;
color: #935800;
}
a:hover;{
text-decoration: underline;
color: #ffffff;
}
a:active;{
text-decoration: none;
text-decoration: #935800;

}

#robotPic {
position:absolute;
width:500px;
height:162px;
z-index:5;
left: 234px;
top: 182px;
background-image: url(htdocs/Images/h4.jpg);
}
#underPicBar {
position:absolute;
width:490px;
height:26px;
z-index:6;
left: 234px;
top: 349px;
background-color: #F04C04;
}
#creamTextBox {
position:absolute;
width:229px;
height:220px;
z-index:7;
left: 0px;
top: 349px;
background-color: #eeeeee;
background-image: url(Images/greyflow.png);
}
#mainTextBox {
position:absolute;
width:460px;
height:144px;
z-index:8;
left: 234px;
top: 385px;
background-color: #ff9900;
}
#bottomBrownBarLeft {
position:absolute;
width:229px;
height:31px;
z-index:9;
background-color: #442222;
left: 0px;
top: 574px;
}
#bottomBrownBarRight {
position:absolute;
width:500px;
height:31px;
z-index:10;
background-color: #442222;
left: 234px;
top: 574px;
}
#orangeRpt {
position:absolute;
width:100%;
height:177px;
z-index:1;
left: 739px;
background-color: #FF6600;
background-image: url(Images/h1.gif);
top: 0px;
}
#flowerBox {
position:absolute;
width: 206px;
height: 300px;
z-index:1;
right: 0px;
top: 214px;
}
.dateText {
letter-spacing: normal;
text-align: right;
vertical-align: middle;
word-spacing: normal;
}
#whiteLinkBox {
position:absolute;
width:190px;
height:179px;
z-index:11;
left: 10px;
top: 359px;
background-color: #FFFFFF;
filter:alpha(opacity=75);
opacity: 0.75;
-moz-opacity:0.75;
}
#brownBarBottomRepeat {
position:absolute;
width:100%;
height:31px;
z-index:12;
left: 739px;
top: 574px;
background-color: #432121;
}#whiteLinkBox {
padding: 5px;
}
#whiteLinkBox {
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
}
#title {
position:absolute;
width:350px;
height:50px;
z-index:14;
left: 380px;
top: 135px;
}
#underPicBar {
padding-top: 5px;
padding-right: 10px;
}
#mainTextBox {
padding: 20px;
text-indent: 10px;
letter-spacing: normal;
word-spacing: normal;
}
#text {
position:absolute;
width:290px;
height:85px;
z-index:15;
left: 30px;
top: 45px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

.style1 {font-size: 12px}
.style4 {font-size: 10px; color: #999999; }
.style5 {color: #333333}
.style10 {font-size: 50px}
.style12 {font-size: 40px}
.style13 {font-size: 35px}
#Layer3 {
position:absolute;
width:500px;
height:700px;
z-index:13;
left: 234px;
top: 610px;
background-color: #EEEEEE;
}
.style14 {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
list-style-type: none;
}
.style14 {
font-size: small;
text-indent: 0px;
}
.style15 {
font-size: large;
text-indent: 30px;
}
.style16 {color: #935800}
.style17 {color: #FFFFFF}
.style18 {color: #ffffff}

a.white:link {color: #ffffff; font-size:small}
a.white:active {color: #ffffff; font-size:small}
a.white:visited {color: #ffffff; font-size:small}
a.white:hover {color: #935800; font-size:small}
.validXhtml {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #935800;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 0px;
}

Don't worry. It was just some sloppy coding. I fixed it.