iframe causing 2 arrows in menu

[discdemo]

1) Script Title: all levels menu

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...menu/index.htm

3) Describe problem:

I am having a problem with the all levels menu displaying properly in IE when I add an iframe to the equation.

1. The menu looks fine as part of an include page, as a page header.

2. without the iframe, al is fine.

3. When I add an iframe to the include, it causes the menu to show 2 arrows for the dropdown items, thus pushing the lenght and forcing the last meni item to make another row width.

Here's the link. http://www.no-way-dude.com/faq.htm

Has anyone seent this before? it's fine in chrome and FF, btw.

[jscheuer1]

I've no idea why it's doing that. Iframe is non-standard though. If it's causing problems get rid of it. Simply place the code for the slide show in its place. You already have all the required scripts and styles on the page or in the include or whatever, so just replace:

&nbsp;<iframe name="I1" src="SLIDERsub.htm" width="401" height="105" scrolling="no" border="0" frameborder="0"></iframe>

with:

<div class="slideshow"> 
		<a href="praise.htm" target="_parent"><img src="images/sm_revsong.jpg" width="400" height="104" /></a>
		<a href="pp.htm" target="_parent"><img src="images/sm_pp.jpg" width="400" height="104" /></a>
		<a href="future.htm" target="_parent"><img src="images/sm_future.jpg" width="400" height="104" /></a>
		<a href="vid_hibbs.htm" target="_parent"><img src="images/sm_hibbs.jpg" width="400" height="104" /></a>
		<a href="lostboy.htm" target="_parent"><img src="images/sm_lostboy.jpg" width="400" height="104" /></a>
		<a href="trials.htm" target="_parent"><img src="images/sm_trials.jpg" width="400" height="104" /></a>
		<a href="unshackled.htm" target="_parent"><img src="images/sm_unshackled.jpg" width="400" height="104" /></a>
        </div>

Make sure to use the corrected HTML code as shown, what you have on the SLIDERsub.htm page is invalid code with unclosed a tags. If you use that it will probably mess up the other links on the page.

[discdemo]

hanks for the reply, John.

The problem that caused me to move to an iframe for the slideshow was that when the page loaded, all of the slideshow images within the div displayed, one after the other...in rows, one beneath an other.

They eventually settle out and the slideshow runs, but my effort with the iframe was to prevent the ugliness when the page loads.

I use the iframe with success, for this problem, on the index.htm, but it's not entirely apples to apples, as the menu is an include on that page, but the iframe is beneath it.

I appreciate getting rid of stuff and am happy to do so, but it doesn't make sense to me why it would mess with the menu (i even tabled the iframe and menu as another attempt to resolve),

In any case, I will still be looking at this...perplexed, for a while. So, if anything comes to mind, feel free to holler back. I do appreciate your reply, nevertheless.

God Bless!

jz

[jscheuer1]

I don't see how having it in an iframe with no scrolling would help anything that having it in a wrapper div with the proper dimensions set and overflow hidden wouldn't also resolve:

<div style="width:401px;height105px;overflow:hidden;">
<div class="slideshow"> 
		<a href="praise.htm" target="_parent"><img src="images/sm_revsong.jpg" width="400" height="104" /></a>
		<a href="pp.htm" target="_parent"><img src="images/sm_pp.jpg" width="400" height="104" /></a>
		<a href="future.htm" target="_parent"><img src="images/sm_future.jpg" width="400" height="104" /></a>
		<a href="vid_hibbs.htm" target="_parent"><img src="images/sm_hibbs.jpg" width="400" height="104" /></a>
		<a href="lostboy.htm" target="_parent"><img src="images/sm_lostboy.jpg" width="400" height="104" /></a>
		<a href="trials.htm" target="_parent"><img src="images/sm_trials.jpg" width="400" height="104" /></a>
		<a href="unshackled.htm" target="_parent"><img src="images/sm_unshackled.jpg" width="400" height="104" /></a>
        </div>
</div>

Or, you could make the slide show visibility hidden, position absolute, top -3000px, left -3000px until its images are loaded or whatever it needs to do to avoid that messiness. That would be a bit trickier to accomplish. Ideally (if there are any appropriate 'hooks' in the slide show script for this) it should be part of the existing slide show script, but it could be made a separate function.

In any case, nesting tables as you have should be avoided.

[discdemo]

I tried the div style and the slide images still display on page load for a few seconds...

hmm. so, you say another option is to hide? any chance you can confirm the best way to do that, John? You mentioned "hidden' and absolute...can you help me with how to insert the code so I can try it, if it's within your means?

I am not aware of anything within the slider code, but I am also a novice, so any help is appreciated. your last seemed promising and made sense, but it still wants to show them all, outside of those dimension params...

thx. jz

[jscheuer1]

First try replacing this:

      <td width="510" align="right">
      <p align="right">	
    <div style="width:401px;height105px;overflow:hidden">
	<div class="slideshow"> 
		<a href="praise.htm"><img src="images/sm_revsong.jpg" width="400" height="104" /></a>
		<a href="future.htm"><img src="images/sm_future.jpg" width="400" height="104" />
		<a href="vid_hibbs.htm"><img src="images/sm_hibbs.jpg" width="400" height="104" />
		<a href="lostboy.htm"><img src="images/sm_lostboy.jpg" width="400" height="104" />
		<a href="trials.htm"><img src="images/sm_trials.jpg" width="400" height="104" />
		<a href="unshackled.htm"><img src="images/sm_unshackled.jpg" width="400" height="104" />
        </a>
        </div>
	</td>

With valid code:

      <td width="510" align="right">
<div style="width:401px;height105px;overflow:hidden;">
        <div class="slideshow"> 
		<a href="praise.htm" target="_parent"><img src="images/sm_revsong.jpg" width="400" height="104" /></a>
		<a href="pp.htm" target="_parent"><img src="images/sm_pp.jpg" width="400" height="104" /></a>
		<a href="future.htm" target="_parent"><img src="images/sm_future.jpg" width="400" height="104" /></a>
		<a href="vid_hibbs.htm" target="_parent"><img src="images/sm_hibbs.jpg" width="400" height="104" /></a>
		<a href="lostboy.htm" target="_parent"><img src="images/sm_lostboy.jpg" width="400" height="104" /></a>
		<a href="trials.htm" target="_parent"><img src="images/sm_trials.jpg" width="400" height="104" /></a>
		<a href="unshackled.htm" target="_parent"><img src="images/sm_unshackled.jpg" width="400" height="104" /></a>
        </div>
</div>
	</td>

[jscheuer1]

Oh, and also add the overflow hidden to the .slideshow class definition:

<style type="text/css"> 
.slideshow { height: 104px; width: 400px; overflow:hidden;}
.slideshow img { padding: 0px; border: 1px solid #eee; background-color: #eee; }
.med{font-size:medium;font-weight:normal;padding:0;margin:0}#res{padding-right:1em;margin:0 16px}ol li{list-style:none}.g{margin:1em 0}li.g{font-size:small;font-family:arial,sans-serif}.s{max-width:42em}</style>

[discdemo]

OK, thanks, John. that part should be correct, now.

My guess is that you can still see my issue, so...I'll stby if you were going to continue. That part of the code should be what you gave me.

[discdemo]

ok, just saw this...let me try that and i'll get back, ty.

[discdemo]

ok, this didn't look to solve the problem. but then i went into the page code where the slider script is also in the page header (i included because i think it needed to be in both the include and the actual page code).

I edited one page with the hidden param and it appears to be working perfectly.

Thanks for taking time out, John. I am most grateful for your expertise and time.

All the best:-) jz