Databases
StackOverflow2013
Postsdbo
POHow would you setup a CSS3 fallback in IE for this slanted DIV navigation?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow would you setup a CSS3 fallback in IE for this slanted DIV navigation?
    primarykey
    data
    text
    <p>Taken from a tutorial at: <a href="http://www.joecritchley.com/demos/slanted-nav/">http://www.joecritchley.com/demos/slanted-nav/</a></p> <p>I can't for the life of me get this to work in ANY version of IE. It only displays the navigation as a normal bulleted list, but I know it must be possible based on some findings from <a href="http://css3please.com/">http://css3please.com/</a> such as:</p> <pre><code>-ms-transform: rotate(20deg); /* IE9 */ filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand'); zoom: 1; </code></pre> <p>Here is the setup that is working in almost all other browsers:</p> <p>JS Fiddle link: <a href="http://jsfiddle.net/zumajoe/9ukdm/">http://jsfiddle.net/zumajoe/9ukdm/</a></p> <p><strong>CSS</strong></p> <pre><code>#main-nav &gt; ul { margin-top:50px; overflow:hidden; } #main-nav &gt; ul &gt; li { float:left; font-size:18px; margin-left:-35px; overflow:hidden; padding:20px; } #main-nav &gt; ul &gt; li:first-child { border-radius:10px; margin-left:0; } #main-nav &gt; ul &gt; li &gt; a { -moz-transform:rotate(20deg); -o-transform:rotate(20deg); -webkit-transform:rotate(20deg); background:#bbb; border-left:1px solid #FFF; color:#444; display:block; height:150px; margin-bottom:-100px; margin-top:-70px; overflow:hidden; text-decoration:none; } #main-nav &gt; ul &gt; li:first-child &gt; a { border-left:0; border-radius:10px; } #main-nav &gt; ul &gt; li &gt; a &gt; span { -moz-transform:rotate(-20deg); -o-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); display:block; margin-top:57px; overflow:hidden; padding:0 20px; } #main-nav &gt; ul &gt; li &gt; a:hover { background:#aaa; } #main-nav &gt; ul &gt; li.current &gt; a { background:#000; color:#fff; } </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;nav id="main-nav"&gt; &lt;ul&gt; &lt;li class="current"&gt;&lt;a href="#"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;News&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Work&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;A longer menu item&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; </code></pre> <p>EDIT: Well half the problem comes from IE not understanding the HTML5 "Nav" tag, so changing the <code>&lt;Nav&gt;</code> to <code>&lt;Div&gt;</code> will at least get it to display as normal rectangles in IE.</p> <p>EDIT #2: The further I get along with this, i'm realizing it could just be easier to use the "skew" CSS3 property. Skew the container, then skew back the span (same as how this rotation is setup). Still have issues with IE 8,7, &amp; 6 however. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJoe
    1. USJoe
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow would you setup a CSS3 fallback in IE for this slanted DIV navigation?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow would you setup a CSS3 fallback in IE for this slanted DIV navigation?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow would you setup a CSS3 fallback in IE for this slanted DIV navigation?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIs JavaScript acceptable? It's truly hideous to do it without JavaScript, and requires a manual `width` set on each button.
      singulars
      1. POHow would you setup a CSS3 fallback in IE for this slanted DIV navigation?
      1. USthirtydot
    2. COAlternatively, you could use something like this: http://www.cssplay.co.uk/menus/slanty.html - but that has problems with the slanted parts not always working properly.
      singulars
      1. POHow would you setup a CSS3 fallback in IE for this slanted DIV navigation?
      1. USthirtydot
    3. COI would rather not depend on JS for this, but if it's the only solution I don't have much of a choice!
      singulars
      1. POHow would you setup a CSS3 fallback in IE for this slanted DIV navigation?
      1. USJoe
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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