Code Slider Centering on 125%+ & Box Shadow Issue

[MBM]

I’ve centred code slider with the following :

.coda-slider-wrapper {position:relative;margin: 0 auto;width:50%;overflow:hidden;}

And added a box shadow effect :

-webkit-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);

-moz-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);

box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);}

The box shadow is splling out of the slider frame. When I increase the page zoom level the slider stays in the center of the page but at 125% and over the text flows out of the container and scrollbars appear at the bottom of the panel despite adding overflow:hidden to the css. How do I make the panel, text and box shadow resize and stay in the center and get rid of the scrollbars?

http://mbmitservices.co.uk/TBSC/index.html

Full Coda slider css :

/* Insignificant stuff, for demo purposes */



body { padding: 20px }

.panel h2.title { margin-bottom: 10px }

noscript div { background: #ccc; border: 1px solid #900; margin: 20px 0; padding: 15px;}



/* Most common stuff you'll need to change */



.coda-slider-wrapper {position:relative;margin: 0 auto;width:50%;overflow:hidden;

-webkit-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);

-moz-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);

box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);}

.coda-slider { background: #ebebeb }



/* Use this to keep the slider content contained in a box even when JavaScript is disabled */

.coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px }



/* Change the width of the entire slider (without dynamic arrows) */

.coda-slider, .coda-slider .panel { width: 800px; height:850px;}



/* Change margin and width of the slider (with dynamic arrows) */

.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 600px;}

.coda-slider-wrapper.arrows .coda-slider { margin: 0 10px }



/* Arrow styling */

.coda-nav-left a, .coda-nav-right a { background: #000; color: #fff; padding: 5px; width: 100px; }



/* Tab nav */

.coda-nav ul li a.current { background: #39c; }



/* Panel padding */

.coda-slider .panel-wrapper { padding: 20px;}



/* Preloader */

.coda-slider p.loading { padding: 20px; text-align: center; }



/* Don't change anything below here unless you know what you're doing */



/* Tabbed nav */

.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden;}

.coda-nav ul li { display: inline }

.coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none;

font-family: 'PT Sans Narrow', sans-serif; font-size:18px;}



/* Miscellaneous */

.coda-slider-wrapper { clear: both; overflow: auto }

.coda-slider { float: left; overflow: hidden; position: relative }

.coda-slider .panel { display: block; float: left }

.coda-slider .panel-container { position: relative }

.coda-nav-left, .coda-nav-right { float: left }

.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }

[Author]

Posts