Cursor over text in IE gains priority over 100% vert side navs

[imjoeybrennan]

So here is one instance my usage of your slideshow.

http://apps.rcu.msstate.edu/Connections_Online/SP12/stories/3/index.html

I have used the 100% vertical navigation on either side of the slideshow and made them just transparent areas. I did this so the user would think < Page/ Page > was a button to move back and forth through the slideshow. The tabs for this were intended to be above all the content within the slideshow, however in IE the text within the slideshow takes priority over the navigation when the cursor attempts the click on either navigation.

As you can see this could cause alot of confusion for users. Can you please help me see what seems to be the problem. Not sure if this is something I've done or whether this is just an untested territory of slideshow's navigation usage when the slide is filled with text.

Thanks,
Joey (joseph.brennan@rcu.msstate.edu)

[arielsalminen]

This is actually a bug in older IE's which causes this (happens when there’s a link with no background and no text content). The solution which fixes this is to specify a background for the links.

For debugging: Try adding “background: red;” for the links and see if that fixes the problem.

Actual fix: If that does fix your problem, then you'll have to create and add a transparent 1x1px repeated gif background for the links in order to make them work in older IE’s.

Hope this helps! : )

[imjoeybrennan]

Thanks for the quick response!

Yes, that does help and works. I'm wondering though if I just put a background color and make it transparent with
opacity: 0;
filter:alpha(opacity=0);
-moz-opacity:0;
will that do it as well? Or is the transparent gif necessary?

Thanks again,
Joey

[arielsalminen]

That might also fix it, not sure, try and see if it’s enough : )

[arielsalminen]

Hmm, now when thinking this a bit more, you’d probably have to put it like this in order to keep the link still working (no need to use the actual “opacity” property):

filter:alpha(opacity=0.01);
background: #fff;
background rgba(255,255,255, 0.01);

...but now you also have another problem which is that you have that small amount of white color on top of the content, which could be avoided by using the gif solution.

[imjoeybrennan]

Hey, I just decided to go with your .gif solution.
http://apps.rcu.msstate.edu/Connections_Online/SP12/stories/3/index.html
Works great!
Thanks,
Joey