CSS transform skew inside MS CRM 2011 web resource

Question

I am trying to develop a dynamic chevron style progress indicator in a web resource.

Here is a jsfiddle of what I am trying to achieve http://jsfiddle.net/3qYyV/

My problem is that when this is put into a web resource the "transform skew's" do not get applied???

Here is an example web resource...

<html>
<head>
    <title></title>
    <style type="text/css">

        .chevron {
            float: left;
            padding: 0px 0px 0px 2px;
            width: 150px;
        }

        .chevron_a {
            height: 100px;
            width: 150px;
            -webkit-transform: skew(20deg, 0deg);
            -moz-transform: skew(20deg, 0deg);
            -ms-transform: skew(20deg, 0deg);
            -o-transform: skew(20deg, 0deg);
            transform: skew(20deg, 0deg);
            float: left;
            z-index: -1;
        }

        .chevron_b {
            height: 100px;
            width: 150px;
            -webkit-transform: skew(-20deg, 0deg);
            -moz-transform: skew(-20deg, 0deg);
            -ms-transform: skew(-20deg, 0deg);
            -o-transform: skew(-20deg, 0deg);
            transform: skew(-20deg, 0deg);
            float: left;
            z-index: -1;
        }

        .chevron_c {
            margin-left: auto;
            margin-right: auto;
            width: 150px;
            text-align: center;
            font-family: Tahoma;
        }

        .chevron_m {
            display: table-cell;
            vertical-align: middle;
        }

        .chevron_o{
            clear: both;
            display: table;
            position: absolute;
            width: 150px;
            height: 100px;
        }

    </style>
</head>
<body>
    <div id="chevron_w">
        <div class="chevron">
            <div class="chevron_a" style="background: #CCCEEE;"></div>
            <div class="chevron_b" style="background: #CCCEEE;"></div>
            <div class="chevron_o">
                <div class="chevron_m">
                    <div class="chevron_c">TEST</div>
                </div>
            </div>
        </div>
    </div>
</body>

what do you mean by web resource?? you are saying other than static content if you load dynamic content the skew does not come?? is that what you mean? — Alex
What version of IE are you using to test? What rollup is your CRM instance on? Where is CRM are you displaying this WebResource? — Nicknow
Btw, in my third question that was "in" not "is" - SO won't let me edit because I didn't click Save on my edit within the 5 minute window! — Nicknow
IE 11 & IE 9. Rollup 11. the web resource is displayed via an iframe in the incident/case form. I'm going to try it in an instance with rollup 16. — Ollie

joe newstrom joe newstrom · Accepted Answer · 2014-03-05T22:03:16

Have you loaded your CSS as a separate web resource and referenced it from within your HTML?

http://msdn.microsoft.com/en-us/library/gg309536.aspx

CSS transform skew inside MS CRM 2011 web resource

3 Answers