Forums

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

Home Forums CSS Anything Slider – Hiding Overflow in IE Re: Anything Slider – Hiding Overflow in IE

#73345
burtflaxton
Participant

http://pastie.org/1315454

/*
anythingSlider v1.2

By Chris Coyier: https://css-tricks.com
with major improvements by Doug Neiner: http://pixelgraphics.us/
based on work by Remy Sharp: http://jqueryfordesigners.com/
*/
.anythingSlider { width: 716px; height: 303px; position: relative; margin: 0; }
.anythingSlider .wrapper { width: 716px; overflow: auto; height: 303px; margin: 0; position: absolute; top: 0; left: 0; }

/* Width below is max for Opera */
.anythingSlider .wrapper ul { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; margin: 0; }
.anythingSlider .wrapper ul li { display: block; float: left; padding: 0; height: 317px; width: 716px; margin: 0; }
.anythingSlider .arrow { display: none }
.anythingSlider .forward { display: none }
.anythingSlider .back { display: none }
.anythingSlider .forward:hover { display: none }
.anythingSlider .back:hover { display: none }

.anythingSlider-product-grid { width: 950px; height: 303px; position: relative; margin: 0 auto 15px; }
.anythingSlider-product-grid .wrapper { width: 855px; overflow: auto; height: 303px; margin: 0 48px; position: absolute; top: 0; left: 0; }

/* Width below is max for Opera */
.anythingSlider-product-grid .wrapper ul { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; margin: 0; }
.anythingSlider-product-grid .wrapper ul li { display: inline; float: left; padding: 0; height: auto; width: 170px; margin: 0; text-align: center !important; }
.anythingSlider-product-grid .arrow { display: block; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: -250px; cursor: pointer; }
.anythingSlider-product-grid .forward { background-position: 0 0; right: -20px; }
.anythingSlider-product-grid .back { background-position: -67px 0; left: -20px; }
.anythingSlider-product-grid .forward:hover { background-position: 0 -200px; }
.anythingSlider-product-grid .back:hover { background-position: -67px -200px; }

.anythingSlider-product-grid .thumbNav { position: relative; top: 280px; text-align: left; z-index: 9999; }
.anythingSlider-product-grid .thumbNav li { display: inline; }
.anythingSlider-product-grid .thumbNav a { display: none }
.anythingSlider-product-grid .thumbNav a.cur { display: none }

.anythingSlider-product-grid .start-stop { display: none }
.anythingSlider-product-grid .start-stop.playing { display: none }
.anythingSlider-product-grid .start-stop:hover { background-image: none; }

.anythingSlider-product-collateral { width: 675px; height: 303px; position: relative; margin: 0 auto; display: inline; float: left; }
.anythingSlider-product-collateral .wrapper2 { width: 675px; z-index: 0; overflow: hidden; height: 303px; margin: 0; position: absolute; top: 0; left: 0; }

.ui-tabs-panel {overflow: auto !important;}

/* Width below is max for Opera */
.anythingSlider-product-collateral .wrapper2 ul { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; margin: 0; padding: 0; height: 303px; }
.anythingSlider-product-collateral .wrapper2 ul li { display: inline; float: left; padding: 0 10px; height: auto; width: 662px; margin: 0; text-align: left !important; }
.anythingSlider-product-collateral .wrapper2 ul li img { margin-bottom: 20px; }
.anythingSlider-product-collateral .arrow { display: none !important; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: -250px; cursor: pointer; }
.anythingSlider-product-collateral .forward { background-position: 0 0; right: -20px; }
.anythingSlider-product-collateral .back { background-position: -67px 0; left: -20px; display: none; }
.anythingSlider-product-collateral .forward:hover { background-position: 0 -200px; }
.anythingSlider-product-collateral .back:hover { background-position: -67px -200px; }

.anythingSlider-product-collateral .thumbNav { position: relative; top: 280px; text-align: left; z-index: 9999; }
.anythingSlider-product-collateral .thumbNav li { display: inline; }
.anythingSlider-product-collateral .thumbNav a { display: none }
.anythingSlider-product-collateral .thumbNav a.cur { display: none }

.anythingSlider-product-collateral .start-stop { display: none }
.anythingSlider-product-collateral .start-stop.playing { display: none }
.anythingSlider-product-collateral .start-stop:hover { background-image: none; }

.anythingSlider .thumbNav { position: relative; top: 280px; text-align: left; z-index: 9999; }
.anythingSlider .thumbNav li { display: inline; }
.anythingSlider .thumbNav li.arrow { display: none; }
.anythingSlider .thumbNav a { color: #fff; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; text-align: center; font-weight: bold; background-color: #000; }
.anythingSlider .thumbNav a.cur { background: #6b6767; }

.anythingSlider .start-stop { display: none }
.anythingSlider .start-stop.playing { display: none }
.anythingSlider .start-stop:hover { background-image: none; }

/*
Prevents
*/
.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; }
.anythingSlider-product-grid .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider-product-grid .wrapper ul ul li { float: left; }
.anythingSlider-product-collateral .wrapper2 ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider-product-collateral .wrapper2 ul ul li { float: left; }

.clear { clear: both; }

#tabs { border: #aaa 1px solid; margin: 15px auto; overflow: hidden; padding: 2px; width: 700px; }
#tabs .tabs { background: #d6d6d6; border: #aaa 1px solid; padding: 5px 5px 0 5px; }
#tabs .tabs a { color: #000; text-decoration: none; }
#tabs .tabs li.active-tab { border: #aaa 1px solid; border-bottom: #fff 1px solid; }
#tabs .tabs li { background: #fff; border: #d3d3d3 1px solid; border-bottom: #aaa 1px solid; float: left; margin-right: 5px; padding: 5px 10px; position: relative; top: 1px; }

#tabs #tabs-content, #tabs #tabs-content li { width: 700px; }
#tabs #tabs-content { clear: both; overflow: hidden; width: 700px;}
#tabs #tabs-content ul { display: block; width: 3000px; }
#tabs #tabs-content li { float: left; }
#tabs #tabs-content li p { margin: 10px; }