A designer @fontface dokuwiki template for writers

Site Tools

Browser Shots

So how is your website going to be rendered according to the browser used? Basically there are three issues which must be addressed:

  • Fontface embedding: Fortunately this is no longer an issue as practically all browsers (even the less commonly used) now accept @fontface
  • Header image stretching: IE8 does not extend the header image to the end of the screen when screen resolution is larger than the header image width, which can be seen in the ie_8_1600px_resolution.jpg screenshot below.
  • Heading shadows: Of less importance. Internet Explorer does not render text shadowing, which is a pity because it looks really cool.

As far as I know, Internet Explorer 6 and above, Safari 3.1 and above, Firefox 3.5 and above, Opera 10 and above, and Chrome all take font embedding. Of course these browsers make up practically all internet users, but I still wanted to do a check as well as take a look at a few other browsers, so...

Renders @fontface correctly:
Chrome 5 and above
Firefox 3.6 and above
IE7 and above (it doesn't render shadow)
Opera 9.8 and above
Safari (except iphone)

Does not render @fontface correctly:
Camino (at least version 2)
Epiphany (at least 2.22, no shadow either)
Firefox 3 and below (no @fontface, no shadow)
Flock (at least 2.6.2, no shadow either)
IE6 and below (no shadow either, and it's all out of place as well… but then again, who still uses IE6?)
Konqueror (the shadow looks wierd, too)
Navigator (no shadow either)
Opera 9.64 and below