HI i'm having issues with my css in Safari, it works fine in IE and FF. The problem is the thumbnail gallery in the code below, it is supposed to display in the bootom right of the page, but in Safari, the images are out of place, some are displayed correctly and the others are displayed in the topleft. Can anyone help?
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="keywords" lang="en" content=""/>
<meta name="Description" content=""/>
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
<title>Lyn's Home Page</title>
</head>
<body>
<div id="container">
<div id="header">
<img src="images/header.jpg" alt="131/4 Morrison Street" title="131/4 Morrison Street" />
</div>
<div id="content">
<div id="vcontainer">Loading the player ...</div>
<script type="text/javascript">
jwplayer("vcontainer").setup({
flashplayer: "/jwplayer/player.swf",
file: "/video/draft2blackhall.mov"
});
</script>
<img class="quote" src="images/quote.jpg" alt="Lovely flat in the heart of the city, so very convenient" />
<div id="text">
<h1>Available to rent from only £60 a night. Why stay anywhere else in central Edinburgh?</h1>
<p>Well appointed, beatuifully furnished and stylish city centre flat directly opposite the Edinburgh Conference Centre.</p>
<p id="feat">FEATURES</p>
<ul>
<li>Distnace from city centre - 10 minute walk</li>
<li>Size - 60m</li>
<li>Bedrooms - 2 x Double</li>
<li>Bathrooms - 2 </li>
<li>Digital TV</li>
<li>Wi-Fi Hotspots</li>
<li>Full Kitchen (all apliances)</li>
<li>Gas central heating</li>
</ul>
<img class="logo" src="images/logo.jpg" alt="Personl Travel Group Logo" title="PTG" height="60px" />
<p>Contact</p>
<ul>
<li>Lyn Blackhall</li>
<li>07717803389</li>
<li>J.Blackhall1@BTinternet.com</li>
</div>
<a href="contact.html"><img class="quote" src="images/contact.png" alt="Contact Link" title="Availability" /></a>
<div class="gallery">
<a class="thumbnail" href="#thumb"><img src="images/bedroom.jpg" width="100px" height="66px" border="0" title="Main bedroom" /><span><img src="images/bedroom.jpg" width="400px" height="264px" title="Main Bedroom" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/bedroom2.jpg" width="100px" height="66px" border="0" title="Second bedroom" /><span><img src="images/bedroom2.jpg" width="400px" height="264px" title="Second Bedroom" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/lounge.jpg" width="100px" height="66px" border="0" title="Lounge" /><span><img src="images/lounge.jpg" width="400px" height="264px" title="Lounge" /><br /></span></a>
<br />
<a class="thumbnail" href="#thumb"><img src="images/kitchen.jpg" width="100px" height="66px" border="0" title="Kitchen" /><span><img src="images/kitchen.jpg" width="400px" height="264px" title="Kitchen" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/bathroom.jpg" width="100px" height="75px" border="0" title="Main Bathroom" /><span><img src="images/bathroom.jpg" width="400px" height="264px" title="Main Bathroom" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/bathroom2.jpg" width="100px" height="70px" border="0" title="Second Bathroom" /><span><img src="images/bathroom2.jpg" width="400px" height="264px" title="Second Bathroom" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/view.jpg" width="100px" height="70px" border="0" title="ECC View" /><span><img src="images/view.jpg" width="400px" height="264px" title="ECC View" /><br /></span></a>
</div>
</div>
<div id="footer">
<p id="foot">All content copyright Copyright Holder 2010. Any unauthorised duplication prohibited. </p>
<ul>
<li class="sitem"><a class="sm" href="index.html">Home</a></li>
<li class="sitem"><a class="sm" href="contact.html">Contact</a></li>
<li class="sitem"><a class="sm" href="terms.html">Terms</a></li>
</ul>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>
</div>
</div>
</body>
</html>Here's the css for the gallery;
/*Image gallery*/
.gallery{
position: relative;
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 0px;
}
.thumbnail span{
position: absolute;
padding: 5px;
left: -100px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{visibility: visible;
top: 250px;
left: 100px;
z-index: 1;
}