Forum Moderators: not2easy
I've just been putting together the layout for a new website and Safari is refusing to position divs properly. The right hand column is always positioned some 100px below its position in IE and Firefox. I have validated the html and css code with no issues found.
Here is the html:
<html>
<head>
<title>Title - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="right">
<div id="bannerbg"></div>
<div id="bannertitle"><span class="style5">Some Text</span></div>
<div id="bannersubtitle"><span class="style3">Some More Text</span></div>
<div id="indexright1">
<span class="style4">Text Text Text</b></span></div>
<div id="indexright2">
<a href=""><img src="img/btn/location_btn.jpg" height="25" width="475" alt="" vspace="1" /></a>
<a href=""><img src="img/btn/description_btn.jpg" height="25" width="475" alt="" vspace="1" /></a>
<a href=""><img src="img/btn/accommodation_btn.jpg" height="25" width="475" vspace="1" alt="" /></a>
<a href=""><img src="img/btn/contact_btn.jpg" height="25" width="475" vspace="1" alt="" /></a> </div>
</div>
<div id="left"><img src="img/jessca_house_front.jpg" height="525" width="385" alt="" /></div>
</div>
</div>
</body>
</html>
And the CSS:
@charset "UTF-8";
/* CSS Document */
body {
background-color: #FFFFFF;
margin-top: 8%;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFFFFF;
}
a:link {
text-decoration: none;
color: #FFFFFF;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
a img {
border: none;
}
div#wrapper {
position: relative;
text-align: left;
width: 900px;
height: 525px;
margin: 0 auto;
}
div#main {
background-color: #639282;
width: 900px;
height: 525px;
}
div#left {
position: absolute;
top: 0px;
left: 0px;
width: 385px;
height: 525px;
}
div#right {
position: absolute;
top: 0px;
right: 0px;
text-align: right;
width: 515px;
height: 525px;
}
div#bannerbg {
position: absolute;
top: 24px;
right: 0px;
background-color: #7ca596;
height: 85px;
width: 515px;
}
div#bannertitle {
position: absolute;
top: 18px;
right: 20px;
}
div#bannersubtitle {
position: absolute;
top: 82px;
right: 21px;
}
div#indexright1 {
position: absolute;
top: 280px;
right: 15px;
}
div#indexright2 {
position: absolute;
top: 352px;
right: 0px;
width: 475px;
}
span.style1 {
font-size: 11px;
}
span.style2 {
font-size: 11px;
}
span.style3 {
font-size: 21px;
}
span.style4 {
color: #50554f;
font-size: 13px;
}
span.style5 {
font-size: 66px;
font-weight: bold;
letter-spacing: -3px;
word-spacing: 5px;
}
Thank you in advance for any light shed on this issue.
Tommie
Take a click round the HTML structure using that, and see what you can see.
It's hard for me to see differences between the two because FF is displaying the content differently to Safari so trying to find height problems are impossible so I'm guessing it could be the doc type.
Yes, I applied XHTML 1.0 Strict and that seems to fix all the problems.
Thanks
Tommie
The Character-set declaration should go before the title.
