CSS3 fallback for older browsers

Question

I have made a circle using CSS3, trouble is in older browsers (ie7 etc) the circle appears as a square.

I know I could use a background image as a backup, but doesnt this defeat the point of using code?

If i was to put background-image in, where would it go in the CSS?

.ButtonB:hover, .ButtonB.hover {
    background: -moz-linear-gradient(
        center top,
        rgba(255, 255, 255, .2) 0%,
        rgba(255, 255, 255, .1) 100%
    );/* FF3.6 */
    background: -webkit-gradient(
        linear,
        center bottom,
        center top,
        from(rgba(255, 255, 255, .1)),
        to(rgba(255, 255, 255, .2))
    );/* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
}

Answer 1

Using the following will provide better support for a variety of browsers and will fallback to a solid colour when gradients are not supported, you could replace this solid colour with an image.

background: #0A284B;  /* for images use #0A284B url(image.jpg)*/
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.

Answer 2

You're using a whole load of CSS features that aren't supported in older browsers -- gradients, alpha channel transparency, may border radius too.

Short answer is that often the best answer is simply to leave it and let the really old browsers show it differently; it may not look as pretty as you intended, but if it's usable in IE7 then you've probably done enough already.

If you really do need to support these features in IE7 and other old browsers then you might want to look into CSS3Pie, which provides a javascript-based fallback solution in IE for all of the features I can see you using here. Download the script and follow the instructions on the site for setting it up.

Hope that helps.

Answer 3

.ButtonB:hover, .ButtonB.hover {
    background: url('yourpathtoimage'); /* for old browsers */
    background: -moz-linear-gradient(
        center top,
        rgba(255, 255, 255, .2) 0%,
        rgba(255, 255, 255, .1) 100%
    );/* FF3.6 */
    ...
}

In this case if browser support linear-gradient it will override first line.