Rounded corners and shadows in IE-8 versions and below do not work. How to solve this problem?

    6 answers 6

    I advise you to read about css sprites (I will not give you a link, as there is a lot of material on this topic) and to complete the site using png-24 in background-image for drawing corners and shadows. IE6 does not support this approach, so you can write a css-hack for it that displays a message like "the site does not work on grinders, update the grinder." Thus, if everything is correctly folded, the site will look the same in all browsers, without requiring javascript enabled.
    As for IE6, this dinosaur has long been time to merge into junk, and soon it will be IE7's turn. CSS3 can only be used to the fullest when IE8 falls off. Up to this point, CSS3 is just a site decoration for browsers that understand it.

    Everything written above is a deep IMHO and does not pretend to open a holivar.

      Related links:

      As for the tips that offer. I think that hanging a bunch of javascripts for the sake of rounded corners is the wrong approach. Rounded corners can be made, for example, using a picture. Gradient too.

        Using rgba is nice, but not so simple for all the same IE6-8 you need to add crutches

        background: rgba(0,0,0,0.3); *background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); *zoom: 1;

        only this will work fine, and as for the corners and shadows, they need to be made pictures. The easiest way (for a beginner to be a good experience) is to make 4 blocks with the absolute position and a fixed size and spread them around the corners:

         .corTopLeft{position:absolute;top:0;left:0}

        At the same time and practice with sprites.

        • thanks for the advice) - allash

        ie 6,7,8 do not support css3, but there is such a solution as cssPIE

          Modernizer.js is also suitable for IE

            Look for jQuery corners, jQuery border-radius and transparency crutch for png in nete. It seemed they were all there, plus it was described in Russian, but how is it: Shublog .

            If you want a translucent background color, then you can do without png-shek: write in styles

             background-color: rgba(255,255,255,0.3);

            it will be a fill of the block, for example, in black with an opacity of 30%, i.e. The first 3 parameters are the colors: Red, Green, Blue. The 4th parameter is the alpha channel, in Nashensky, opacity.