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/
Related
I have the following mixin for cross-browser transform:
.transform (...) {
-webkit-transform: #arguments; /* Chrome, Opera 15+, Safari 3.1+ */
-moz-transform: #arguments; /* Firefox 3.5+ */
-ms-transform: #arguments; /* IE 9 */
-o-transform: #arguments; /* Opera 10.5+ */
transform: #arguments; /* Firefox 16+, IE 10+, Opera */
}
.translate(#x:0, #y:0) {
.transform(translate(#x, #y));
}
And apply it something like the following:
#main {
.translate(280px, 0);
}
But it's not wotk in IE8 and Opera mini. Is there some fallback, polyfill or any for supporting it in therese browsers?
There are a few you can use, the ones suggested from modenizer are:
css sandpaper and transformie.
I'd argue though, that adding pollyfills to older browser like ie8 damages the performance of an already past it browser and lowers the user experience. Also, if you are adding pollyfills to mobile browsers you are adding to the loading times which in a 3g connection might put users off.
How can I make this line rotation work in IE8? I used this to get the ms-filter but still wont work..
Here's a JSFIDDLE.
Heres the HTML:
<div class="mainmenu">
test
</div>
and the CSS:
.mainmenu:before {
background: none repeat scroll 0 0 #333333;
content: "";
display: block;
height: 1px;
position: relative;
right: 12.5%;
transform: rotate(-45deg);
width: 35%;
z-index:10000;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
}
Any Help Greatly Appreciated.. Thanks
IE8 doesn't support standard CSS3 rotation, but it does have the -ms-filter style, which is capable of doing the same thing (albeit with much more complex syntax, and some annoying caveats).
However, if you're prepared to use a bit of Javascript, I would strongly recommend using a good polyfill script for this, which will allow you to use the standard CSS rotate syntax even for old IE versions.
The best polyfill script I know of for rotation is CSS Sandpaper.
Using this means you can use (near) standard CSS code, which means that (1)your code is more consistent between browsers, and therefore easier to maintain, and (2) you don't need to learn the horrible -ms-filter syntax.
So instead of the -ms-filter code, you'd have a line that looks like this:
-sand-transform: rotate(-45deg);
In addition to rotate, CSS Sandpaper also implements a variety of other CSS3 effects into old IE versions, which makes it a very useful tool.
Hope that helps.
transform: rotate(45deg); /* CSS3 (for when it gets supported) */
-moz-transform: rotate(45deg); /* FF3.5+ */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS rotate property in IE
Can any one help here to rotate the text on IE- 8, IE -7 versions.
it is working on Chome, firefox, IE-9, but doesn`t have any results on IE-8, IE- 7.
BETA
css
a.beta_home{
position: absolute;
text-decoration: none;
top: 12px;
right:0;
margin-left: 0px;
font-size: 9px;
color:red;
border: 1px solid #fff;
display: block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
i wouldn't pref to do it in any browser cause they all render it very different.. but you could do it with javascript
Documentation
http://code.google.com/p/jquery-rotate/
Commands
$('#theimage').rotateRight(45);
$('#theimage').rotateLeft();
This would render it the same in IE 9, chrome, firefox, opera and safari cause its using a canvas object instead of turning the text by browser rendering
It will use the old codings for ie8, 7 & 6 Generate it here
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand');
Working ex
IE 7&8 tested
Fiddle (margins need to be different in chrome and other browsers cant say why but it does)
If you dont know how to differ css trough out the different browsers see this link
My opinion
Beside all this i would recommend you make it as a picture (already rotated) using photoshop or if your dont have access to such programs use free (GIMP)
Try to use this online service:
http://www.useragentman.com/IETransformsTranslator/
It transform css3 rule
rotate(-90deg)
applied on div with WIDTH: 220px; HEIGHT: 70px;
to IE specific rules:
/*
* The following two rules are for IE only and
* should be wrapped in conditional comments.
* The -ms-filter rule should be on one line
* and always *before* the filter rule if
* used in the same rule.
*/
#transformedObject {
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=3.061515884555943e-16, M12=1, M21=-1, M22=3.061515884555943e-16, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=3.061515884555943e-16,
M12=1,
M21=-1,
M22=3.061515884555943e-16,
SizingMethod='auto expand');
/*
* To make the transform-origin be the middle of
* the object. Note: These numbers
* are approximations. For more accurate results,
* use Internet Explorer with this tool.
*/
margin-left: 71px;
margin-top: -78px;
}
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand');
/* For IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
I am trying to rotate text by using LESS
Simply, I try the following code but it does not work.
.my-class {
color: #ff0000;
.rotate(90);
}
Here is my jsfiddle http://jsfiddle.net/D2RLR/2750/
Did you try adding a unit? (or an unit Mr president?)
.rotate(90deg)
See MDN about CSS3 transform and rotate for more information. That's what LESS.js or lessphp will output
To make css rotation work on all browsers including ie7 through ie10 using LESS, I am using a mixin like this:
.rotate(#deg: 90) {
/* Safari */
-webkit-transform: rotate(#deg * 1deg);
/* Firefox */
-moz-transform: rotate(#deg * 1deg);
/* IE10+ */
transform: rotate(#deg * 1deg);
/* Opera */
-o-transform: rotate(#deg * 1deg);
/* Internet Explorer */
#IEdeg: round(#deg / 90, 0);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#IEdeg);
}
#divToRotate {
.rotate(270);
}
But you won't be able to run this in js fiddle since this will need to be compiled by lessc compiler or using the less js parser.
You can simply write it in plain CSS, and it will work in LESS: transform: rotate(90deg);.
Try something like this:-
.box_rotate {
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}
Check this link:- http://snook.ca/archives/html_and_css/css-text-rotation
I recommend using the LESS library: LESS Elements it has a mixin for rotate which seems to work in lots of browsers:
.rotation(15deg); Rotates the item by a number of degrees clockwise.
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.