Text overflowing out of div using transform: rotate(xdeg) - html

Using the css attribute transform: rotate(); works fine but when using it under horizontally oriented text it displayed outside of the div but I want it to display it within. I tried a lot with the display, position, left, top, float etc. attribute but nothing worked. Any ideas?
Here is the css-code for the vertical text:
width:130px;
height:50px;
-ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */
Here is the example to try:
http://jsfiddle.net/ty6Zj/

You should use transform-origin property for that
transform-origin: 40px 20px;
Demo
Note: You've used all proprietary declarations for transform, should use a standard one as well..
transform:rotate(270deg);
Also, make sure you have this at the end of the proprietary properties...

Related

Enlarge text height?

I have text with font-size 18 and it is displayed in a block style. I would like to increase the text's "height," in other words, increase how much vertical space the text takes up alone. I don't want to increase the font size in order to do this. Any suggestions?
What about line-height Property ?
p.small {line-height:90%}
p.big {line-height:200%}
Source: http://www.w3schools.com/cssref/pr_dim_line-height.asp
Hope this helps.
You could use the transform property and scale the height vertically:
CSS
.stretch {
transform : scale(1,5);
-webkit-transform:scale(1,5); /* Safari and Chrome */
-moz-transform:scale(1,5); /* Firefox */
-ms-transform:scale(1,5); /* IE 9+ */
-o-transform:scale(1,5); /* Opera */
}
Check out this Fiddle.
Have you tried transform? In particular for your case:
-webkit-transform:scale(1,5); /* webkit */
-moz-transform:scale(1,5); /* gecko */
-o-transform:scale(1,5); /* opera */
transform:scale(1,5);
As explained here:
http://www.css3files.com/transform/#scale

Text overflowing out of Div When using transform: rotate(90.0deg)

here is my Work http://jsfiddle.net/2h8tv/
Here i am using css transform: rotate(90.0deg) . You can see the text coming out of the container. How can solve this without using padding or margin
I think that using transform-origin should be the most proper thing in this case. When you rotate an element with transform: rotate(x), the rotation is done by a specific origin. By default, this origin is set to 50% 50% which is the exact center of the element.
Add the following style to .rotate class
-webkit-transform-origin: 8px 12px;
However, you can make this rule more general:
-webkit-transform-origin: 50% 12px;
First part of the property is vertical position of the origin point. So in this case we set it to middle (50%). The second one defines horizontal position of the origin, so depending on parent div's width we should set it in px.
You have a few options here, obviously just adding padding would be the easiest.
But you can also mess with the transform-origin policy.
transform: rotate(90deg); transform-origin:8px 12px;
-ms-transform: rotate(90deg); /* IE 9 */
-ms-transform-origin:8px 12px /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-webkit-transform-origin:8px 12px /* Safari and Chrome */
-moz-transform: rotate(90deg); /* Firefox */
-moz-transform-origin:8px 12px /* Firefox */
-o-transform: rotate(90deg); /* Opera */
-o-transform-origin:8px 12px /* Opera */
See and example here http://jsfiddle.net/2h8tv/2/
You could use a non-breaking Space
<div class="orangeblock "><div class="rotate"> Free</div></div>
<div class="yelloblock"><div class="rotate"> $1999</div></div>
Check -> http://jsfiddle.net/2h8tv/1/
If you increase the font-size of .rotate. it will get aligned.

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.

internet explorer not anti aliasing rotated image

I have a div with a background image that I am rotating. Below is my css rules to rotate it:
#services_parallax {
-webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand');
}
The problem is in IE the edges of the image are very blocky and jagged instead of being smooth lines and don't appear to be antialiased. Does anyone know a fix for this? It was doing it in chrome until I applied the fix for it by applying -webkit-backface-visibility: hidden; which worked great for chrome, I just need a similar fix for IE if one exists.
To replicate this issue paste the following into an HTML file and look at it in IE:
<style type="text/css">
#services_parallax { -webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand');
background: url(http://img.netcarshow.com/Pagani-Zonda_R_2009_1600x1200_wallpaper_01.jpg) center center;
background-size:100% auto;
height:100px;
width:700px;
margin-top:50px;
margin-left:50px;
}
</style>
<div id="services_parallax"></div>
Anti-aliasing don't work on large images if there are height and width forced with CSS (IE11, 10 and 9). I've make some (very) approximate tests and I deduct anti-aliasing works under 1000px.
I'm still looking for an official source for this issue.
#geoffs3310, I feel your pain.
I have found this is still an issue with IE11, and some other browsers (Safari on iPad and on Chrome and the default browser on Samsung Galaxy Tab A). To work around this I whacked a dark background-color on the element containing the background-image. I don't know why, but it appears to do the trick, e.g.
background-color: black;
And in case anyone else reads this post, allow me to put forward a few other fixes I found in dealing with the various issues arising from skewing content. Note, these are all applied to the transformed container element.
Eliminates the jagginess buttons get after skew rotations are applied (kudos):
transform-style: preserve-3d;
Eliminate blurry where <canvas> has been used (kudos to Zoltan). Note, if there are other transforms on the element declare them on separate lines rather than shorthand (from memory this was to work around a similar Safari issue):
transform: perspective(0);
And another fix—though my documentation lacks what it fixes, I think it was to do with janky or blurry content in IE—try:
outline: 1px solid transparent;
To get round this issue i used box shadows which seemed to work and make the edges smooth

how to stop overlapping of divisions in HTML/CSS during zoom

I need to place tables that are given a class ID in various parts of the browser. My problem happens when zooming out. The divisions start overlapping. Is there a way to make it so they don't overlap besides making them farther apart (that way when I'm zoomed in they are close together).
Here's an example code of the CSS:
So is there something else besides position:absolute I can use, or something in addition to that that will make a difference?
#UB_37{
position:absolute;
top: 144px;
left: 646px;
width:32px;
height:252px;
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari and Chrome */
-o-transform:rotate(0deg); /* Opera */
}