Databases
StackOverflow2013
Postsdbo
POCSS3 rotate in IE8
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS3 rotate in IE8
    text
    copied!<p>I tried all possible options found here on stackoverflow to help IE8 to <strong>transform: rotate</strong>. The only one which worked almost correctly is <strong>cssSandpaper</strong>. It rotates my navigation as needed, but when I test it in IETester it seems that <em>the real links are positioned in inverse angle to horizon</em>, comparing to the navigation. </p> <p>Here is a <a href="http://coderbit.net/ie8rotate.jpg" rel="nofollow">print-screen</a> </p> <p>I spent so much time now, searching for the reason this is heppenning. Hope there are pros who can tell me whats the problem with it. </p> <p><a href="http://jsfiddle.net/A1ex5andr/3dyaY/" rel="nofollow">JsFiddle</a></p> <p>code for nav is simple bootstrap:</p> <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt; &lt;div class="container"&gt; &lt;div class="navbar-header"&gt; &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;/button&gt; &lt;/div&gt; &lt;div class="navbar-collapse collapse"&gt; &lt;ul class="nav navbar-nav"&gt; &lt;li&gt;&lt;a href="#"&gt;123&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;123&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;123&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;123&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;123&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="lastNavLink" href="#"&gt;123&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!--/.nav-collapse --&gt; &lt;/div&gt; &lt;/nav&gt; &lt;/header&gt; </code></pre> <p>rotation in css</p> <pre><code>nav { margin-top: 40px; margin-bottom: 20px; -moz-transform: rotate(-4deg); /* FF3.5+ */ -o-transform: rotate(-4deg); /* Opera 10.5 */ -webkit-transform: rotate(-4deg); /* Saf3.1+, Chrome */ -ms-transform: rotate(-4deg); /* IE9 */ transform: rotate(-4deg); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9975640502598243, M12=0.06975647374412515, M21=-0.06975647374412515, M22=0.9975640502598243, SizingMethod='auto expand')"; zoom: 1; } </code></pre> <p>Javascripts all default in bootstrap + <strong>cssSandpaper</strong>. Take a look at jsFiddle before code. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload