I have a fisheye menu with the following code:
<div id="fisheye" class="fisheye">
<div class="fisheyeContainter">
<a href="#borrower" class="fisheyeItem"><img src="images/
baseloan_borrower.png" width="48" alt="Borrower" title="Borrower" /
><span></span></a>
<a href="#property" class="fisheyeItem"><img src="images/
baseloan_property.png" width="48" alt="Property" title="Property" /
><span></span></a>
<a href="#loan" class="fisheyeItem"><img src="images/
baseloan_loan.png" width="48" alt="Loan" title="Loan" /><span></span></
a>
<a href="#investor" class="fisheyeItem"><img src="images/
baseloan_investor.png" width="48" alt="Investor" title="Investor" /
><span></span></a>
</div>
</div>
//
$('#fisheye').Fisheye(
{
maxWidth: 20,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 20,
proximity: 20,
}
//
.fisheye{
text-align:center;
height:21px;width:100%;
overflow:hide;
position:relative}
a.fisheyeItem{
text-align:center;
color:#000;
font-weight:bold;
text-decoration:none;
width:20px;
position:absolute;
display:block;
top:0}
.fisheyeItem img{
border:none;
margin:0 auto 5px auto;
width:100%}
.fisheyeItem span{display:none;positon:absolute}
.fisheyeContainter{
height:21px;
position:absolute}
The icons are behaving almost normally except the activation area for
the fisheye effect seems to be about 50px under where it should be, as
though the icons are displaced. When I click my FireBug icon to open
the debugger, magically the area snaps to where it should be -- I've
tired over and over: I load the page, the activation area is under
where it should be. I open the firebug console, and without touching
anything else, I try the menu again, and this time it works exactly as
it should. It will continue working perfectly whether the firebug
console is open or not until I reload the page.
In IE7 the icons start out incorrectly sitting where the the
activation area is. In other words, in FF the icons always appear in
the correct place, while the activation area moves, but in IE7 they
appear in the same place as the incorrectly placed activation area. I
also have a Drag and Drop list on the page. When I load the page in
IE, and the icons are sitting in the wrong place, I grab one of the
dragable elements. The moment I do that, the icons shift up to the
correct place. However, the activation area stays in the incorrect
place.
I have no idea how to fix this issue, can anyone help me?
