image positioning incorectly until mouseover

**tylerdurden** · Jun 25, 2006 05:17

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>

**Paul O'B** · Jun 25, 2006 05:31

HI,

First thing to try is to make sure all images have their height and width attributes filled in.

This one is missing:

Code:

<div id="content"> <img src="images/h_home.gif" alt="home" />

**tylerdurden** · Jun 28, 2006 15:25

thank you

works perfectly now

User Tag List

Thread: image positioning incorectly until mouseover

Thread Tools

Display

image positioning incorectly until mouseover

Bookmarks

Bookmarks

Posting Permissions