Missing shadows under IE9 and Opera

  • Meteora

    #4039

    Good evening,

    Missing shadows under IE9 and Opera

    http://img801.imageshack.us/img801/1707/ombresp.jpg

    graphene 1.6.2

    Mod

    Kenneth John Odle

    #27050

    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.)

    Anonymous

    #27051

    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.

    Meteora

    #27052

    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);
    }
    Mod

    Kenneth John Odle

    #27053

    but not IE.

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

    Meteora

    #27054

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

    [/code]

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

    [code]

    Mod

    Kenneth John Odle

    #27055

    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.

    Anonymous

    #27056

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

    http://www.colorzilla.com/gradient-editor/

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

    http://border-radius.com/

    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.