Does somebody know how to draw vertical text in opera 9.5? As I can see in "caniuse", opera 9.5 doesn't support svg, -o-transform: rotate(-90deg), writing-mode:tb-rl and I don't know any methods to do this. Help me please.
Related
This doesn't work with older browsers like IE
transform : scale(1,1.3); -moz-transform: scale(1,1.3); -o-transform: scale(1,1.3); -webkit-transform: scale(1,1.3);
Any workaround to make it work with older versions ?
This doesn't work with older browsers like IE
This is wrong. It depends on which version of IE you are suporting.
There is the -ms- prefix for IE9. IE 10+ can perfectly run css3 2D transform nativelly, using transform property.
//IE 9
-ms-transform: scale(1, 1.3);
//IE 10+
transform: scale(1, 1.3);
So you can make almost all 2D tranforms into IE9+. Info via Can I Use
But, of course, if you need to suport lower versions, like IE8, you have some workarounds, like this one.
My goal is to increase the size of the checkboxes, cross-browser. I have accomplished this goal in Internet Explorer, Firefox, and Chrome by using the browser prefixes (-moz-, -ms-, etc.) with this:
input[type=checkbox]
{
/* Double-sized Checkboxes */
-ms-transform: scale(2.1, 2.1); /* IE */
-moz-transform: scale(2.1, 2.1); /* FF */
-webkit-transform: scale(2.1, 2.1); /* Safari and Chrome */
-o-transform: scale(2.1, 2.1); /* Opera */
}
It is not working in Safari (and Opera, but I'm more focused on Safari). I have version 5.7.1 and I am accessing it from a windows desktop.
However, I was playing around with this jsfiddle and noticed that the scale works on divs:
http://jsfiddle.net/webvitaly/KKVXB/
I stripped out the code to get the minimum that will still get the desired result:
<div class="matrix3d"></div>
<input type="checkbox" name="opt1" id="option1" />
input[type=checkbox] {
-webkit-transform: scale(3,3); /* safari and chrome */
}
.matrix3d {
-webkit-transform: matrix3d(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); /* safari and chrome */
}
Here's the jsfiddle for it: http://jsfiddle.net/3xr7Q/
The checkbox is larger as expected, but as soon as I took out the 'matrix3d' class or alter the 'matrix3d' html or css in any way, the checkbox goes back to its normal size.
Does anyone know why it works with the 'matrix3d' class and how I can accomplish the goal without it, preferably by not editing the HTML? I do not want to just add an extra 'matrix3d' div next to my checkbox because I don't know why it affects the checkbox.
Edit: Also, something I notice is if I refresh the page, it flashes to the big size before going back to the small size. Also, it would nice to figure out it on Windows, but if someone says it works on a Mac or iphone, that might be OK.
Input elements are inline not block level elements, and webkit has historically not supported transforms on inline elements.
One way to fix this is to add a display: inline-block to the input's CSS. I'm not an a Mac right now, so can't check this.
Please check this DEMO in IE. The menu item name is not visible in IE. It is working perfect in all other browsers.
Any idea??
You were looking for rotation=3
http://jsfiddle.net/fTmxc/11/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
Its because you are using CSS3 transform to rotate the text.
IE 6,7,8 does not support it.
to make it work in ie9 you need to add following code
-ms-transform: rotate(-90.0deg);
you can check this website to make it work in older browsers
http://www.aquim.com/web-article-226.html
I have a table that I need to render some vertical text in one of the columns.
My understanding is that the following style should achieve the effect across browsers:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
This is OK in IE9 and Firefox, however this does not seem to work in IE7 or IE8... See:
http://jsfiddle.net/wzUfj/
Can anybody suggest a way to achieve this?
Thanks
In order to Rotate in those older browsers, you'll have to use Microsoft's proprietary filters:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=VALUE);
Replace Value with an integer, 0-4.
0 = 0 degrees
1 = 90 degrees
2 = 180 degrees
3 = 270 degrees
4 = 360 degrees
I do not believe you can do anything other than 90 degree increments, and I believe you may only have one filter per CSS rule. Also, this is of course non-standard and won't validate, if that's an issue.
CSS3 transforms - not supported on IE 7 and 8.
See: http://caniuse.com/#feat=transforms2d
IE8 and below do not support transforms.
According to this tutorial you can use writing-mode instead
As an extra gotcha, notice in IE9 the rotation can only be applied to block elements (such as paragraph and not span).
Here is a a fiddle
I would like to know whether it is possible or not to create text in a web page at an angle, for example at 40 Degrees. If it is possible, how can I do this?
EDIT: Finally, I decided to go with Mathias Bynens's answer.
Use CSS3 transforms:
.selector {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
IE does support filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);, where the rotation property accepts one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively. It’s a filter though, so I wouldn’t recommended using it.
To add to Mathias' answer, you can rotate text in IE, too: http://snook.ca/archives/html_and_css/css-text-rotation
However, you are bound to multiples of 90°.
Apart from that you could utilize SVG/VML for rotated text. Look, for example, at this page: http://raphaeljs.com/text-rotation.html
It uses the RaphaelJS library for cross browser text rotation without images.
Mathias is right in his answer, but to also support IE you can use their filter:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/*play with the number to get it right*/
Then IE will be supported too :)