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 6The 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 ******************************************************
