The site looks fine in IE and Firefox but in Safari it doesn't display the CSS, just the xhtml. Can you guys see any reason for this? Any other comments about the code will be greatly appreciated.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Michael Fothergill Dental Laboratory</title>
<link href="assets/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container" style="margin: auto; width: 700px; height: 1000px">
<div id="logo"></div>
<div id="aboutus">
<div id="aboutusbutton"><a class="mainlink" href="aboutus.html">About Us</a></div>
<p> </p>
<p>Michael Fothergill Dental Laboratory has always recognised that dental practices demand the highest quality at all times. MFDL prides itself on the accuracy and excellence
of each crown and bridge ... <a class="morelink" href="aboutus.html">more</a> </p>
</div>
<div id="contactus">
<div id="contactusbutton"><a class="mainlink" href="contactus.html">Contact Us</a></div>
<p>You can contact us directly by phone, post or e-mail ... <a class="morelink" href="contactus.html">more</a></p>
</div>
<div id="store"></div>
<div id="location"></div>
<div id="ourteam"></div>
<div id="homebutton"><a class="homebuttonlink" href="index.html">Home</a></div>
</div>
</body>
</html>
Code:
/* CSS Document */
#logo {
width:140px;
height:84px;
background-image:url("images/mainlogo.jpg");
left:3px;
top:3px;
}
#aboutus {
width:170px;
height:300px;
margin-top: 50px;
margin-left: 0px;
margin-right:0px;
background-color:#E0E3E9;
border-top-color:#8393A7;
border-top-style:solid;
border-top-width:2px;
padding-left:15px;
padding-right:15px;
}
#contactus {
width:270px;
height:100px;
margin-top:-302px;
margin-left:205px;
background-color:#F3F4F8;
border-top-color:#666666;
border-top-style:solid;
border-top-width:2px;
padding-left:15px;
padding-right:15px;
}
#store {
width:200px;
height:130px;
margin-top:-102px;
margin-left:510px;
background-color: #E0E3E9;
border-top-color: #8393A7;
border-top-style:solid;
border-top-width:2px;
}
#location {
width:140px;
height:210px;
margin-top:-25px;
margin-left:365px;
background-color:#ECF5FB;
border-top-color: #8AC3DA;
border-top-style:solid;
border-top-width:2px;
}
#ourteam {
width:200px;
height:140px;
margin-top:-142px;
margin-left:510px;
background-color:#F3F4F8;
border-top-color:#666666;
border-top-style:solid;
border-top-width:2px;
}
#homebutton {
height: 10px;
width: 30px;
margin-left: 663px;
margin-top: -430px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
border-left-color:#6C7F98;
border-left-style:solid;
font-size:10px;
border-left-width:10px;
padding-left:3px;
padding-bottom:2px;
border-right-color:#6C7F98;
border-right-style:solid;
border-right-width:1px;
border-bottom-width:1px;
border-bottom-color:#6C7F98;
border-bottom-style:solid;
border-top-width:1px;
border-top-color:#6C7F98;
border-top-style:solid;
padding-right:3px;
line-height:12px;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #666666;
font-weight:lighter;
line-height:20px;
text-align:justify;
}
#aboutusbutton {
width:120px;
height:24px;
margin-top:0px;
margin-left:-15px;
margin-right:0px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:24px;
padding-left:10px;
padding-top:10px;
color:#6C7F98;
padding-bottom:0px;
}
#contactusbutton {
width:150px;
height:24px;
margin-top:0px;
margin-left:-15px;
margin-right:0px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:24px;
padding-left:10px;
padding-top:10px;
color:#6C7F98;
padding-bottom:0px;
}
a.homebuttonlink:link {
color:#6C7F98;
text-decoration:none;
}
a.homebuttonlink:visited {
color: #6C7F98;
text-decoration: none;
}
a.homebuttonlink:hover {
color: #6C7F98;
}
a.mainlink:active {
}
a.mainlink:link {
color:#6C7F98;
text-decoration:none;
}
a.mainlink:visited {
color: #6C7F98;
text-decoration: none;
}
a.mainlink:hover {
color: #516074;
}
a.mainlink:active {
border-bottom-color: #6C7F98;
border-bottom-style: solid;
border-bottom-width: 2px;
}
a.morelink:link {
color: #6C7F98;
text-decoration: none;
}
a.morelink:visited {
color: #6C7F98;
text-decoration: none;
}
a.morelink:hover {
border-bottom-color: #6C7F98;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #FFFFFF;
}
a.morelink:active {
color: #6C7F98;
border-bottom-color: #6C7F98;
border-bottom-style: solid;
border-bottom-width: 1px;
}