Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can't use transform in IE8. You can find out more: <a href="http://caniuse.com/#search=transform" rel="nofollow noreferrer">http://caniuse.com/#search=transform</a>. If you want rotate such as your site. You can use static images and css sprites for IE8. This is demo, I fix for IE 8 solution rotate.</p> <h1>HTML</h1> <pre><code>&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Solution rotate in IE8&lt;/title&gt; &lt;link rel="stylesheet" href="css/stylesheet.css"&gt; &lt;!--[if gte IE 9]&gt; &lt;link rel="stylesheet" type="text/css" href="css/ie.css" /&gt; &lt;![endif]--&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container"&gt; &lt;div class="nav-bar"&gt; &lt;ul class="navigation"&gt; &lt;li&gt;&lt;a href="#" class="home"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="about"&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="process"&gt;Our Process&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="client"&gt;Client List&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="consultation"&gt;Consultation&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="contact"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <h1>CSS</h1> <h3>- stylesheet.css: Use -webkit-transform: ratate(90deg)</h3> <pre><code>*, *:before, *:after { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container { width: 900px; margin-left: auto; margin-right: auto; } .nav-bar { width: 100%; position: relative; } .nav-bar:before, .nav-bar:after { content: ""; display: table; } .nav-bar:after { clear: both; } .nav-bar { *zoom: 1; } .navigation { background-color: #f2f2f2; padding: 10px; width: 100%; position: absolute; left: 40px; top: 0; -webkit-transform: rotate(90deg); -webkit-transform-origin: 0 0; } .navigation li { display: inline-block; } .navigation a { color: #825a13; font-weight: 700; padding: 10px; text-decoration: none; text-transform: uppercase; } </code></pre> <h3>- ie.css: Fix when you use IE8 (use images and css sprites)</h3> <pre><code>.navigation { background-color: transparent; width: 40px; } .navigation li { display: block; float: left; } .navigation a { background: url(../img/nav.png) no-repeat; display: block; text-indent: -9999px; width: 40px; height: 118px; } .navigation a.home { background-position: 0 0; height: 75px; } .navigation a.about { background-position: 0 -86px; height: 90px; } .navigation a.portfolio { background-position: 0 -187px; height: 101px; } .navigation a.process { background-position: 0 -299px; } .navigation a.client { background-position: 0 -435px; } .navigation a.consultation { background-position: 0 -571px; } .navigation a.contact { background-position: 0 -706px; } </code></pre> <h2>Images:</h2> <p><img src="https://i.stack.imgur.com/DYO3p.png" alt="Image Navigation"></p> <p>I test working fine in IE8. Maybe this isn't best solution but I hope it can help you use in your site.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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