image positioning incorectly until mouseover
hi :)
i have a thumbnail as shown below that behaves weirdly in firefox. it loads the image above where it is supposed to sit & when i move my mouse over it then moves into the correct position. any ideas? live version here
http://www.philtrated.com/test/error_off.gif
http://www.philtrated.com/test/error_on.gif
css
Code:
/* content box */
#content{
background:#eee;
background-color:#eee;
width:385px;
overflow:auto;
margin-top:40px;
height:375px;}
#content p{
margin-left:10px;
margin-right:20px;
padding-bottom:2px;}
/* image + description */
.leftimg {
border: 1px solid #5d5d5d;
float:left;
clear:left;
margin-right:10px;
margin-top:6px;
margin-left:10px;}
#imagedescription{
margin-left:-9px;
float:left;
margin-top:8px;}
xhtml
Code:
<body>
<div id="container">
<div id="mainnav">
<ul id="nav">
<li id="home"><a href="index.html" class="ir">home</a></li>
<li id="about"><a href="about.html" class="ir">about</a></li>
<li id="finepoint"><a href="finepoint.html" class="ir">finepoint</a></li>
<li id="reflect"><a href="reflect.html" class="ir">reflect</a></li>
<li id="notebook"><a href="notebook.html" class="ir">notebook</a></li>
<li id="tattoo"><a href="tattoo.html" class="ir">tattoo</a></li>
<li id="cartoons"><a href="cartoons.html" class="ir">cartoons</a></li>
<li id="photography"><a href="photography.html" class="ir">photography</a></li>
<li id="kidsh"><a href="kidsh.html" class="ir">kidsh</a></li>
<li id="websites"><a href="websites.html" class="ir">websites</a></li>
<li id="guestbook"><a href="guestbook.php" class="ir">guestbook</a></li>
<li id="contact"><a href="contact.html" class="ir">contact</a></li>
</ul>
</div>
<div id="content">
<img src="images/h_home.gif" alt="home" />
<p class="headers">
welcome to philtrated reality .
</p>
<img src="images/divider.gif" alt="divider" class="divider" />
<a class="opacityfilter" href="finepoint/bifurcate.jpg" rel="lightbox" title="bifurcate">
<img src="finepoint/bifurcate_thumb.gif" alt="click to view" width="84" height="100" class="leftimg"/></a>
<div id="imagedescription">
<p class="headers">
25th June .
</p>
<p class="text">
title - bifurcate
<br />
section - finepoint
</p>
</div>
</div>
<div id="footer">
philtrated version 7 . xhtml | css
<br />
supports
<a href="http://www.anikafoundation.com" rel="external">the anika foundation</a>
&
<a href="http://www.phirebrush.com" rel="external">phirebrush</a> .
</div>
</div>
</body>
