Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 32

Thread: Flyout submenus appear below page elements HTML5

  1. #11
    Senior Member franko's Avatar
    Join Date
    Apr 2010
    Location
    Tasmania Australia
    Posts
    2,613

    Default

    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.

  2. #12
    Senior Member
    Join Date
    Sep 2010
    Posts
    144

    Default

    Quote Originally Posted by gotFusion View Post
    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

  3. #13
    Senior Member
    Join Date
    Apr 2010
    Location
    Sydney
    Posts
    1,876

    Default

    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
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	Anton-0409.jpg 
Views:	100 
Size:	68.9 KB 
ID:	1901  

  4. #14
    Senior Member
    Join Date
    Sep 2010
    Posts
    144

    Default

    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

  5. #15
    Senior Member
    Join Date
    Apr 2010
    Location
    Sydney
    Posts
    1,876

    Default

    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

  6. #16
    Senior Member
    Join Date
    Apr 2010
    Location
    Sydney
    Posts
    1,876

    Default

    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)

  7. #17
    Senior Member
    Join Date
    Sep 2010
    Posts
    144

    Default

    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.

  8. #18
    Senior Member
    Join Date
    Sep 2010
    Posts
    144

    Default

    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
    Click image for larger version. 

Name:	Nof-generatesWrongZ-Index.jpg 
Views:	116 
Size:	110.4 KB 
ID:	1907
    Last edited by SolarLightCap; 11-04-2014 at 08:38 PM.

  9. #19
    Senior Member
    Join Date
    Apr 2010
    Location
    Sydney
    Posts
    1,876

    Default

    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

  10. #20
    Senior Member
    Join Date
    Apr 2010
    Location
    Sydney
    Posts
    1,876

    Default

    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
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	Anton-0410.png 
Views:	98 
Size:	18.3 KB 
ID:	1908  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •