Center + inside table and overflow auto in IE7

Question

I am having a problem centering an image and a inside a table. At the moment I have set display: inline-block which works on in everything apart from IE7.

Also I have set a parent <div /> with overflow-y: auto, the problem with this is that in IE7 the table is behind the scroll bar, where as in FF the scroll bar is at the side of the table. Is there any way to get around this problem?

This is a simplified version:

enter image description here

score 1 · Accepted Answer · edited May 23 '17 at 12:30

See: http://jsfiddle.net/D52Uv/10/

To fix the scrollbar problem, perhaps the easiest "fix" is *padding-right: 20px, which will apply in only IE6/7. Adjust 20px to whatever looks best.

To fix the image:

.image {
    background: none repeat scroll 0 0 #E7E7E7;
    border: 1px solid #C7C7BB;

    display: inline-block;
    *display: inline;
    zoom: 1;

    margin: 4px 2px 0 0;
    padding: 4px;
    text-align: center;
}
.image img {
    vertical-align: top;
}

More info here.

Center + inside table and overflow auto in IE7

1 Answers1