Missing shadows under IE9 and Opera

  • Meteora


    Good evening,

    Missing shadows under IE9 and Opera


    graphene 1.6.2


    Kenneth John Odle


    If you’re referring to the widget headers, it is the gradients that are missing.

    As I mentioned in your other thread, different browsers will display things differently. IE is notorious for not being standards compliant. Opera is far better than IE in many ways, but it still does not display things the exact same way as Firefox.

    I’ve used a number of different browsers–Firefox, IE, Opera, Safari, Konqueror, SeaMonkey, Camino, etc.–and they all display things differently. It’s just something you have to accept on the web. The best advice is to always urge your readers to use a standards-compliant browser, like Firefox. (You would be amazed at how many people don’t even know that browsers other than IE even exist.)



    Copy gradient code using firebug and add -o- before linear-gradient for opera, and -ms- for IE.

    Then paste the Gradient CSS in child theme style sheet o in Graphene Options –> Display –> Custom CSS. It works for Opera. But, I haven’t tested this in IE.



    thank you,

    So I added this code, it works in Opera but not IE.

    .sidebar h3 {

    background: -o-linear-gradient(#892523, #491413);
    background: -ms-linear-gradient(#892523, #491413);

    Kenneth John Odle


    but not IE.

    This is typical of MSIE. It is the least-compliant browser of all.



    I found this code for IE6-9 works. But it removes rounding.


    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#892523′, endColorstr=’#491413′,GradientType=0 ); /* IE6-9 */



    Kenneth John Odle


    But it removes rounding.

    It’s usually a matter of compromise with MSIE. You can have one or the other, but not both. You just have to decide which you want your readers to see.



    Use this site to create your gradient to work in most browser and yes even IE I have done it.


    Use this site to generate your rounder corners also works on IE.


    Your code would look like this:

    .sidebar h3 {
    background: #892523; /* Old browsers */
    background: -moz-linear-gradient(top, #892523 0%, #491413 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#892523), color-stop(100%,#491413)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #892523 0%,#491413 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #892523 0%,#491413 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #892523 0%,#491413 100%); /* IE10+ */
    background: linear-gradient(top, #892523 0%,#491413 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#892523', endColorstr='#491413',GradientType=0 ); /* IE6-9 */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

Viewing 8 posts - 1 through 8 (of 8 total)

  • You must be logged in to reply to this topic.
Graphene Themes Forum