Flyout submenus appear below page elements HTML5

[franko]

Good catch, Mike. One of the pitfalls of bringing a site created in a previous version into 2013 and using html 5. Once the site is in 2013 you really need to go through all the html and remove any additional kludges you've used to make a previous version do what you want. Frames is another instance; not supported in html 5 although 2013 still lets you select them it seems.

[SolarLightCap]

You have 2 (two) center divs on that page

<div class="nof-centerContent"><div align="center">

Okay thats weird - Ive had other strange things happen with the centering:
Currently if I use the Center In Browser control on Layout Properties, BUT it is also center justifying all the text (when I publish in HTML5) overiding what I see displayed in NOF editor.
I notice <div class="nof-centerContent"> appears in the code when I generate HTML5 output and have the setting 'center in browser' turned on for the layout
Im not a HTML coder so I dont know if that is correct behaviour, otherwise I would start to think there may be some bugs in the HTML5 output of NOF

[antonsvideo]

click the masterborder, then click the html button on the property palette and look for manually entered code like the incorrect character set, if you see it, delete it

click the layout, then click the html button on the property palette and look for manually entered code like the incorrect character set, if you see it, delete it

you also have a manually entered closing center tag without an opening center tag half way down the page that needs to be deleted

[SolarLightCap]

Thanks Anton for catching that closing /center. Now removed but I suspect not the cause of my problems.
@gotFusion - okay so we dont use div center for HTML5. I'll hust let the <div class="nof-centerContent"> do its thing by itself.

So Ive attempted to remove any 'kludges' so I can move to HTML5.
To summarise, under HTML5 my menus appear under objects - this does not happen on other pages using HTML5
So using HTML5 Dynamic fixes that problem, but the page is aligned left in the browser.
Removing any old <center> and div center code and regenerating, and posting the latest problematic version to the test link http://www.solarlightcap.com/test/index.html

The charset issues seems unrelated and not answered elsewhere so I'll start another thread

[antonsvideo]

in site view, can you export the trouble page to template and attach here or email to anton at videoproductions.com.au and I will look for the cause

[antonsvideo]

I had a look at your template and for some reason, Nof gives the inline frame a higher z-index than the Navbar

so, if you manually edit the index html in notepad and change the z-index to 1 it will work
http://www.videoproductions.com.au/Nof13/z-index.png

another way to fix it is to embed the slider the proper way without using an i-frame (textbox with inserted slider code via CTRL+T)

[SolarLightCap]

Thanks Anton - yep looks like its a z-index issue.
But something is broken on this page - because the menu z-index is 1000, 1001 etc, and the image that the drop down menu keeps appearing behind is z-index 11. If I change that to 1, on the fly using Chrome Inspect Element, then the menu correctly appears in front of the object.
I was able to fix the Social MEdia icons image on the RHS by a simple Object->Arrange->Send to Back, but not so for anything I put on Layout under the menu. The nav bar keeps appearing below it.
Other pages using the same MasterBorder layout style all seem to be okay in HTML5, but this homepage, the most important page that needs regular changes, just wont behave.
Manually editing before publishing is a good workaround, but worrysome that it needs it incase my nof file is corrupted somehow.

[SolarLightCap]

Here's a quick screen snap demonstrating the problem with drop down menu under objects, due to bad z-index values generated by NOF, using Chrome's Inspect Element to see.
You will see the NavigationBar1LYR has a z-index of 10, and its sub elements are all above 1000. Those sub elements display below the other objects on the page !
If I manually change NavigationBar1LYHR z-index to 11, the sub menu displays correctly over some page elements.
Note I have cut and pasted the menu onto multiple places on the page, all behave wrong.
The page is live right now if anyone cares to take a look at http://www.solarlightcap.com/test/index.html

[antonsvideo]

the problem can be solved in minutes by deleting the iframe and embedding the slider the textbox way

meanwhile, I would send a support ticket to Nof and ask about this z-index issue with iframes

[antonsvideo]

another option is to use HTML5 dynamic, then all will be well

however, the attached little button is what prevents center in browser, if you delete it, center will work

I have no idea what that button is meant to do