CODEWITHSUNDEEP
javascripthtmlcsscss3pie
user263078
user263078

Reputation:

css3pie styling failure- displays nothing

I am working on a web page that uses css3pie to drastically increase IE8 support. The page, you will notice, has "Upload" and "Download" buttons, which look nice in modern browsers.

In IE8 with css3pie, it looks almost as nice... (still lacks inset shadows) or at least it used to. I did a lot of edits while using Chrome, and then checked back to IE8. Big mistake.

Somewhere in the middle of those edits, I broke css3pie, and I've tried everything I can think of to fix it, but I just can't figure it out...

It may be worth nothing that when it worked, the buttons were contained in <div> tags, not <span> tags, (I changed it to make it valid HTML) though changing it back to a <div> does not fix it.

Do you know what is wrong, and if applicable, how I can avoid it in the future?

IE8's failure:
IE8

What it should look somewhat like:
Goal

(white steak at top and white text shadow does not render even with css3pie working though)

CSS code:

span.button {
    behavior: url(/css/PIE/PIE.htc);
    display:inline-block;

    color:rgb(38,67,107);
    text-shadow: 0px 1px 0px #FFFFFF;
    font-family: 'Oswald', sans-serif;
    font-size: 140%;

    padding-top:1px;
    padding-bottom:3px;
    padding-left:10px;
    padding-right:10px;

    background-color:rgb(200,225,255);

    background-image: linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
    background-image: -o-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
    background-image: -moz-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
    background-image: -webkit-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
    background-image: -ms-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
    -pie-background: linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(185,209,250)),
        color-stop(0.69, rgb(200,225,255))
    );

    border:1px solid rgb(120,140,180);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    box-shadow: inset 0 2px 4px 0 #FFFFFF;
    -webkit-box-shadow: inset 0 2px 4px 0 #FFFFFF;
    -moz-box-shadow: inset 0 2px 4px 0 #FFFFFF;
}

span.button:hover {
    text-shadow: 0px 1px 0px rgb(242,242,242);
    background-color:rgb(190,213,242);

    background-image: linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
    background-image: -o-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
    background-image: -moz-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
    background-image: -webkit-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
    background-image: -ms-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
    -pie-background: linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(176,199,238)),
        color-stop(0.69, rgb(190,214,242))
    );

    border:1px solid rgb(96,112,144);
}

span.button:active {
    box-shadow: inset 0 0 11px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 11px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0 0 11px 0 rgba(0,0,0,0.2);
    background-color:rgb(155,200,232);
}

Upvotes: 0

Views: 437

Answers (1)

lojjic
lojjic

Reputation: 791

I suspect your problem is the z-index issue described here: http://css3pie.com/documentation/known-issues/#z-index

Short story is that adding position:relative will likely fix it.

Upvotes: 1

Related Questions