Browser Compatibility

Browser Compatibility

This website makes use of several CSS techniques (rounded corners, gradients, and drop shadows), which are only fully visible on newer browsers. If this website doesn't look anything like the below, you should consider upgrading your browser to the latest version or switch to another product.

Preview of typical page
Preview of Typical Page

The CSS used looks something like the following:

<CSS selector>
{
    ...
    
    background: -moz-linear-gradient(top, #3cf, white);
    background: -webkit-gradient(linear, left top, left bottom, from(#3cf), to(white));
    -pie-background: linear-gradient(270deg, #3cf, white);
    /*filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0,startColorStr=#30c0f0, endColorStr=#ffffff);
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient( gradientType=0,startColorStr=#30c0f0, endColorStr=#ffffff)";*/
    
    -moz-border-radius: 3px 15px 15px 3px;
    -webkit-border-radius: 3px 15px 15px 3px;
    border-radius: 3px 15px 15px 3px;

    -webkit-box-shadow: 2px 2px 4px #666;
    -moz-box-shadow: 2px 2px 4px #666;
    box-shadow: 2px 2px 4px #666;
    
    behavior: url(/scripts/pie/PIE.htc);
}

For Firefox users:

The -moz CSS properties are Mozilla-specific. Note, that only Firefox 3.6+ implements them. This version introduced several CSS enhancements, which Firefox 3.5.x doesn't implement. You need to upgrade to at least Firefox 3.6.

For Safari and Chrome users:

Safari and Chrome both support the -webkit syntax and should work equally as well as Firefox. If you don't see gradients and/or rounded corners, you should upgrade to the latest version of your browser.

For Internet Explorer users:

IE8 implements none of the CSS3 features of rounded borders and drop shadows. These are currently emulated by using the all-great CSS3 PIE to display them. The gradients used aren't CSS3 at all. Microsoft's proprietary syntax/es filter: progid:DXImageTransform.Microsoft.Gradient(...) and -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(...)" cause ugly non-aliased font rendering on IE8 and furthermore ignore CSS3 rounded corners used in the same selector.

IE 9 implements most CSS3 features, so the rounded corners and drop shadows should start to look fine starting with that version. However, the described gradient problem persists and CSS3 PIE gradients didn't seem to work on IE9 at first. This is only true for CSS PIE 1.0 beta4 and earlier. You have to use at least CSS3 PIE 1.0 beta5 snapshot and serve the correct content type. See http://css3pie.com/forum/viewtopic.php?f=3&t=1050 on how to make it work.

CSS3 PIE renders rounded corners, drop shadows, and gradients equally as well as Firefox, Safari, or Chrome. CSS3 PIE to the rescue!

For other browser users:

I haven't checked other browsers, sorry folks. If you think something could be working, just contact me.