I'm redesigning the front page of my graphic design portfolio, and I found a CSS and JQuery-based slider script that will allow users to page through my portfolio without using flash. I added some overlay text to each "slide" using z-index values, and I'm loving the way it looks, except that it's totally broken in Safari on the Mac (and therefore the iPhone). In that browser/OS combo, the overlay text gets bumped one slide to the left, so the descriptions no longer match the images they appear with. If it helps, here's where the slider script comes from: http://css-tricks.com/anythingslider-jquery-plugin/
I love trying to troubleshoot things like this, but I'm stumped. Anyone have any ideas?
P.S.: Please ignore the layout on my site. I stopped designing when I hit this roadblock, so it’s very much unfinished.
5 answers
points
you have given the three sliding divs the same ID - try giving each a different ID and see if the code makes sense of it...
points
You have multiple IDs, that is incorrect since the ID is an identificator and should be unique, as you are using id="overlayText", you should change your .css, instead of #overlayText to .overlayText in all ocurrences and change the ID attribute in the divs for a class like so: class="overlayText"
And to finally solve the problem, each <li> must have position:relative
, since you are using absolute in the paragraphs it needs that css rule in each <li> tag
points
UPDATE: I've discovered that the same problem happens when viewing the page in Chrome, if that helps
- Of course, Safari and Chrome uses both Webkit, so they usually act totally the same.
points
Safari passes the ACID test 100/100, so the best way to fix Safari issues is usually just validating the HTML, check for incorrect nesting and such.
points
Perfect, thanks! I got rid of the div IDs altogether, and gave the attributes to the <li> tags instead. That did the trick.
