Displaying text at 45 degress in all browsers - html

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.

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]-->

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.

Related

Transform scale css not work in ie8

I have tired everything transform to IE Matrix but transform scale css not work in ie8.
Code:
.fture_box ul li.fture_img img{
width: 451px;
height: 284px;
display: block;
margin: 0 0px 0 11px;
padding: 0px;
float: left;
transform:scale(1.2);
}
.ie8 .fture_box ul li.fture_img img{
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.2, M12=0, M21=0, M22=1.2, SizingMethod='auto expand')";
}
Please tell me what i should do to make it compatible in ie8?
Internet Explorer 8 does not support CCS3 transforms. While adding an extra library might not be what you want, you could look into velocity.js It uses CSS3, when available and falls back to Javascript on older browsers, like IE8. jQuery is optional and not a dependency.
$.velocity({scale: 1.2});
Css transform isn't supported on IE8.
http://caniuse.com provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
CSS transform: http://caniuse.com/#search=transform

Invalid property value CSS rotate

I created a class and I am trying to rotate 45 degrees in CSS, but Chrome says "Invalid property value"
.cr {
background-color: #444;
position: absolute;
left: 5px;
top: 13.5px;
width: 20px;
height: 3px;
-o-webkit-transform: rotate(45deg);
-o-moz-transform: rotate(45deg);
-o-ms-transform: rotate(45);
transform: rotate(45deg);
}
<div class="cr"></div>
Why is this happening??
You don't need the o-webkit.
o stands for Opera, webkit is the engine behind Chrome.
It's simply -webkit-transform: rotate(45deg);
Same with the moz prefix.
Correct is
/* Transform */
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
Check out caniuse.com which prefixes are needed for which browsers or use a service like http://prefixmycss.com/.
On caniuse.com click "Show all" to see more than the last few versions. You probably want to keep the Opera prefixes although it's not needed in recent versions but version 12 which is still quite popular requires them.
Even better would be an automation tool like grunt but that is out of scope for this question.

IE8 rotate filter rotates div but not text

I'm currently trying to rotate text on all browsers incl. ie8+. I have set up my transforms for all the other browsers, but when it comes to IE8, I can only get the box to rotate, the text will not rotate with it.
see here:
https://dl.dropboxusercontent.com/u/106547/rotate/rotate.html
the markup:
<div id='container' class='container'>
<p class='rotated'>
My view has been loaded
</p>
text
</div>
the style:
regular -
.rotated{
display: block;
position: relative;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
and the IE8 conditional
<!--[if lt IE 9]>
<style type="text/css">
.rotated, .container{
zoom:1;
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<![endif]-->
as you can see here, the div/paragraph tags are rotated, but the text is staying horizontal:
I've been poking away at this for a while and can't seem to figure out why it isn't rotating. I'm not worried about the rotation position at the moment, I'm just trying to get it to rotate. Any ideas what is wrong?
Thanks.
for older IE, you should look after writing-mode to rotate entire box :)
http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx
Your IE8 style uses the following selector .rotated, .container, whereas your normal style only rotates .rotated.
This is likely to be the root cause of the problem: the IE8 style is telling the browser to try to rotate both the container and the rotated elements. Since one is inside the other, this means that it will be trying to rotate the inner element twice.
In theory, this would mean that it would end up being upside-down, but we're dealing with IE's activeXfilter` styles here, and they are known blow up when you combine them, so given that I can understand why it would be showing the text un-rotated.
If you're doing a lot of rotating stuff in old IE, you might want to also know about the CSS Sandpaper library. This is a small Javascript polyfill lib that adds support for (near-) standard transform CSS to old IE versions. Using this makes life a lot easier as you can use the same syntax for all browsers, and not have to worry about the ugly filter styles.
Are you working local? Filters for Internet Explorer are only working online.

Rescaling iFrame content works in Chrome - NOT other browsers - any Solutions?

Rescaling iFrame content works in Chrome, but not other browsers. Any solutions? I'd like a cross-browser solution for rescaling an iframe to place a form in.
It doesn't rescale in IE8 and Firefox 15.0.1. It appears at 100% in these browsers, but is reduced in Chrome. Any thoughts?
<iframe src="http://www.apple.com/"
frameborder="0" noresize="noresize" scrolling="no"
width="66%" margin: 0 auto; align= "left "seamless="seamless"style="
-webkit-transform:scale(0.5);-moz-transform-scale(0.5);
width: 400px; height: 400px;"></iframe>
http://jsfiddle.net/DisEngaged/t9yhm/
You have made a small typo / used the wrong syntax for Firefox. You have used a - instead of a :.
Live example: http://jsfiddle.net/t9yhm/3/
Instead of:
-moz-transform-scale(0.5);
It should be:
-moz-transform:scale(0.5);
Also, it is worth noting that the latest versions of Firefox support the unprefixed version:
transform:scale(0.5);
EDIT :
Sorry, I've just noticed that you wanted a "cross-browser" solution. The CSS3 below will support the latest versions of Firefox, Chrome and IE9+ :
iframe{
width: 400px;
height: 400px;
margin: 0 auto;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}
For IE8 and below there is a filter you can use, but it has a complicated syntax:
/* IE8+ - must be on one line*/
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.5,
M12=0,
M21=0,
M22=0.5,
SizingMethod='auto expand');
To help you calculate the matrix values you can use this site: http://www.useragentman.com/IETransformsTranslator/

Safari and Chrome, position of rotated text goes haywire

well, I normally find the answer to my questions here but this time I didn't so I will now ask my first one here! :)
I have some rotated text on my page and it is positioned using position:absolute, like below:
.rotate-box .rotate-text{
display: block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
left: -45px;
top: 170px;
}
<div class="rotate-box">
<span class="rotate-text">Rotated text</span>
</div>
This works fine on all browsers (with webkit) except for Safari and Chrome where the text is displayed about 90px lower than in the other browsers.
To prevent this I have added:
#media screen and (-webkit-min-device-pixel-ratio:0){
.rotate-text {top: 80px !important;}
}
Now the text is in the correct place in all browsers but this doesn't feel right to me... Am I missing something here?
I hate adding browser exception code, it tends to come back and bite you in the long run... :o
Regards,
Anders
Change this line:
-webkit-transform: rotate(90deg);
to
-webkit-transform: rotate(90deg) translate(-100px, 16px);
As you know, this line is only used by the webkit browsers (Safari, Chrome)
You'll probably have to play around with the exact px figures, but then you can get rid of the extra #media screen tag.
Look into transform-origin. Basically, you should be able to do transform-origin: 0 0; (with all the prefixes, of course), and it'll hook the rotate to the top left, which sounds like what you want.