Question

Here is an example: http://jsfiddle.net/7zhLm/5/

The image inside is larger than the div supports.

Therefore it is cropping the rest (overflow-x: hidden).

I am trying to create a white border around the image, but it doesn’t seem to work.

After checking what’s going on there with dev tool I saw that the lower part overlays the white border.

How to I fix that?

Answer 1

I see you’re using both overflow-x and overflow-y. You can just use overflow:hidden; as it works on any browser while -x and -y are not supported by older ones.

Anyway, to avoid it you can add another <div>. Check the live demo, and here is the updated code:

<div id="fixed_event_1" class="splashTabLogout" >
<div>
<img src="http://www.twospy.com/galleriffic/demo/Sample%202.jpg" width="300" />
</div>
</div>

.splashTabLogout {
    width: 300px;
    height: 100px;
    cursor: pointer;
    background: #fff;
    padding: 10px;
    /* border-radius and box-shadow stuff */
}
.splashTabLogout > div {
    max-width:100%;
    max-height:100%;
    overflow:hidden;
}