After working on developing a website using Chrome and Firefox, I've come to realize that it appears broken when viewed on Internet Explorer. Fixing the issue is turning out to be more challenging than I had initially anticipated.
The primary problem stems from the fact that my site makes use of skewed elements (acting as parallelograms), but this skew effect is not being rendered correctly in IE. These divs are assigned the class "parallelogram", and in my code, I have included:
div.parallelogram {
position: absolute;
top: 0;
right: 25%;
z-index: 20;
height: 100%;
width: 20%;
margin: 0;
background-color: #000;
color: inherit;
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.3, M12=1.3,
M21=0.7, M22=0, SizingMethod='auto expand')"; }
Although I'm aware that the "filter:" tag is missing, based on my research, it should only be necessary for IE7 or earlier versions. My goal is to get it functioning properly in at least one version of IE before tackling the compatibility with others!
Upon inspecting the code in Chrome, I noticed that the -ms-filter tag is present but struck-through. However, in IE, it doesn't appear at all. Despite copying code snippets from various online generators multiple times, the issue remains unresolved. Any suggestions?
Here's a page having this particular problem. Please note that the intentional breaking of links was done by me.
UPDATE: Thanks to Teemu's advice, I added -ms-transform, enabling me to make the skew effect work on IE9 and above. Nonetheless, my objective is to ensure compatibility with at least IE8 as well.