SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot w1nk5's Avatar
    Join Date
    Aug 2009
    Location
    Ontario, Canada
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image blurry in Chrome & IE, but crystal clear in FireFox.

    Can anyone explain to me why the header on this site: http://event.barefootlive.co.uk/iiag2013/en/register/ is blurry in Chrome and IE but crystal clear in FireFox?

    Much appreciated!

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Too many universal selectors?

    Code:
    /* global box-sizing */
    *,
    *:after,
    *:before {
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-font-smoothing:antialiased;
        font-smoothing:antialiased;
        text-rendering:optimizeLegibility;
    }
    Delete the first star.

    It's not really about too many stars. Apparently, Chrome and IE have a problem with the box-sizing property and it is affecting the image. Don't know why, though.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    It just might be that the 960px foreground image is being squeezed into a 958px box and FF resizes it more gracefully than IE or Chrome, but that's just a guess.

  4. #4
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Yes, that must be it. Scaling rather graphical images by the browsers can be tricky: they do it different.
    If you replace .wrapper {width: 960px} by .wrapper {width: 962px}, then the image is exactly 1:1, and Chrome is OK also.


  5. #5
    SitePoint Zealot w1nk5's Avatar
    Join Date
    Aug 2009
    Location
    Ontario, Canada
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, I appreciate it.

    .wrapper to 962px did the trick

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,348
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    Too many universal selectors?

    Code:
    /* global box-sizing */
    *,
    *:after,
    *:before {
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-font-smoothing:antialiased;
        font-smoothing:antialiased;
        text-rendering:optimizeLegibility;
    }
    Delete the first star.
    You can't delete the first start Ron as that will stop the box-sizing from working on all elements. The :after and :before pseudo elements however get missed unless you also set them specifically.

    The method is advocated by Paul Irish so that all padding and borders are contained within the width set and makes percentage layouts much easier to manage. This is one thing that IE5 got right

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You can't delete the first start Ron as that will stop the box-sizing from working on all elements. The :after and :before pseudo elements however get missed unless you also set them specifically.

    The method is advocated by Paul Irish so that all padding and borders are contained within the width set and makes percentage layouts much easier to manage. This is one thing that IE5 got right
    I realized within a couple of hours after posting that the uncertainty that I'd expressed was justified ... that my universal selector observation was all wet and that the image was in fact being squeezed (which Francky tested and confirmed). Couldn't change the post, though. Chalk it up to the learning process

    Didn't realize that the *:before and *:after elements would be missed, so that's new news that's good to know.

    Thanks very much for the link to Paul Irish's article. Slow adopter that I am, Paul's article gives me a boost to start using box-sizing:border-box more confidently.

    Cheers!


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
  •