hover in ie problem (or not a hover issue?)

[lafutura@yahoo.com]

hello,

i have been searching for almost a day to try to find a solution to this problem and have gotten nowhere. hoping someone out there can point me in the right direction.

i have an image (image a) which is a different size than the image (image b) that i want to appear when the mouse hovers. image b also needs to be placed in a slightly different location than image a.

all of this is contained within a div that is always centered on the page. by some miracle i have managed to make all this work. the problem is that i don't see the hover state in ie5 on the mac. don't have a pc in front of me to know if this is an ie problem or an ie on the mac problem. i do know there are some pseudo hover issues with ie, but i tried to change the css to accomodate and got nowhere.

the relevant css is below:
#pic {
left: 0px;
position: relative;
top: 0px;
height: 38px;
width: 58px;
}

#pic a .rollover {
border: 0px;
display: block;
height: 0px;
left: -1px;
position: absolute;
top: -1px;
width: 0px;
}

#pic a img {
border: 0px;
}

#pic a.p1, #pic a.p1:visited {
background: #e7f4f4;
border: 0px;
display: block;
left: 0;
text-decoration: none;
top: 0;
}

#pic a.p1:hover {
background-color: #e7f4f4;
border: 0px;
text-decoration: none;
}

#pic a.p1:hover .rollover {
display: block;
border: 0px;
height: 61px;
left: 1px;
position: absolute;
top: -43px;
width: 57px;
}

#content
{
font-family: verdana, arial, helvetica, sans-serif;
background-color: #ffffff;
text-align: left;
margin-top: -300px;
margin-left: -400px;
position: absolute;
top: 50%;
left: 50%;
width: 800px;
height: 600px;
visibility: visible
}

the relevant html is:
<div id="content">
<div class="bodytext">
<table border="0" width="800" cellpadding="0" cellspacing="0">
<tr valign="top">
<td colspan="5"><img src="imgz/1992_header.gif" alt="Making a start in the real world" width="800" height="111" hspace="0" vspace="0" border="0" align="top" /></td>
</tr>
<tr valign="top">
<td><img src="imgz/transparency.gif" height="452" width="21" border="0" hspace="0" vspace="0" /></td>
<td>copy here<br><img src="imgz/transparency.gif" height="6" width="367" border="0" hspace="0" vspace="0" /></td>
<td><img src="imgz/transparency.gif" height="452" width="24" border="0" hspace="0" vspace="0" /></td>
<td>more copy here<br /><img src="imgz/transparency.gif" height="6" width="367" border="0" hspace="0" vspace="0" /></td>
<td><img src="imgz/transparency.gif" height="452" width="21" border="0" hspace="0" vspace="0" /></td>
</tr>
<tr>
<td colspan="5"><div id="pic">
<a class="p1" href="url.html" title="menu1"><img src="image_a.gif" width="58" height="38" /><img src="image_b.gif" width="57" height="61" class="rollover" /></a>
</div>

any help would be greatly appreciated and would reduce the amount of hair that i seem to be losing over this.

[jscheuer1]

IE doesn't do hover on any elements except links. Even though you have cleverly constructed your css and markup to imply that the second image is a link, to IE, it obviously is not.

Javascript onmouseover and onmouseout events are required for this sort of thing in IE.

[lafutura@yahoo.com]

thanks for such a quick response. i was guessing that it was something related to that hover problem.

i suppose i'm concerned that i lose any ability to position my rollover image correctly once i start adding the javascript - do you think there's a way to combine all of it so that i get the best of both worlds? or is the solution to do a browser detect and display accordingly?

thanks again!

[Twey]

You can construct more than one class, then use element.className to access and change them, neatly switching CSS classes.

[jscheuer1]

Yes, one Major Ground rule:

Make things so that if the effect does not work, navigation and legibility of your document are not compromised, only made a little less exciting looking. Some browsers may not be able to execute either a css :hover or a javascript onmouseover.

Lacking your images and other specifics, it is hard for me to say exactly what you should do. A good way to make IE specific content is this:

<!--[if IE]>
IE only content goes here.
<![endif]-->

and then to hide other content from IE:

<!--[if IE]>
<div style="display:none">
<![endif]-->
Content for other browsers goes here
<!--[if IE]>
</div>
<![endif]-->

In the IE only block, create your effect using javascript rollovers, there are many available on the web. In the other use the css :hover pseudo-class. Just make sure that both links can still be used even if neither effect works.

I usually just use javascript rollovers for all browsers, making sure that the link will still work fine and be understandable if the rollover doesn't fire.

[lafutura@yahoo.com]

thanks for the ideas.

right now the navigation still works, just without the rollover state. if it weren't for the exact positioning and layering that i was looking for, i would do the whole thing in javascript.

i know i'm not the first person out there to have problems with hovering in ie, but it seems like i've created a more complicated situation for myself by the way i have the design set up. i might have to re-think that so that i'm not applying one workaround after the next to try to make it happen.

thanks again for the quick replies. i've got some thinking to do.