Flyout submenus appear below page elements HTML5

[SolarLightCap]

Hi Anton - thanks again for your support. However note that I have deleted the iFrame in the above snapshot and problem remains. I will look at that button for to use the dynamic solution.
So we agree NOF has an issue here that needs reporting. The last however is that other pages dont have this problem, only index.html - something different with this page but I just cant find it.

[antonsvideo]

Are you saying that it also happens with placing a textbox containing the wowslider code? If so, save site as new temp name for testing, then it is a matter of deleting one item at a time until the culprit is found, then implement the solution to the real site

[antonsvideo]

Are you saying that it also happens with placing a textbox containing the wowslider code? If so, save site as new temp name for testing, then it is a matter of deleting one item at a time until the culprit is found, then implement the solution to the real site

I just tested and the issue is caused by the action that is part of the button at the bottom of the page

once this button or its action is deleted, it works fine with HTML5 and HTML5 dynamic

[SolarLightCap]

Okay so problem is solved with a double work around - use html5 dynamic which allows the menus to appear correctly, and remove my rollover box ( that should make a counter appear but doesn't ) then the page is centered properly and the menu appears properly.
I hope NOF fixes this so I can put my counter back again.

[antonsvideo]

you can switch back to HTML5 (no need to use dynamic)

removing that button or its actions solves the issue

Note: on the layout property palette, choose site setting for HTML output and in current site settings, select HTML5

Note2: to use the button with its actions, place it in a small layout region and set the layout region HTML output to HTML 4.01 in the layout region property palette

[franko]

Just FYI - html 5 dynamic isn't a workaround; it's a method of overcoming the limitation imposed by fixed position coding when a page has to change length to suit variable length content. The button that Anton is talking about probably contains code that affects the layout but NoF doesn't know what that external code is. When you used fixed positioning (html 4.01 or html 5) NoF places the objects on the page where you put them; it doesn't allow for content introduced by external code (eg database output, YouTube videos or - in your case - code for an external graphic that will have both height and width attributes).

Simple really. No external data = use html 5. External data = html 5 dynamic.

[SolarLightCap]

@Anton - I tried it, but problem(s) remain. http://www.solarlightcap.com/test2/index.html - Using HTML5 Dynamic With the rollover button on page, wrapped in a HTML4.01 Layout Region, the whole page is not centered in browser. Under HTML5 the menu drop down is behind objects.

Also tried to embed my calls to wowslider in a text box as you suggested using <img src=http://www.solarlightcap.com/html/2c-slides.html> but slides dont appear ( I dont want to cut and paste code each time I change the slides, so may have to stick with the inline frame method)

[SolarLightCap]

Ahh - a good definition of dynamic. I do allow enough space for the external graphic so shouldnt need Dynamic, but something about that external graphic or maybe the rollover is messing up NOFs ability to center the page

[antonsvideo]

@Anton - I tried it, but problem(s) remain. http://www.solarlightcap.com/test2/index.html - Using HTML5 Dynamic With the rollover button on page, wrapped in a HTML4.01 Layout Region, the whole page is not centered in browser. Under HTML5 the menu drop down is behind objects.

Also tried to embed my calls to wowslider in a text box as you suggested using <img src=http://www.solarlightcap.com/html/2c-slides.html> but slides dont appear ( I dont want to cut and paste code each time I change the slides, so may have to stick with the inline frame method)

you are right, html5 dynamic causes center issues when using actions

to correctly embed a wowslider, place the entire body code between wowslider body tags in the textbox html and make the textbox the same size as the wowslider code indicates (lock height of textbox)

<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/towers1.jpg" alt="towers1" title="towers1" id="wows1_0"/></li>
<li><img src="data1/images/towers2.jpg" alt="towers2" title="towers2" id="wows1_1"/></li>
<li><img src="data1/images/towers3.jpg" alt="towers3" title="towers3" id="wows1_2"/></li>
</ul></div>
<!-- Generated by WOWSlider.com v3.4 -->
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->

then insert the head code in between heads of the layout html (not the masterborder html)

<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->


to obtain the code, view the source of your wowslider generated html

then use an ftp software to upload the data1 and engine1 folder to the root where the index.html is and upload the new index.html

[SolarLightCap]

Okay folks - problem found - through process of elimination, and thanks to Anton, we now know what is different about this page, causing these "menu under" and "browser center alignment" problems.
HTML5 code generation cant support Rollover Actions directed at show hide of other objects as seen in the picture here.

Its a strange bug in NOF I believe.
Over to you Netobjects - looking forward to the fix.