bradyjfrey
asked on
CSS Image rollover technique working in all other browsers but IE, any ideas for workarounds or see any errors?
I'm attempting to figure out some new image rollover techniques -- and have been testing the following:
http://www.dotfive.com/astest/index.php
Seems as though the link shows up right in Safari, Firefox, Mozilla, Opera -- but not Mac IE or PC IE. Any thoughts as to why it doesn't like the shift? The only difference is the background placement in the CSS that bumps up and down for the hover statement:
[code]
.home .homelink{
position: absolute;
left: 0px;
top: 99px;
width: 200px;
height: 31px;
display: block;
background-image: url(indeximages/home.gif);
background-position: 0px 31px;
background-attachment: scroll;
background-repeat: no-repeat;
text-indent: -5000px;
}
a.homelink:hover{
position: absolute;
left: 0px;
top: 99px;
width: 200px;
height: 31px;
display: block;
background-image: url(indeximages/home.gif);
background-position: 0px 0px;
background-attachment: scroll;
background-repeat: no-repeat;
text-indent: -5000px;
}
[/code]
I know the text indent method is worthless with images off, so not a final choice (I'm testing other options, as well as trying to get my guys to back off the need to use that specific font) -- but I'm wondering why it takes the position element differently... something I should be hacking? Any ways to fix this are welcome
The XHTML is simply:
[code]
<li class="home"><a class="homelink" href="index.php">home</a><
[/code]
http://www.dotfive.com/astest/index.php
Seems as though the link shows up right in Safari, Firefox, Mozilla, Opera -- but not Mac IE or PC IE. Any thoughts as to why it doesn't like the shift? The only difference is the background placement in the CSS that bumps up and down for the hover statement:
[code]
.home .homelink{
position: absolute;
left: 0px;
top: 99px;
width: 200px;
height: 31px;
display: block;
background-image: url(indeximages/home.gif);
background-position: 0px 31px;
background-attachment: scroll;
background-repeat: no-repeat;
text-indent: -5000px;
}
a.homelink:hover{
position: absolute;
left: 0px;
top: 99px;
width: 200px;
height: 31px;
display: block;
background-image: url(indeximages/home.gif);
background-position: 0px 0px;
background-attachment: scroll;
background-repeat: no-repeat;
text-indent: -5000px;
}
[/code]
I know the text indent method is worthless with images off, so not a final choice (I'm testing other options, as well as trying to get my guys to back off the need to use that specific font) -- but I'm wondering why it takes the position element differently... something I should be hacking? Any ways to fix this are welcome
The XHTML is simply:
[code]
<li class="home"><a class="homelink" href="index.php">home</a><
[/code]
>>The problem could be the :hover selector that is not supported in some release of IE.
the hover selector IS supported in IE on the <a> element however, which is how they are using it...
the hover selector IS supported in IE on the <a> element however, which is how they are using it...
brunobear: you are right.
Seems like a pretty strange way to layout a page - and the image replacement technique is troublesome at best.
Is there a reason why you can't use normal CSS for what you're trying to achieve?
Is there a reason why you can't use normal CSS for what you're trying to achieve?
ASKER
to answer all of these:
Yeah, the hover technique is supported, no doubt about that -- and the reason of the CSS rollover is to avoid using javascript, so I don't want that solution.
Why is this a strange way to layout an image rollover? Actually, I use this quite a bit, and there are variations:
http://www.mezzoblue.com/tests/revised-image-replacement/
The only downfall is that if CSS is turned off by the user, The text behind it may have some errors. But it is easier to update, works on small screens, works on handicapp accessible sites -- the only real image replacement technique that has major issues is the FIR technique, which does not support screen readers -- since the extra span that has a display: none; attribute does just that for everything.
I see this as normal CSS for advanced layouts -- if you mean, I could accomplish this by pure text with just background and border references, then that's correct -- but there will be different buttons there eventually, and I want to figure out why this rollover doesnt work in every other browser but IE for Mac and PC. I may have to do it like this technique:
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
To get it to work.
Yeah, the hover technique is supported, no doubt about that -- and the reason of the CSS rollover is to avoid using javascript, so I don't want that solution.
Why is this a strange way to layout an image rollover? Actually, I use this quite a bit, and there are variations:
http://www.mezzoblue.com/tests/revised-image-replacement/
The only downfall is that if CSS is turned off by the user, The text behind it may have some errors. But it is easier to update, works on small screens, works on handicapp accessible sites -- the only real image replacement technique that has major issues is the FIR technique, which does not support screen readers -- since the extra span that has a display: none; attribute does just that for everything.
I see this as normal CSS for advanced layouts -- if you mean, I could accomplish this by pure text with just background and border references, then that's correct -- but there will be different buttons there eventually, and I want to figure out why this rollover doesnt work in every other browser but IE for Mac and PC. I may have to do it like this technique:
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
To get it to work.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I should known that one... I'm kicking myself... thanks seanpowell, you get an excellent score for pointing that one out -- and, you're right, I'm not the happiest about this technique, but until CSS3 gives me a nice supported fix, I'll test every option I can. Thanks for all your guys help!!
I'm thinking CSS8, but let's keep our fingers crossed :-)
Thanks...
Thanks...
My way of handling this is to use a site-wide naming convention for the images, where any image the ends with "_off.jpg" or "_off.gif" automatically becomes a rollover. I do this by setting up a page onload event handler that loops through the images with window.getElementsByTagNam
ASKER
That would not help my need for doing rollovers without Javascript -- since those are Javascript event handlers. I may as well just use the old school way if I handle that.
The issue was to make rollovers with CSS a: properties, and it as just a minor mistake on my part. Javascript rollovers can cause handicap users and text browsers to lose their link capabilities.
The issue was to make rollovers with CSS a: properties, and it as just a minor mistake on my part. Javascript rollovers can cause handicap users and text browsers to lose their link capabilities.
This is a workaround that uses the onmouseover onmouseout and JavaScript
Add a class for links with mouse over:
.homelink_mouseover{
position: absolute;
left: 0px;
top: 99px;
width: 200px;
height: 31px;
display: block;
background-image: url(indeximages/home.gif);
background-position: 0px 0px;
background-attachment: scroll;
background-repeat: no-repeat;
text-indent: -5000px;
}
In the anchor tag:
<a class="homelink" href="index.php" onmouseover="this.classNam