The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Anything Slider Issue… Re: [Solved] Anything Slider Issue…


Turns out the background was in .wrapper ul <– wonders why Chris put it there^^ where it needed to be in .wrapper I dont know how as there was only one background setting but it was causing a double background… thing, it that covered up the rounded corners with square ones. I noticed it after i gave up and figured i would try a drop shadow instead, the shadow magically bent into no where, some trial and error , and now i got it working.

Fixed code:

anythingSlider v1.2

By Chris Coyier: Edited By: Jeremy Carlsten
with major improvements by Doug Neiner:
based on work by Remy Sharp:

.anythingSlider { width: 760px; height: 360px; position: relative; margin: 50px auto 15px; }
.anythingSlider .wrapper { width: 680px; height: 341px; overflow: hidden; margin: 0 40px; position: absolute; top: 0; left: 0; background: #0A0C0C;/* Fall Back */ background: rgba(10, 12, 12, 0.6); -webkit-box-shadow: 3px 3px 3px #000; -webkit-border-radius: 20px; }

/* Width below is max for Opera */
.anythingSlider .wrapper ul { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; margin: 0px; padding: 30px 10px; }
.anythingSlider ul li { display: block; float: left; padding: 0; height: 317px; width: 680px; margin: 0; }
.anythingSlider .arrow { display: block; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }
.anythingSlider .forward { background-position: 0 0; right: 0px; }
.anythingSlider .back { background-position: -67px 0; left: 0px; }
.anythingSlider .forward:hover { background-position: 0 -197px; }
.anythingSlider .back:hover { background-position: -67px -197px; }

.anythingSlider .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider .wrapper ul ul li { float: none; height: auto; width: auto; background: none; }