ie8 zoom issue

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?

Hi,

I’m assuming the corners are independent of the content (a sort of top and tail approach) as I couldn’t see the html. If so then yes IE is buggy with zoom and will round things by the odd pixel difference.

You can see a similar effect on my round corners here when you zoom to 200%.

The best way to get around to is to use nested containers to apply the corners and then the result is more consistent but makes the html harder to use with all the nesting.

As far as I’m concerned the odd pixel difference when zoomed is something I can live with as people usually only zoom to read the content and would not be bothered by the odd pixel. Especially as a lot of sites break horribly on zoom anyway so if you only have the 1px problem you are doing well :slight_smile:

However you could probably fix the issue by using nested containers instead (assuming that you aren’t using them already and then I’ll be talking rubbish).

You might also be interested in Eric’s examples as the last two floated corners on that page don’t seem to suffer from the problem as far as I can see but you will need to test for yourself to make sure.