SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Australia
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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





    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>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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" />

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Australia
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you works perfectly now


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •