(Why is zentools a-a-a-a-all the way down the bottom of the list?)

On a site I'm skinning up, there is currently a Zentools2 carousel at the top. Look at the oddities on mouseover.... scratching my head. (this is also the item i want to autoadvance in threes, but then, I similarly want world peace, prosperity for all, and palatable vegan food.)

dev site

(edit: i fixed one problem, caused by a margin-bottom setting coming from the module stylesheet.)

The issue is the text and background not showing straight away? e.g. it scrolls and then a pause before the text and background block display?

braaaap! sorry, but thank you for playing....

the issue is the frame outline on rollover makes all kinds of wierd stuff happen (at a resolution of 4px). Any way to keep that outline INSIDE the box?

ah right

This code you added

.ppl-fp-carousel div.owl-item:hover {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid #a32a23;
}

yes - trying to keep that border INSIDE the box and avoid pushing the divs below down. This kluge accomplishes some of what I want, but I can't get the border at the bottom to match the other three sides.

.ppl-fp-carousel div.owl-item:hover {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid #a32a23;
margin-bottom: -4px; <-- prevent div shifts below
}

.ppl-fp-carousel .owl-carousel .owl-wrapper-outer {
overflow: hidden;
position: relative;
width: 100%;
background: #000 !important; <-- prevent white line on mouseover
}

ah I tried this as well using the negative margin to match the border width

also tried an outline method

I ended up discounting both as I couldn't get it to work

at the moment

owl-item active is extending below so the bottom border looks trimmed

hmm not having much joy with this

It is 1px difference by the look of it