CODEWITHSUNDEEP
jquerycssanimationsafarislider
Dan Norris
Dan Norris

Reputation: 11

CSS / JavaScript slider animation issue using safari

I'm currently building a website for a client and I'm using code from this tutorial

My client unfortunately won't allow me to post the link of my current work as it has sensitive information. However above is a clear example of what i'm using.

The issue:

I'm using text as a description next to the images on the slider. They are currently sat next each image using margin and has its own div. In Safari, this text will distort and be over the top of the text and seems to ignore the rules I have put down and either sit on top of the image or move across to the right. I've no idea why its doing this and doesn't happen at all in the other browsers. I've changed the java variables so the whole container is bigger but this seems to make no difference. It is odd that on some occassions it displays fine when refreshing the page but it seems there is no pattern to this and i've not seen anything odd in the timeline either. If anyone could shed some light on why this happens or perhaps point me in the direction this would be great. The client wants to present the web solution on a safari browser and unfortunately I've not much experience in inner workings of this browser.

Link to a copy of the work without sensitive information but still has the issue

Upvotes: 0

Views: 324

Answers (1)

Patt Mehta
Patt Mehta

Reputation: 4194

  1. use a div#photo
  2. use css for div#photo div {float:left}
  3. the #photo itself must be floated left to stack them in this horizontal way

HTML:

div#album                      {min-width:1000px,min-height:200px}
div#album div                  {float:left,min-width:100px}
div#album div#photo            {min-height:200px}
div#album div#photo div        {float:left}
div#album div#photo div#image  {min-height:200px,min-width:100px}
div#album div#photo div#text   {min-height:50px,min-width:75px}

I have given a format, if you look carefully at the dimensions, what it shows is "make sure your text div does not exceed in height than parent or sibling"

what I have shown is children should have smaller width,height than parents because when using "floats" they spill out

Upvotes: 2

Related Questions