SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: ie8 zoom issue

  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Code CSS:
    .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?
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    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

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •