Yet again: css/jquery in IE

Factual Questions
1

In an effort to update a webpage I built many years ago, I’m trying to add a slick(er) slideshow-type feature to use to browse through products. However, in IE things don’t show up exactly as I’d like. If you go to the link below:

http://ursulavenetdesigns.com/cards2_TEST.php?album_id=2
. . . you see exactly what I want you to see. And, in Firefox, everything works as it should . . . clicking the arrows or thumbnails brings you to that item, with its corresponding caption. In IE (version 8), however, the caption shifts position.

Anyone have any ideas? I can provide code, and while the slideshow itself is 3rd party and beyond my current skill level to really delve into (particularly since it’s written into one long line, ugh), I’m hoping that this might just be some broken css/IE thing that someone has seen before.

2

The caption jumps in Firefox as well.

The images are not all the same size.

3

I don’t mind that the caption moves. In IE, after the first image, the text doesn’t display within the caption. Which I guess is the real issue, not the box moving. :smack:

It’s been a long morning.

4

OK, now I understand.

I’m not a JavaScript expert by any means. However, from a user perspective I find the setup too complicated to intuitively understand. Initially, I only saw the next and previous arrows, along with their equivalent text elements. It wasn’t until later that I saw/clicked on the arrow to begin the automatic transition. It makes it all appear kludgey. Now when I look at the smaller images to the right (indicating when I am in this) it becomes overkill. Sorry, but for me this is a Winchester House look that makes me want to leave.

I suggest greatly simplifying the process from a typical ignorant user perspective. Yeah, we’re into Web 2.0 and later web doohickeys. But the vast majority of web users are still at Web 0.2. In this case for me, function should really follow form.

Think/act KISS Principle. Less is truly more.

5

Hold on…

6

Your list elements inside the “pikame” UL were malformed. The URL was wrong and there was an extra </A> tag before the <IMG>, causing the script to spaz out. Corrected, it should look like this:



<UL id=pikame class=jcarousel-skin-pika>
  <LI><A 
  href="http://www.ursulavenetdesigns.com"><IMG 
  src="fix_files/high%2520as%2520a%2520mountain_310510_062605.jpg"></A><SPAN>Another 
  Crepe Year!<BR>
  <P style="FONT: 12px Verdana, sans-serif">$3.95 each</P><BR><A 
  href="http://ursulavenetdesigns.com/UVD%20Order%20Form.pdf" 
  target=_blank>Order form</A></SPAN>
  <LI><A 
  href="http://www.ursulavenetdesigns.com"><IMG 
  src="fix_files/sweetcakes_290407_231936.jpg"></A><SPAN>Sweetcakes<BR>
  <P style="FONT: 12px Verdana, sans-serif">$3.95 each</P><BR><A 
  href="http://ursulavenetdesigns.com/UVD%20Order%20Form.pdf" 
  target=_blank>Order form</A></SPAN>
  <LI><A 
  href="http://www.ursulavenetdesigns.com"><IMG 
  src="fix_files/just_for_you_290407_232059.jpg"></A><SPAN>Just For You<BR>
  <P style="FONT: 12px Verdana, sans-serif">$3.95 each</P><BR><A 
  href="http://ursulavenetdesigns.com/UVD%20Order%20Form.pdf" 
  target=_blank>Order form</A></SPAN>
  <LI><A 
  href="http://www.ursulavenetdesigns.com"><IMG 
  src="fix_files/heaven_can_cake_290407_232138.jpg"></A><SPAN>Heaven Can 
