Site is
www.vmrbribie.com
Have ARI slider above content on home page. Slider appears to cover the links below (print icon, email icon, this number and suggestions for improvement) with some of the images but not all. Effect is sometimes the links in content are clickable and sometimes not. When not the image pauses. Usually fixes itself when the image changes or I refresh the page.
Doesn't seem to happen with IE9, Chrome or Safari so thought this was a Mozilla bug and posted to their forum. This is the response I got.
"This looks like a problem with the div.nivo-box elements.
There are three rows of them (rel="0" rel="1" rel="2") and they all have the same height (350px), but each row starts lower (top:0px top:88px top:176px). Only rel="0" covers the image completely and the others descend and that causes them to cover the links (the print icon has just a few px left that you can click at the far right).
You can see that if you right-click that area and use Inspect Element.
This doesn't happen all the time, but if there is an image that makes this happen then the slide show stops as long as you are in that area."
The solution suggested was to add this code.
"Try this as a "quick and dirty" fix. To prevent transparent elements from "sticking out" of the slider area, truncate anything that sticks out. Here's how.
In your source file, displayed in Firefox's source viewer as line 131 but this may differ on the server, add a rule:
</div><div class="above-content" style="overflow:hidden">"
This is all a bit techo and I would prefer a solution that doesn't require code modification (I'm not strong on html/css) but if this is the only solution then please advise which file to change and where to put the code.
Thanks