Hi all, My client wants to have a thumbnail image shown on the page that gets bigger when hovered over. I adapted the hoverbox method that I found here: http://solardreamstudios.com/_img/learn/css/pg/ and it looks fine in Safari. However in both IE7 and FF (Mac and Windows) the big image loads in a different place (about 50px to the right) and flickers on and off rapidly.
Could someone have a look at this page and suggest what I am doing wrong? http://www.tellura.co.uk/fenditching/page4/case_studies.htm Here is what I did: In the css: .hoverpic_reed_fen_farm a img{ border: 0 none; position: absolute; width: 35px; height: 49px; } .hoverpic_reed_fen_farm a:hover img, .hoverpic_reed_fen_farm a:active img, .hoverpic_reed_fen_farm a:focus img { width: 300px; height: 424px; left: 350px; top: 200px; z-index: 1; background-color: #ffffff; padding: 5px; border: 1px solid #000000; } In the html: <div class="hoverpic_reed_fen_farm"> <a href="assets/Reed%20Fen%20Farm%20Case%20Study.pdf" target="new"><img src="assets/reed_fen_farm.png"</a> </div> <h4>The Fen Ditching Company provide environmentally-friendly solution to help<br />rural Cambridgeshire farm solve Summer irrigation problem<br />< a href="assets/Reed%20Fen%20Farm%20Case%20Study.pdf" target="new">download case study (PDF)</a> </h4> Ian. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
