AnythingSlider - changing width via CSS causes slider to collapse or not display properly in Safari & Chrome

I am re-writing my question based on new data:

I'm using the AnythingSlider to organize a single-page site into content panels.

The slider works, with all the defaults settings, in Safari/Chrome and FF. I restyled the navigation and a few aesthetic details, and the slider still works perfectly in all three browsers (I haven't checked IE yet). As soon as I change the width, however, the entire slider disappears in Safari & Chrome. It looks great in FF!

I feel like I've tested it upside-down and sideways and no matter what I do, the moment I bump the width to 1000px, it disappears.

Here are things I've tried:

  • Adding a container div (wrapping the slider ul), setting its width to 1000px, and setting my slider ul to 100%.
  • Setting the slider ul width and leaving all the panels at width: 100%;
  • Setting the slider ul width AND all of the relevant interior items (panels, content div)
  • Setting the width and height for all of my images

Since it seems to all boil down to the width attribute, I won't bother posting the code, but please let me know if you'd like to see any of it anyhow! I feel like this must be very simple and I'm just missing what's in front of my nose...any help or ideas are hugely appreciated!

Answers


Resolved! I am assuming because I seem to be the only one with this issue that it has something to do with the setup of other divs on the site, but here's what I did to fix the issue:

Change this:

/* Overall Wrapper */
.anythingSlider {
display: block;
overflow: visible !important;
position: relative;
}

To use position: absolute instead.

I realized the issue when I inspected the divs in Safari and found the slider positioned normally, but the panel window ducking off the screen by about 400px. Anyhow--the behavior was strange (and specific to the webkit browsers) and I couldn't find a really logical reason for Safari to do it, but this workaround seems perfectly valid and now everything looks great in FF, Safari, and Chrome. On to IE!


Need Your Help

Convert a List of Options to an Option of List using Scalaz

scala option scalaz

I want to transform a List[Option[T]] into a Option[List[T]]. The signature type of the function is

Final enum in Thread's run() method

java multithreading enums final

Why is the Elvis elvis definition has to be final to be used inside the Thread run() method?