Question

My CSS for golf scorecard is

<style type="text/css" media="print">
  BODY {
    PAGE-BREAK-BEFORE: always;
    width:100%;
    height:100%;
    -webkit-transform: rotate(-90deg) scale(.68,.68); 
    -moz-transform:rotate(-90deg) scale(.58,.58);
    zoom: 58%;
    filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3);
}
</style>

IE scales but does not rotate. (Removing scaling does not change rotation issue.)

/* Removed non-IE part of question to more closely match only answer. Will post separate question about FireFox */

Any advice? Also played with idea of PHP lib DOMPDF but it breaks so easily on big tables and this is a golf scorecard.

Answer 1

For rotation you’ll need some extra lines:

        -ms-transform:rotate(-90deg);
        -o-transform:rotate(-90deg);
        transform:rotate(-90deg);

For scaling you’ll have to add:

-moz-transform: scale(58);

Haven’t tested this, but think it should work…