blue slider in IE

  • Anonymous



    Hope some one can help me…I have made the clild themes and all work fine..but in IE the slider is still blue…

    What can I do about that?

    Best regards



    Syahir Hakim


    If you see in the theme’s style.css file, the CSS rules for the blue background colour of the slider is this:

    -pie-background: linear-gradient(left top, #0F2D4D, #2880C3);
    background: #0F2D4D;
    background: linear-gradient(left top, #0F2D4D, #2880C3);
    background: -moz-linear-gradient(left top, #0F2D4D, #2880C3);
    background: -webkit-gradient(linear, left top, right bottom, from(#0F2D4D), to(#2880C3));

    In contrast, this is what you have in your child theme’s style.css for the slider background CSS rules:

    background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
    background: linear-gradient(left top, #E0E0E0, #EEEEEE);

    You see, the theme’s style.css uses 5 lines of CSS when declaring the background colour for the slider, and every single line of those is there for a reason. The reason is each line supports different browser, e.g. line 1 for IE8 and below, line 2 for IE9, line 3 for future browsers that support CSS3 natively, line 4 for Mozilla-based browsers, like Firefox 3.6 and older, and finally line 5 is for webkit-based browsers, like Google Chrome and Safari.

    As these browsers get updated and fully supports CSS3 natively and almost all of web users switch to these modern browsers, those 5 lines will be reduced to only a single line: line 3. But it would take years and years before that happens, so what we’re using there is a method that supports both past and future browsers, at a cost of 4 extra lines. It’s a pretty teenie tiny price to pay.

    So now you know that, hopefully you will also realise that in order for your customised slider background colour to show consistently in all major browsers, you’d have to include all 5 lines in your custom child theme’s style.css file as well. The same goes for other elements in the theme that uses linear gradient, like the sidebar item’s header, and the block buttons.

    Gitte Dahm



    Many thanks for your reply … it has been instructive.

    I am very grateful to you for your help

    Best regards,




    Hi Syahir,

    I followed your instructions for the 5 lines of CSS but unfortunately, it’s still not refreshing in IE however it my page is exactly how I want it to look in Mozilla.

    Could you pleeeeeeeeeaaaaaaaassssseeee help me?? Pretty please with sugar on the top?


    I even lost the gradience in the featured post border…. my gradient color codes are #CE0B50 to #FF99CC

    My site:

    Thank you in advance!!



    Hi Kimmi

    I think these lines just might do it:

    background: -moz-linear-gradient(left top , #CE0B50, #FF99CC) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, left top, right bottom, from(#CE0B50), to(#FF99CC));
    background: linear-gradient(left top, #CE0B50, #FF99CC);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CE0B50', endColorstr='#FF99CC'); /* for IE8 */
    -pie-background: linear-gradient(#CE0B50, #FF99CC);
    -moz-box-shadow: inset 0px 0px 1px 1px #CE0B50;
    -webkit-box-shadow: inset 0px 0px 1px 1px #CE0B50;
    box-shadow: inset 0px 0px 1px 1px #CE0B50;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#FF99CC', Direction=90, Strength=3) !important; /* for IE */

    .featured_slider #slider_root {
    -moz-box-shadow: inset 0px 0px 1px 1px #CE0B50;
    -webkit-box-shadow: inset 0px 0px 1px 1px #CE0B50;
    box-shadow: inset 0px 0px 1px 1px #CE0B50;
    background: none repeat scroll 0 0 #FFFFFF;

    Holy moly, great pictures bye the way. Regarding the slider, have You seen the other way

    to display the slider? I have it on my site in only 200px height. The view post button &

    small calendar pictures can also be changed, if You want 🙂




    OMG – it worked! You are a genius! Thank you soooo much Kim!

    I just checked out your site- I like it on the right too, maybe I’ll change in in a couple of weeks!

    Thank you I’m just learning how to work on sites so I am stoked it’s coming out so well!


    *thank you for the compliment on the pictures :-)*



    Okay.. You just ask 🙂




    you are a doll! thanks!



    Looking at .block-button or blue button (view full post) turn red 🙂

    .block-button, .block-button:visited {
    -moz-border-radius: 5px 5px 5px 5px;
    border: 0px solid #CCCCCC;
    font:bold 12px arial;
    padding:5px 15px 6px 15px;
    text-shadow:0 -1px 1px #000000;
    -moz-box-shadow: 0 0 0px #333333;
    -webkit-box-shadow:0 0 0px #333333;
    box-shadow:0 0 0px #333333;
    background: -moz-linear-gradient(#CE0B50, #FF99CC) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#CE0B50), to(#FF99CC));
    background:linear-gradient(#afaeae, #6E6E6E);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#afaeae', endColorstr='#6E6E6E'); /* for IE */
    -pie-background: linear-gradient(#CE0B50, #FF99CC);

    background:-moz-linear-gradient(#FF99CC, #CE0B50);
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#FF99CC), to(#CE0B50));
    background:linear-gradient(#FF99CC, #CE0B50);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF99CC', endColorstr='#CE0B50'); /* for IE */
    -pie-background: linear-gradient(#FF99CC, #CE0B50);




    Kim you seriously are a doll! I just updated it and I LOOOOOVE IT! Thank you for sending me that update :-*

Viewing 10 posts - 1 through 10 (of 11 total)

  • 1
  • 2
  • You must be logged in to reply to this topic.