PDA

Click to See Complete Forum and Search --> : image-based CSS rollovers for IE 7

stephenScud
09-27-2007, 02:29 PM
I want to create image-based CSS rollovers that work across multiple borwsers, but mostly IE 7. This is done with a graphic that has both on and off states.

In IE 7, when I'm "off" the image, all I see is the off-state. When I hover, the image does move up to show the on-state - but the off state doesn't get hidden and instead is still visible. I know it can be done using images as background in CSS, but I don't want to do it that way. This works in FF 2:

CSS:

<style type="text/css">

div.btn_LtNav_54{
float:left;
width:183px; height:27px;
display:inline;
overflow:hidden;
padding:0;
margin:0;
border-bottom:2px solid #fff;
}

div.btn_LtNav_54 a:hover{ position:relative; display:inline; height:27px; overflow:hidden; left:0px; top:-27px; padding-top:0; }

</style>

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Something</title>
</head>

<body>
<div class="btn_LtNav_54">
<a href="link.jsp"><img src="images/btn_LtNav_link.gif" width="183" height="54" border="0" alt="link" /></a>
</div>
</body>
</html>

Thanks for any ideas on how to fix this. Please don't post ideas for doing this with a background image, as I do not want to do it that way.
Kravvitz
09-27-2007, 02:46 PM
I know it can be done using images as background in CSS, but I don't want to do it that way.
Why not?

P.S. It would be helpful if you put your code between tags (http://www.phpbb.com/community/faq.php?mode=bbcode#f21) in the future.
WebJoel
09-27-2007, 03:02 PM
Of course, using an image for the clickable anchor link means that text-only browsers and other user-agents for the visually-impaired will be denied content or at least, meaningful content.
Using a background-image which 'swaps' for the states of :link, :hover, and :active provide the visual effect you want, and you can use semantic text which is available to text-readers (and editable. And bonus, -you only need one image, and can add as many additional anchor links as you want).
It would be helpful to know why you do not want to use 'background-image' (is your image a *png, in which case, I understand as *png for background-images tend to not work..)
stephenScud
09-27-2007, 03:05 PM
To me, the images on the site are a part of the web site branding as much as the clients own branding is. Most of us know background images get stripped out by printers.

What if Adobe's PDFs showed graphics and all, but when you printed them out, some of the graphics didn't print out. How do you think that would play out? Of course there are printed brochures they can order through the mail but what if a part of that branding got lost if that brochure was an online pdf that web surfers printed out.

Anyway. I found my solution:

div.btn_LtNav_54{
position:relative;
float:left;
width:183px; height:27px;
display:inline;
overflow:hidden;
padding:0;
margin:0;
border-bottom:2px solid #fff;
}

div.btn_LtNav_54 a:hover{ position:absolute; left:0px; top:-27px; padding-top:0px; }
stephenScud
09-27-2007, 03:25 PM
The client signed off on work which includes two types of content: text and graphical.

This will add to my comment about branding:

The clients logo identifies the client to the consumer. But for the impared, what does this do for them? Should I tell the client that we shouldn't use their logo, but instead have it as a text-css treated design on the web site? Even the strongest argument, however thought-provoking, will see the client go out the door, and take their business somewhere else.

The navigation on a web site is as much a part of a companies branding as is the logo. The text graphic navigation will be done in Univers which isn't a pre-installed font and even though I'm sure that doesn't matter period to a text reader it does to the client who signed off on text graphic navigation.

I actually worked on a project with text navigation and when it is done right it has very close to the same quality as a photoshop generated text graphic does have.

BTW: I stripped out any identity in the code I included as to the client I represent. The "alt" in the image tag does communicate exactly what the link says but I stripped it out to maintain anonymity. Still, this was an interesting thread. Didn't think it would go this way. Just wanted a solution, but instead we got a discussion about some things that may need to be brought up.

Would any of you tell the client not to use their logo on a web site and instead to go with text that could be more accessible? That's a good question...
WebJoel
09-27-2007, 03:41 PM
If the page is internet-hosted, why not use media="screen" for use of background-image which is proven to work, and include another special link to a second *css for media="print" for "hard-copy print-out sheets', and preserve the sence of corporate branding that way? Sure, -make the client happy. But offend and deny Accessibility? -Not best practice.
Making a site handicapped-inaccessible makes me not want to visit, solicite or recommend site. :o