We help IT Professionals succeed at work.

Why are these scalable css rollover images not working properly in IE?

MorningThief581
on
632 Views
Last Modified: 2008-08-15
I'm having difficulty getting my personal page navigation to work properly in IE.  The navigation works as intended in Firefox and in Safari.  The problem is visible in IE here:
http://www.morningthief.com/fwj/updates.php

The page also has a brief description of the problem I've had implementing the navigation.

As concisely as possible, I'd like scalable (per user's browser magnification settings) rollover image links using css.    The style declaration below for "visibility:hidden" should apply to all rollover-class links and should also denote the current active page (hence the  "#updatesbody..." portion).  On the  actual updates page in Firefox (or Safari), you can see that the Updates link is displayed boldly and the rest of the links respond accordingly.  In IE, the Updates TEXT is displayed boldly, but the Updates LINK is rendered inactive as if the entire anchor tag (which contains the rollover-class image) has been hidden.  All the other links on the page (in IE) also act buggy, flickering as the mouse crosses every pixel.  I've tried formatting this a number of different ways, including denoting the anchors as a class and trying to hide 'a.classname:hover img', but that didn't work either.  Whatever i do, it seems that IE attempts to hide the entire anchor whenever its contained image gets hidden.  Or I could be misinterpreting the problem.

I've included what I believe are the important snippets of code below, though right now the page itself is a pretty empty shell.  Full stylesheets (works in progress) are here:
http://www.morningthief.com/fwj/fwj_main.css
http://www.morningthief.com/fwj/fwj_nav.css

Any suggestions would be greatly appreciated.
#headerbg {
	position:absolute;
	top:0em;
	left:0em;
	width:47.5em;
	height:6.26em;
	z-index:0;
}
 
#updateslink {
	top:4.45em;
	left:12.63em;
	height:1.44em;
	width:4.75em;
}
 
#medialink {
	top:4.45em;
	left:19.95em;
	height:1.31em;
	width:3.50em;
}
 
#tourlink {
	top:4.45em;
	left:25.94em;
	height:1.31em;
	width:2.69em;
}
 
#aboutlink {
	top:4.45em;
	left:31.22em;
	height:1.31em;
	width:3.50em;
}
 
#contactlink {
	top:4.45em;
	left:37.38em;
	height:1.31em;
	width:8.50em;
}
 
img.rollover
{
border:none;
margin:0em;
padding:0em;
}
 
a:hover img.rollover, #updatesbody #updateslink img.rollover
{
visibility:hidden;
}
 
 
<div id="header">
    	<img src="img/header.gif" id="headerbg"/>
    	<div id="homelink">
            <a href="index.php"><img class="rollover" src="img/transparent.gif" style="height:5.50em; width:8.13em;"/></a>
        </div>
        <div id="updateslink">
            <a href="updates.php"><img class="rollover" src="img/nav/updates_button.gif" style="height:1.44em; width:4.75em;"/></a>
        </div>
        <div id="medialink">
            <a href="#"><img class="rollover" src="img/nav/media_button.gif" style="height:1.31em; width:3.50em;"/></a>
        </div>
        <div id="tourlink">
            <a href="#"><img class="rollover" src="img/nav/tour_button.gif" style="height:1.31em; width:2.69em;"/></a>
        </div>
        <div id="aboutlink">
            <a href="#"><img class="rollover" src="img/nav/about_button.gif" style="height:1.31em; width:3.50em;"/></a>
        </div>
        <div id="contactlink">
            <a href="#"><img class="rollover" src="img/nav/contact_links_button.gif" style="height:1.31em; width:8.50em;"/></a>
        </div>
</div>

Open in new window

Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
What's with the
@charset "utf-8";

in the CSS?

Is that really needed?

Author

Commented:
No.  It's hardly necessary, but I'm trying out Dreamweaver, and apparently it places that at the top of all stylesheets by default.  I just hadn't bothered getting rid of it.  I just axed it.
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.