fancy_images thumbnails in a tab don't flow properly in IE7

(7 posts) (2 voices)

1. 

   marbuckner
   Member

   I am trying to include a fancy_images gallery in a tab and the thumbnails are not flowing properly in IE7. Included is a page shot. The thumbnails flow properly in IE8 and Firefox 3.6.

   I'm using WordPress 3.1, Awake 1.3, and the prettyPhoto 3.0.1 update.

   FYI, I found that the fancy_image thumbnails render slightly differently in IE7. They render slightly "wider" than in IE8 and Firefox. If I have a total of eight images and set the thumbnail to a maximum width to have four columns and two rows in IE8 and Firefox I would have three columns and three rows in IE7. The easy workaround is to set the thumbnail width slightly smaller so they wrap the same in IE7 and IE8/Firefox. This was true using the version of prettyPhoto that shipped with Awake and with the latest production version. Not a problem, just one of the usual browser rendering annoyances.

   Attachments

   1. fancy_images-in-tab-displayed-in-IE7.jpg (99.2 KB, 6 downloads) 1 year old

   Posted 1 year ago #
2. 

   Elliott
   Support

   Hello marbuckner,

   Try placing this in between your fancy_images shortcodes to manually do a line break.

   <div style = 'clear: both;'></div>

   Let us know if that works for you.

   Posted 1 year ago #
3. 

   marbuckner
   Member

   When I do this:
   [fancy_images height=120 width=170]
   ...
   <div style = 'clear: both;'></div>
   [/fancy_images]
   The <div> is stripped out.

   When I do this:
   <div style = 'clear: both;'>
   [fancy_images height=120 width=170]
   ...
   [/fancy_images]
   </div>
   There is no difference.

   I've uploaded a page capture of how the thumbnails properly flow in IE8.

   

   Attachments

   1. fancy_images-in-tab-displayed-in-IE8.jpg (92.2 KB, 1 downloads) 1 year old

   Posted 1 year ago #
4. 

   Elliott
   Support

   Sorry marbuckner, try it like this,

   [fancy_images][/fancy_images]
   [fancy_images][/fancy_images]
   [fancy_images][/fancy_images]
   [fancy_images][/fancy_images]
   
   <div style = 'clear: both;'></div>
   
   [fancy_images][/fancy_images]
   [fancy_images][/fancy_images]
   [fancy_images][/fancy_images]
   [fancy_images][/fancy_images]

   If that does not work for you then if possible PM us Wordpress login information so we can take a closer look.

   Posted 1 year ago #
5. 

   marbuckner
   Member

   So instead of...
   

   <br />
   [fancy_images height=120 width=170]<br />
   image1.jpg<br />
   ...<br />
   image8.jpg<br />
   [/fancy_images]<br />

   ...use...
   

   <br />
   [fancy_images height=120 width=170]image1.jpg[/fancy_images]<br />
   ...<br />
   [fancy_images height=120 width=170]image4.jpg[/fancy_images]<br />

   ?

   When I wrap each thumbnail in its own [fancy_image] shortcode without any other code (<div style = 'clear: both;'></div>
   ) they line break. See attached page capture.

   

   Attachments

   1. individual_fancy_images-in-tab-display.jpg (54.4 KB, 0 downloads) 1 year old

   Posted 1 year ago #
6. 

   marbuckner
   Member

   Okay, the < code > tag put the < br / >'s in above. All my shortcode is one line, no breaks.

   I put the first four images in one [fancy_images] shortcode block and the second four in a second block. That workaround works.

   Posted 1 year ago #
7. 

   Elliott
   Support

   I went ahead and edited your troubleshooting page marbuckner. Let us know if you have any other issues.

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.