Solved

CSS positioning of text is off in IE

Posted on 2015-01-27
7
120 Views
Last Modified: 2015-02-01
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:

.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;
} 
   

Open in new window


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>

Open in new window


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)

FirefoxIE
0
Comment
Question by:mabehr
  • 4
  • 3
7 Comments
 
LVL 42

Expert Comment

by:David S.
ID: 40575429
Are you really required to get this to work in IE8?

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.
0
 

Author Comment

by:mabehr
ID: 40575594
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.
0
 
LVL 42

Expert Comment

by:David S.
ID: 40575633
IE11? It looks fine in IE11 on Windows 7 here.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:mabehr
ID: 40575651
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.
0
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 40575692
Here are the styles being used to achieve the look in IE11 shown in the attached screenshot.
#post-market {
  background:#fbe;
  width: 245px;
  height:131px;
}
.rotate2 {
  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;
 
   /* 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;
  padding: 1.25em 0 .5em;
}

Open in new window

ee-Q-28605201-IE11.png
0
 

Author Comment

by:mabehr
ID: 40575705
I'll try your code later and let you know. thanks. I'm out of the office right now.
0
 

Author Closing Comment

by:mabehr
ID: 40582810
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.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Index on a Table 6 25
Run a Radio Station (Streaming media) with web interface 10 27
Set time on Session (ASP) 14 23
Need output in powershell ( Vertical format) 2 22
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question