user2571510 user2571510 - 3 months ago 30
CSS Question

CSS / bxSlider: How to avoid that Images are overlapping parent div

I am using the plugin bxslider (http://bxslider.com/) which in general works great.

My only issue is that the plugin comes with a set shadow of 5px for its viewport so if I am using it inside a div with a colored border on the div it always overlaps that border - the smaller the screen the more obvious the overlap.

Is there an exact way in CSS to override this (exact because it needs to work on small screens / mobiles as well) ?

Firebug shows me the following default CSS that is used for the viewport:

.bx-viewport {
background: none repeat scroll 0 0 #fff;
border: 5px solid #fff;
box-shadow: 0 0 5px #ccc;
left: -5px;
transform: translateZ(0px);
}


I tried the following which resolves the issue for the left border but then it's overlapping the right border:

.bx-viewport {
left:3px !important;
padding-right:3px !important;
}


Update: It works when I set the width of the inner div to 99% but that only covers the larger screens, on mobile the 1% difference is not enough - that's why I am trying to find an exact workaround.
Also, the issue is only for IE 8 as in newer browsers the CSS calc function works great (
width:calc(100% - 9px) !important;
).

Many thanks in advance for any help with this, Tim.

Answer

Am I wrong in assuming that you could simply use:

box-shadow: none !important

I can't imagine a situation where that wouldn't work.