I’m having a problem with ie8 when the browser is set to anything other that 100%
I have a wordpress blog that is using css to make a content box with rounded corners
the corners on the left hand side (top and bottom) work fine but the ones on the right hand side have the error shown in the attached image
the corners seem to be fine at 100% but then at anything over it seems like the image is starting to repeat itself
.column-center {
overflow:hidden;
height:100%;
padding:0px 0px 0px 0px;
}
.column-center .corner-left-top {
background:url(images/corner-left-top.gif) no-repeat 0 0;
}
.column-center .corner-right-top {
background:url(images/corner-right-top.gif) no-repeat right 0;
overflow:hidden;
height:100%;
padding:31px 29px 10px 21px;
}
.content-bot {
height:18px; background:url(images/corner-left-bot.gif) no-repeat 0 0;
margin:0px 0px 0px 0px;
}
.content-bot .bg01 {
background:url(images/corner-right-bot.gif) no-repeat right 0;
padding:0px 18px
}
.content-bot .bg02 {
background:url(images/content-bg-bot.gif) repeat-x 0 0;
height:18px;
}
.column-center .bg {
background:url(images/content-bg.gif) repeat-x 0 bottom #eceff7;
}
is there a bug with ie8 when zooming in or is it something wrong with my css, everything seems to be fine in firefox and safari (and ie8 as long as its at 100%)
can anyone help me out?