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





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>
	&amp;
	<a href="http://www.phirebrush.com" rel="external">phirebrush</a> .

  </div>
  </div>
</body>