Link to home
Start Free TrialLog in
Avatar of MorningThief581
MorningThief581

asked on

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

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

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

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

in the CSS?

Is that really needed?
Avatar of MorningThief581
MorningThief581

ASKER

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.
ASKER CERTIFIED SOLUTION
Avatar of MorningThief581
MorningThief581

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial