Displaying text at 45 degress in all browsers

Question

I've got a peculiar problem related to a requirement to display a piece of text at 45 degree angle. The requirement is to support "all browsers", however I managed to eliminate IE6 (thank-you-very-much) and older versions of Mozilla/Opera. The requirement is for this display is like this:

I can get this sorted in CSS3 compliant browsers (latest versions of pretty much everything) using this CSS/HTML:

<style type="text/css">
.homepage-top .red-corner {
    position: absolute;
    right: 0px;
    top: 300px;
    width: 0px;
    height: 0px;
    border-top: 55px solid #e11e2d;
    border-left: 55px solid transparent;
    z-index: 9;
}

.homepage-top .free {
    position: absolute;
    right: 3px;
    top: 310px;
    text-transform: uppercase;
    color: white;
    font-size: 10pt;
    font-weight: bold;
    z-index: 10;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -sand-transform: rotate(45deg);
    transform: rotate(45deg);
}
</style>

<div class="red-corner"><!-- --></div>
<div class="free">free</div>

It works well with IE9 and newer Firefox, Safari and Opera. Then I need to get IE7 and IE8 working - and this is where it becomes interesting. I can use filter on IE7 and -ms-filter on IE8 - and I get very interesting results indeed.

The filter/-ms-filter look like this:

filter: progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

Adding this to the .homepage-top .free selector causes IE7 to display the rotated text correctly (although with some black tint to white letters, but I can live with that) - but it ignores absolutely EVERYTHING in the css file following that line. Removing the filter line restores the rest of the CSS, but, naturally, does not rotate the text.

In IE8 everything works correctly, however adding this to the selector causes IE9 to malfunction. It seems that IE9 is trying to use both -ms-filter and -ms-transform properties - and this causes some internal confusion. As a result, IE9 display looks like this:

Clearly, something is wrong here - but how do I go about fixing this so that it works in IE7, 8 and 9?

Many thanks in advance.

Solution 1

You can use conditional comments to provide each MSIE its own stylecheet. http://de.wikipedia.org/wiki/Conditional_Comments

<!--[if lte IE 8]> <style>...</style> <![endif]-->

<!--[if IE 9]> <style>...</style> <![endif]-->

Solution 2

Is it possible to simply use an image? I normally prefer styling plain text with CSS over using an image, but since you need to support older browsers, an image is a much simpler solution.

Comments

[Aleks G]

That was my first thought, however I need to also support different languages with dynamic language switching and ability to add other languages. Therefore I'd have to have a separate image for each language. Not pretty, but maybe that's the way to go.

[Aleks G]

I know this - and I'm using these in a few places - so that's also an option, however this is not going to help with IE7 ignoring everything after the 'filter' line.

[danijar]

It should solve the IE 9 struggle. Unfortunatly I can't help with IE 7. (Don't support IE 7 in my webprojects...)

[Aleks G]

I wish I could drop it, but a lot of my work is dealing with government departments, many of which are still on IE7 and have no plans to migrate at least until 2014.

[Aleks G]

Interestingly, I taken 'filter/-ms-filter' out of the main css file and added them with the corresponding conditionals (for ie7 and ie8) into the actual html file (I don't like doing this, but in this case gave it a try) - and all versions of IE now display the rotated text correctly.