mabehr
asked on
CSS positioning of text is off in IE
I have text that is slanted inside a graphic. I found a code that will make the text slant in IE as it is in firefox and chrome. I found that code generator here: http://www.useragentman.com/IETransformsTranslator
Here is the css code that is doing the work:
And the place where the css is being implemented
And attached are two screen shots: one of IE's placement and the other whih is Firefox's placement (which looks the same as Chrome)
Here is the css code that is doing the work:
.rotate2 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=.15);
font-size: 16px;
font-family: century gothic, verdana, sans-serif;
color: rgba(167,2,240,1.00);
font-weight: bold;
text-align: center;
-moz-transform: matrix( 0.99515819549955,-0.09828614312343,0.09828614312343,0.99515819549955,0,0);
-webkit-transform: matrix( 0.99515819549955,-0.09828614312343,0.09828614312343,0.99515819549955,0,0);
-ms-transform: matrix( 0.99515819549955,-0.09828614312343,0.09828614312343,0.99515819549955,0,0);
position: absolute;
left: 47px;
top: 23px;
z-index: 20;
text-decoration:none;
-moz-transform: rotate(-7deg)
translateX(245px)
-o-transform: rotate(-7deg)
translateX(245px)
-webkit-transform: rotate(-7deg)
translateX(245px)
transform: rotate(-7deg)
translateX(245px)
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.992546151641322, M12=0.12186934340514763, M21=-0.12186934340514763, M22=0.992546151641322)";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.992546151641322,
M12=0.12186934340514763,
M21=-0.12186934340514763,
M22=0.992546151641322);
/*
* 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: 5px;
margin-top: 0px;
}
And the place where the css is being implemented
<div id="post-market" style=" background-image:url(images/post_market.jpg); width: 245; height:131px;">
<a href="#" class="rotate2">
Click here to shop or<br>
set up your own store. <br>
<em><strong><u>It’s free!</u></strong></em></a>
</div>
And attached are two screen shots: one of IE's placement and the other whih is Firefox's placement (which looks the same as Chrome)
ASKER
Am I required to have it work in IE8? Well, this website is going to be accessed by members all through out the world with probably older browser versions (at least I think so, not sure).
Do websites need to look exactly the same? Well no, but when text is being clipped that is a problem - and I'm seeing that in IE 11.
I've tried padding, but will try it again.
Do websites need to look exactly the same? Well no, but when text is being clipped that is a problem - and I'm seeing that in IE 11.
I've tried padding, but will try it again.
IE11? It looks fine in IE11 on Windows 7 here.
ASKER
So you have a screenshot of what it looks like to you on IE 11?
Did you add padding? If so, could you post that code as well?
Thanks.
Did you add padding? If so, could you post that code as well?
Thanks.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I'll try your code later and let you know. thanks. I'm out of the office right now.
ASKER
Thanks. It worked for the most part, still had some clipping but I just decided to make the text straight. Thank you for your help.
I recommend progressive enhancement. Do websites need to look exactly the same in every browser?
It looks like adding some top and bottom padding to ".rotate2" will solve this incorrect clipping issue. A CSS filter (the other kind of filter) can be used to give IE8 a different padding value.
By the way, the "-ms-filter" property is unnecessary. IE8 will actually use the "filter" property.