Vertical text showing in all browsers except Internet Explorer - html

This is really blowing my mind right now!
span.verti{
-moz-transform: rotate(-90deg); /* FF3.5+ */
-o-transform: rotate(-90deg); /* Opera 10.5 */
-webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /*IE6,IE7 */
-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
writing-mode:lr-bt;
-ms-writing-mode:lr-bt;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
opacity:1 !important;
}
Image example in firefox: http://accelerateonline.net/work/ghai/images/firefoxscreenshot.png
Image example in IE 9: http://accelerateonline.net/work/ghai/images/fullscreenshot.png

Hard to tell without the code.
IE does have a proprietary piece of code for rotation:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
rotation=1 Content is rotated 90 degrees.
rotation=2 Content is rotated 180 degrees.
rotation=3 Content is rotated 270 degrees.
Might work?

Related

resize to fit the screen using css

http://i.stack.imgur.com/yY4pG.png <--- Not enough reputation to post images.
This is how my website looks without any browser zoom on a 27" screen.
I know about this but I dont know how to use it.
-webkit-transform: scale(0.5); /* Chrome, Safari 3.1+ */
-moz-transform: scale(0.5); /* Firefox 3.5-15 */
-ms-transform: scale(0.5); /* IE 9 */
-o-transform: scale(0.5); /* Opera 10.50-12.00 */
transform: scale(0.5);
offsetRatio = (ratio - 1) / 2;
So how do I make my site auto scale??
You can always use this:
width:100%;
http://www.w3schools.com/cssref/pr_dim_width.asp

Rotate a block element [duplicate]

This question already has answers here:
How to rotate a <div> 90 degrees?
(6 answers)
Closed 9 years ago.
Is it possible to rotate a block-level box, generated by block element relative to this geometrical center. E.g. as follow:
You can use CSS transform:
transform: rotate(-200deg);
-ms-transform: rotate(-200deg); /* IE 9 */
-webkit-transform: rotate(-200deg); /* Safari and Chrome */
Demo
The transform property is supported in Internet Explorer 10, Firefox, and Opera. You do not need to use CSS prefixes for these.
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
The property transform in CSS3 does this. You need to use vendor prefixes for some browsers.
Here is an example: http://jsfiddle.net/gfEL5/
-moz-transform: rotate(30deg); /* FF after 3 and before 16 */
-ms-transform: rotate(30deg); /* IE 9 */
-o-transform: rotate(30deg); /* Opera after 10.5 and before 12 */
-webkit-transform: rotate(30deg); /* current Chrome, Safari, Opera */
transform: rotate(30deg); /* IE after 10, FF after 16 */
It rotates around the center by default, but you can set another transform-origin as well. More about this: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Line Rotation in IE

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 */

rotate text by using LESS

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.

CSS3 Rotation issue

I'm setting everything in a div tag to appear horizontal. However i have elements in this div tag that i want to appear vertical.
My horizontal styled div is
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
How would i effectively get rid of this transformation on a seperate div?
If you want to reset it on the child element, undo the rotation ( http://jsfiddle.net/yDGqz/):
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
You might want to set the transform-origin property to change the rotation origin of the element.