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

HTML & CSS
1

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

Too many universal selectors?


/* global box-sizing */
[COLOR=red]*,[/COLOR]
*: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

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

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. :slight_smile:

5

Thanks guys, I appreciate it.

.wrapper to 962px did the trick

6

You can’t delete the first start Ron as that will stop the box-sizing from working on all elements.:slight_smile: 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 :slight_smile:

7

I realized within a couple of hours after posting that the uncertainty that I’d expressed was justified :eek: … 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. :slight_smile: Chalk it up to the learning process :slight_smile:

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!