Cake<BR>
  <P style="FONT: 12px Verdana, sans-serif">$3.95 each</P><BR><A 
  href="http://ursulavenetdesigns.com/UVD%20Order%20Form.pdf" 
  target=_blank>Order form</A></SPAN>
  <LI><A 
  href="http://www.ursulavenetdesigns.com"><IMG 
  src="fix_files/balloon_bevy_290407_232215.jpg"></A><SPAN>Balloon Bevy<BR>
  <P style="FONT: 12px Verdana, sans-serif">$3.95 each</P><BR><A 
  href="http://ursulavenetdesigns.com/UVD%20Order%20Form.pdf" 
  target=_blank>Order form</A></SPAN>
  <LI><A 
  href="http://www.ursulavenetdesigns.com"><IMG 
  src="fix_files/fiesta_290407_232250.jpg"></A><SPAN>Fiesta!<BR>
  <P style="FONT: 12px Verdana, sans-serif">$3.95 each</P><BR><A 
  href="http://ursulavenetdesigns.com/UVD%20Order%20Form.pdf" 
  target=_blank>Order form</A></SPAN>
  <LI><A 
  href="http://www.ursulavenetdesigns.com"><IMG 
  src="fix_files/eat_me_290407_232320.jpg"></A><SPAN>Eat Me<BR>
  <P style="FONT: 12px Verdana, sans-serif">$3.95 each</P><BR><A 
  href="http://ursulavenetdesigns.com/UVD%20Order%20Form.pdf" 
  target=_blank>Order form</A></SPAN>
  <LI><A 
  href="http://www.ursulavenetdesigns.com"><IMG 
  src="fix_files/open_me_290407_232350.jpg"></A><SPAN>Open Me<BR>
  <P style="FONT: 12px Verdana, sans-serif">$3.95 each</P><BR><A 
  href="http://ursulavenetdesigns.com/UVD%20Order%20Form.pdf" 
  target=_blank>Order form</A></SPAN>
  <LI><A 
  href="http://www.ursulavenetdesigns.com"><IMG 
  src="fix_files/time_to_float_290407_232435.jpg"></A><SPAN>Up Up and Away<BR>
  <P style="FONT: 12px Verdana, sans-serif">$3.95 each</P><BR><A 
  href="http://ursulavenetdesigns.com/UVD%20Order%20Form.pdf" 
  target=_blank>Order form</A></SPAN>
  <LI><A 
  href="http://www.ursulavenetdesigns.com"><IMG 
  src="fix_files/strawberries_forevah_180510_104102.jpg"></A><SPAN>Strawberries 
  Forevah<BR>
  <P style="FONT: 12px Verdana, sans-serif">$3.95 each</P><BR><A 
  href="http://ursulavenetdesigns.com/UVD%20Order%20Form.pdf" 
  target=_blank>Order form</A></SPAN>
  <LI><A 
  href="http://www.ursulavenetdesigns.com"><IMG 
  src="fix_files/cupcake_220507_155253.jpg"></A><SPAN>Cupcake<BR>
  <P style="FONT: 12px Verdana, sans-serif">$3.95 each</P><BR><A 
  href="http://ursulavenetdesigns.com/UVD%20Order%20Form.pdf" 
  target=_blank>Order form</A></SPAN>
  <LI><A 
  href="http://www.ursulavenetdesigns.com"><IMG 
  src="fix_files/ice_cream_fountain_220507_155324.jpg"></A><SPAN>Ice Cream 
  Fountain<BR>
  <P style="FONT: 12px Verdana, sans-serif">$3.95 each</P><BR><A 
  href="http://ursulavenetdesigns.com/UVD%20Order%20Form.pdf" 
  target=_blank>Order form</A></SPAN>
  <LI><A 
  href="http://www.ursulavenetdesigns.com"><IMG 
  src="fix_files/oh_happy_day_220507_155409.jpg"></A><SPAN>Mmm Chocolate<BR>
  <P style="FONT: 12px Verdana, sans-serif">$3.95 each</P><BR><A 
  href="http://ursulavenetdesigns.com/UVD%20Order%20Form.pdf" 
  target=_blank>Order form</A></SPAN> </LI></UL>

(Note that you still might want to change the individual URLs. Right now all the pictures just point you back to the front page.)

This fixed it on IE9 for me. See if it did it for your IE…