WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Images moving on hover of different images (5 posts)

  1. newbie_yvr
    Member
    Posted 10 months ago #

    Page Link: http://thevernondentist.com/our-services/
    Problem: When viewing in Chrome or Safari, page works great. When viewing in IE or Firefox, hovering over the top two circular images on the right ("Restorative Dentistry" and "Dental Implants") causes other images to change position. I have no idea why. The hover action simultaneously increases the size of the image and decreases the size of the margins so that the overall footprint of the image should be the same. Excerpt from my style.css file is below. Thanks so much for any help.

    img.service_page_big{
    	clear:none !important;
    	float:left !important;
    	margin-left:10px !important;
    	position:relative;
    	top:82px;
    	}
    
    	img.service_page_big:hover{
    	margin-left:0px !important;
    	margin-top:-10px !important;
    	width:500px;
    	}
    
    	img.service_page{
    	clear:none !important;
    	float:right !important;
    	margin:12px !important;
    	}
    
    	img.service_page:hover{
    	margin:1px 2px !important;
    	width:200px;
    	}
    
    	img.service_page_1{
    	position:relative; top:110px; right:204px;
    	}	
    
    	img.service_page_2{
    	position:relative; top:334px; right:0px;
    	}	
    
    	img.service_page_3{
    	position:relative; top:-224px; right:0px;
    	}	
    
    	img.service_page_4{
    	position:relative; top:0px; right:-204px;
    	}	
    
    	img.service_page_5{
    	position:relative; top:0px; right:0px;
    	}
  2. Andrew
    Forum Moderator
    Posted 10 months ago #

    Let us know of the IE version(s) the issue occurs in.

  3. newbie_yvr
    Member
    Posted 10 months ago #

    Thanks for the help. I'm using IE 9.

  4. Andrew
    Forum Moderator
    Posted 10 months ago #

    Sorry, could you re-post this in the Twenty Twelve forums http://wordpress.org/support/theme/twentytwelve#postform ?

  5. newbie_yvr
    Member
    Posted 10 months ago #

    Hi Andrew,

    I could of course, but this seemed to me like a CSS question more than anything. I think the same problem would arise regardless of the WP theme (or even outside of WP altogether).

    Since my original post, I've managed to solve the problem on my own. I'll post my solution here for future reference of others:

    The better way to control image placement on a page for this application is to contain the image(s) inside a div. The div should have it's position property set to "relative", and the image(s) should have their position property(ies) set to "absolute". Using this approach, one element's movement doesn't affect the movement of other elements as is the case when using a position property of "relative" or "static".

    Here's a link to good tutorial on the topic: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

    Peace!

Reply

You must log in to post.

About this Topic