SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member vitalic's Avatar
    Join Date
    Sep 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    rounded corners screwed up on zoom

    anyone have any ideas?

    hxxp://i28.tinypic.com/o6ef0o.png

    when using the default browser zoom in firefox the corner images enlarge by a greater magnitude than the rest of the border (3px solid) which basically means they look awful.

    has anyone come across this before and any way to make it grow proportionally?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm guessing what you are seeing is a rounding error when the page is zoomed and 1px of the background shows through. I wouldn't think that there is much you can do about that and without seeing what method you are using for the corners it would be hard to make a suggestion. Are you absolutely placing them into position? If so they may be better of in nested containers instead.

    If that's the only issue you get on zoom then I wouldn't think it was worth the effort tracking it down or changing the layout a sits only a minor presentational defect.

  3. #3
    SitePoint Member vitalic's Avatar
    Join Date
    Sep 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, it's uber simple, four divs absolutely positioned over the underlying div. Nested containers would be overkill given that the affect is only needed for Javascript users, the corner divs are inserted client-side and then absolutely positioned into place, I guess the best solution in my case would be a non-image based JS approach but not sure it's worth the time investment.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    No it's probably too much effort to change but absolute images will always get misplaced by the odd pixel due to rounding errors when zoomed etc.

    As an aside IE6 and 7 are bad at normal page size and always get the absolute right and bottom positions incorrect by 1px when the distance travelled is an odd number of pixels .

  5. #5
    SitePoint Member vitalic's Avatar
    Join Date
    Sep 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't know that, there is actually a similar visual defect on IE6, at normal page size on the bottom left and right corners, guess that explains it!

    I hate having to explain to people why something can't be fixed, or isn't worth the effort to fix.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Yes, I documented it here some years ago.

    http://www.pmob.co.uk/temp/onepxgap.htm

    Eric has a partial solution here.

  7. #7
    SitePoint Member vitalic's Avatar
    Join Date
    Sep 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That fix worked a treat on the IE defect

  8. #8
    SitePoint Member
    Join Date
    Sep 2009
    Location
    New York City
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i cant wait until css3 and html5 become widespread standards

  9. #9
    SitePoint Guru
    Join Date
    Oct 2008
    Location
    Melbourne
    Posts
    754
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you seen this one:

    http://www.css3.info/a-border-radius-solution/

    ... in which the author uses images for IE, and border-radius or moz-border-radius for Firefox or Safari? This example is fixed width, but the principle is still the same -- you just make the positioned divs invisible, throw in your border-radius for well behaved browsers, then use some conditional comments to reveal the divs only in IE. Or I guess you could use JS to insert the styles, since you're using JS to insert the divs anyway.
    "I'm Commander Shepard, and this is
    my favourite post on the internet."

    We'll miss you, Dan Schulz.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by raena View Post
    Have you seen this one:

    http://www.css3.info/a-border-radius-solution/

    ... in which the author uses images for IE, and border-radius or moz-border-radius for Firefox or Safari? This example is fixed width, but the principle is still the same -- you just make the positioned divs invisible, throw in your border-radius for well behaved browsers, then use some conditional comments to reveal the divs only in IE. Or I guess you could use JS to insert the styles, since you're using JS to insert the divs anyway.
    That should solve the OP's zoom problem in Firefox

  11. #11
    SitePoint Guru
    Join Date
    Oct 2008
    Location
    Melbourne
    Posts
    754
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That should solve the OP's zoom problem in Firefox
    Yup, I suspect that + your IE odd number fix should get some nice results for almost everyone.
    "I'm Commander Shepard, and this is
    my favourite post on the internet."

    We'll miss you, Dan Schulz.

  12. #12
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by allofcraigs View Post
    i cant wait until css3 and html5 become widespread standards
    You'll be waiting a long time :P


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
  •