4

Im using CSS Transforms to rotate an h2 5deg.

For some reason the letters are out of alignment.

Take a look at an example here

http://dev.bestprintideas.com/bpi/image.png

Heres the CSS

.note-offer h2 { 
    color: #626262;
    text-shadow: none;
    text-transform: none;
    margin: 15px 0 10px 25px;
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
}

HTML 

  <div class="note-offer">
    <div class="clip"></div>
      <h2>
         <span class="orange">The&nbsp;Essentials</span> <div>Package</div>
      </h2>
      <img src="http://mydomain.com/123/200-tag.png">
      <p>Duis lobortis ligula vitae mauris lobortis congue. Morbi cursus  porttitor feugiat. Aliquam tempus, nunc sed tempor volutpat, dolor lorem  mollis quam, a elementum sapien purus ac&nbsp;
          <a class="read-more" href="http://dev.bestprintideas.com/bpi/offers/the-essentials-package/">Learn more…</a>
      </p>
 </div>

Why is this happening? Does anyone know how to fix it. Its happening in both FF 3.6 and Chrome 5

EDIT: It seems to work correctly in Chrome 5 for Win and mac but not linux. Its having issues in FF 3.6 for Win, Mac, linux and its working perfectly in Safari 5 on Mac

jef2904
  • 435
  • 2
  • 8
  • 15

1 Answers1

3

There's an issue with this in Firefox which has been fixed, broken and fixed again. It may be possible to work around by using a different font (because different font types use a different rendering path), or you could live with it until the browsers get it sorted out.

robertc
  • 74,533
  • 18
  • 193
  • 177