<a> element insert in makisu selector about makisu

[Eliyahna]

I have the same problem did you ever find the solution?

[amontanari]

Hi, we can close this Issue (question), i set correctly the z-index property and the problem is solved.
Example:

#menu {
position: relative;
z-index: 12;
}

#menu li {
position: relative;
z-index: 13;
}

do a test, and let me know.
Best regards.

[Eliyahna]

I did this, which is I think what you suggested:

.nigiri {

-webkit-transform: perspective(1200px) rotateY(40deg) !important;
-moz-transform: perspective(1200px) rotateY(40deg) !important;
-ms-transform: perspective(1200px) rotateY(40deg) !important;
-o-transform: perspective(1200px) rotateY(40deg) !important;
transform: perspective(1200px) rotateY(40deg) !important;

-webkit-transform-origin: 110% 25%;
-moz-transform-origin: 110% 25%;
-ms-transform-origin: 110% 25%;
-o-transform-origin: 110% 25%;
transform-origin: 110% 25%;
left: 20%;
position:relative;
z-index: 12;
}

and

.nigiri dt, .nigiri dd, .nigiri a {
background: #789962;
position:relative;
z-index:13;
}

on style.css but the whole thing disappeared, it didn't fix it. I am using this index.html from the master zip file. I have not set any other z-index properties.

 

[amontanari]

I don't have the problem after a good revision of all z-index.
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index

In my case:

with this html (JADE):

body(data-spy="scroll", data-target="#nav") <-- this because i use bootstrap scrollspy

#header

ul#menu.nav

li#menu-page1.mainmenu

a.nav-button(href='#page1') page1

.menu-caption

p page1

li#menu-page2.mainmenu

a.nav-button(href='#page2') page2

.menu-caption

p page2

ul#services-submenu

li#menu-page3.submenu

a.subnav-button(href='#page3') page3

.submenu-caption

p page3

li#menu-page4.submenu

a.subnav-button(href='#page4') page4

.submenu-caption

p page4

li#menu-page5.mainmenu

a.nav-button(href='#page5') page5

.menu-caption

p page5




my css (in less)

body {
  position: relative;
  z-index: 0;
}
#header {
  position: fixed;
  top: 0;
  z-index: 1000;
}
#nav {
  position: fixed;
  top: 150px;
  left: 10px;
  width: 62px;
  z-index: 1001;
}
#menu {
  position: relative;
  z-index: 1002;
}
#menu {
  >li {
    >a:hover {
      background-color: transparent;
    }
  }
}
.nav-button {
  position: relative;
  display: block;
  height: 62px;
  width: 62px;
  text-indent: 100%;
  overflow: hidden;
  z-index: 1004;
}
.subnav-button {
  position: relative;
  display: block;
  height: 47px;
  width: 62px;
  text-indent: 100%;
  overflow: hidden;
  z-index: 1004;
}

I hope that can help you.

[Eliyahna]

Thank you. I understand about z-index. I have used it before. The problem is you are not using the same web page that I am trying to work on. I am commenting and working on Makisu ~ CSS 3D Dropdown Concept which also a .js file which contains transform commands for the animation translateZ(-0.1px. I believe these are affecting things as well and if they are removed or changed they adversely affect the animation of the foldout.

I understand what you're doing with yours I'm just not sure how to apply that to this project.

Thanks again for trying to help me.

[amontanari]

ok, help is not a problem :)
I studied the makisu js, but for my problem my solution was found only with the correct settings of murkup and css. The css trasformation that makisu js does on murkup and on css's property not create problem on selection of a link inside the list element.

Regards :)

[Eliyahna]

Ah I see :) Well for this Nigiri, the section on the HTML looks like this:

<section class="demo">

<dl class="list nigiri">
<dt><a href="one.html" id="default" onClick="changeFrame(this.href); return false;">One</a></dt>
<dd><a href="two.html" id="default" onClick="changeFrame(this.href); return false;">Two</a></dd>
<dd><a href="three.html">Three</a></dd>
<dd><a href="four.html">Four</a></dd>
<dd><a href="five.html">Five</a></dd>
<dd><a href="six.html">Six</a></dd>
<dd><a href="seven.html">Seven</a></dd>
<dd><a href="eight.html">Eight</a></dd>
<dd><a href="nine.html">Nine</a></dd>
</dl>

</section>

I made the " .list dd " to z-index: 999; and also the .list to z-index: 999; and I tried to make .demo:after to z-index: 999; but nothing changed. The top < dt > works to link but not the < dd > (in Firefox)

[Eliyahna]

I have found that in Makisu.js on lines 346 & 350 I changed:

'transform': 'translateZ(-0.1px)'
to
'transform': 'translateZ(-1px)'

Now the links are showing in both Firefox and Chrome but they do not show in IE.

[amontanari]

like I said, I tried to change the css trasformation that the makisu.js applies to the markup, but my problem was due only to the properties of z-index of the elements (z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)), and that the dimensions (width and height) assigned to the link actually covered up all the space element of the list

.
sorry.

[Eliyahna]

Yes now I'm trying to figure out where to place the position statement to satisfy IE.

[Eliyahna]

SOLVED!

Okay here is the complete solution to make this work with links in all 3 browsers:

On style.css line 244 change:

.nigiri dt, .nigiri dd, .nigiri a {
background: #789962;
}

to

.nigiri dt, .nigiri dd, .nigiri a {
background: #789962;
position: relative;
z-index:999;
}

 

Then on Makisu.js on lines 346 & 350 change:

'transform': 'translateZ(-0.1px)'

to

'transform': 'translateZ(-1px)'

:)

[Gori]

This isn't solved, with (-1px) translateZ things turn upside down in Firefox.

[Eliyahna]

Looks fine in Firefox to me...

The Z is for the layer depth not for direction.