I tested the page on IE 5 for Mac and for the first time I saw a memory error in
Javascript. I have never seen such a think before. The line which gives this error is
if (LIs[xx].className.match(/\bproductSelectOn\b/i)) self.bv_ProductLineupLastOn = LIs[xx];
-The first think I thought
In IE 5 the arrrow is just hidden because you don't specifty the width of your List.
Just insert this line
.productLineup ul {width:200px;}
and you will see your arrow.
-After , I analyse your page and I arrive to this conclusion
use instead of background url / list-style-image url
One class for li will use a white square (class off) and other class will use a square with the arrow. (class on)
In javascript you analyse the postion of the childNodes of the ul when the user pass over you turn it on with the class on and the other your turn it off with the class off.
That's much better and the script will be smaller.
Berry
>I want a list of products which on mouse over triggers a preview image
>to the left of the list as well as an arrow pointing to the product
>currently being previewed. The arrow and preview are sticky; if you
>mouse off of one without hitting another, nothing will change.
>
>This would be easy with a three column table, some rowspans, and a
>little javascript. I want the list of products to be represented in the
>code as an unordered list. I used a class with a list-style of an image
>to set the arrow, with javascript swapping the preview image and the
>class of the li based on a mouseover call dynamically added to the li:
>
> http://itgtradingcards.bivia.com/li_with_bullet.html
>
>Works in Mac OS X Firefox 1, Safari 1.2, and IE 5.2; Win NT 4 and XP
>SP2 Firefox 1, Opera 7, Mozilla 1.4 and IE 6.
>
>(In these examples, only the first preview image is real; the others
>are a clear gif for testing.)
>
>The designer would prefer pixel-placement of the bullet, which is
>different in different browsers. So I re-made the idea, using a
>background on the li tag, and setting the display:block; and the
>list-style:none; (Win IE displayed a bullet for the li even with
>display:block;).
>
> http://itgtradingcards.bivia.com/li_with_bg.html
>
>I like this much better, as it allows pixel-perfect layout while
>maintaining proper semantics in the unordered list. Problem is, it's
>not working as I expected except in Gecko browsers.
>
> Success: Mac OS X Firefox 1, Win NT 4 Mozilla 1.4
> Failure: Mac OS X Safari 1.2, Mac OS X IE 5.2, Win NT IE 6
>
>The odd thing is that Safari and IE (on both platforms) are rendering
>it basically the same: the li text bumps up flush with the img
>(regardless of the margin-left of the li, until that margin-left
>exceeds the width of the img), and the background of the li is
>positioned centered under the image. These browsers don't normally
>agree, which makes me wonder if Gecko is displaying it "wrong" even if
>it's what I expect.
>
>Any help would be appreciated.
>
>
>
>Unrelated to the problem, but part of the same code: I wanted the
>preview image url to be pulled from something that was semantically
>helpful, rather than arbitrary like a javascript parameter. I settled
>on inserting it into the title of the li; the javascript then grabs
>that text and blanks the title so the browser doesn't pop up unneeded
>text. Comments on this technique's merits (or lack thereof) would be
>appreciated.
>
>--
>
> Ben Curtis
> WebSciences International
> http://www.websciences.org/
> v: (310) 478-6648
> f: (310) 235-2067
>
>
>
>******************************************************
>The discussion list for http://webstandardsgroup.org/
>
> See http://webstandardsgroup.org/mail/guidelines.cfm
> for some hints on posting to the list & getting help
>******************************************************
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
