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.
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>
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
@charset "utf-8";
in the CSS?
Is that really needed?