| |||
CSS Firefox Issues Posted by andrewtayloruk (andrewtayloruk), 28 February 2007 Hi, i'm pretty new to CSS and html so please go easy on me. I'm trying to make a menu for a microsite, the idea is that when you hover over the images in the menu they glow. To do this i have set up the following in css ***CSS Document*** a.wallpaper_button {background:url(images/wallpaper_container.gif);} a.wallpaper_button:hover {background:url(images/wallpaper_container_on.gif);} a.screenshot_button {background:url(images/screenshot_container.gif);} a.screenshot_button:hover {background:url(images/screenshot_container_on.gif);} a.downloads_button {background:url(images/downloads_container.gif);} a.downloads_button:hover {background:url(images/downloads_container_on.gif);} div.menu_wallpaper {position:absolute; left:17px; top:220px; height:50px; width:200px; background-color:transparent;} div.menu_screenshot {position:absolute; left:17px; top:270px; height:50px; width:200px; background-color:transparent;} div.menu_downloads {position:absolute; left:17px; top:320px; height:50px; width:200px; background-color:transparent;} I have then done the following in the html document <div class="menu_wallpaper"><a class="wallpaper_button" href="wallpapers.php" target="_blank"><img src="images/overlay.gif"></img></a></div> <div class="menu_screenshot"><a class="screenshot_button" href="screenshots.php" target="_blank"><img src="images/overlay.gif"></img></a></div> <div class="menu_downloads"><a class="downloads_button" href="downloads.php" target="_blank"><img src="images/overlay.gif"></img></a></div> The overlay image in that <a> element above is a transparent gif, now in ie it displays the menus correctly and works as i wanted but when i get to firefox it is only displaying half of the menu image. Any ideas? Posted by admin (Graham Ellis), 28 February 2007 Hi, Andrew. I'm just posting up a quick welcome. I'm slightly blearyeyed today (having been woken by an 03:00 phone call!) so not seeing very straight, but I might start by looking for overlapping elements and then go on to simplify my css down to a single hover over element and see if I could track it down that way.Failing that ... I'll have a look tomorrow morning when I'm that much fresher. Posted by andrewtayloruk (andrewtayloruk), 28 February 2007 I like the sound of a single hover over element, how would this work if each image in the menu needs a different image to appear when you hover over a link in the menu? Does this make sense? Ugh, my brain is turning to mush. Thanks for the quick reply by the way, i know how busy you are. Posted by andrewtayloruk (andrewtayloruk), 28 February 2007 I've fixed it by using javascript mouseovers. The code below now displays all the menus correctly across ie and firefox. <div class="menu_wallpaper"> <a href="wallpapers.php" onMouseOver="document.getElementById('img_wallpaper').src = 'images/wallpaper_container_on.gif';" onMouseOut="document.getElementById('img_wallpaper').src = 'images/wallpaper_container.gif';"> <img id="img_wallpaper" src="images/wallpaper_container.gif"></img> </a> </div> This page is a thread posted to the opentalk forum
at www.opentalk.org.uk and
archived here for reference. To jump to the archive index please
follow this link.
| |||
PH: 01144 1225 708225 • FAX: 01144 1225 793803 • EMAIL: info@wellho.net • WEB: http://www.wellho.net • SKYPE: wellho |