Member Avatar for jean4designs

I am having a problem with a website I designed for a portfolio. The spry menu looks fine in Firefox and Safari but in IE when the sub menu comes up you see the word false and there is what looks like a beveled border around half of it. I am new to dreamweaver and web design and I have tried to redo the site, change the spry menu options even changed the background because IE would put a white background behind the spry menu. If anyone has any idea why IE does this and how I may correct it I would appreciate it. I am getting the feeling IE just doesn't like Mac users and dreamweavers spry menu. Site-

Thank you......

  • 2 Contributors
  • 2 Replies
  • 134 Views
  • 8 Months Discussion Span
  • Latest Post Latest Post by TolucaDiablo

Dani AI

Generated

Nice find by — the visual "false" and beveled edge came from the Spry code that inserts an iframe behind the submenu. That iframe is a legacy shim used to work around old IE z-index/stacking issues (native controls like <select> could show through popups). Commenting the shim removes the artifact, but it also disables the original workaround that the shim provided.

If the site only needs to support modern browsers, disabling the shim is a practical quick fix. If older IE must be supported, consider one of two safer approaches: 1) patch the shim so it really is invisible (clean src, no border, fully transparent), or 2) only enable the shim for the IE versions that require it (feature-detect or use conditional comments). A properly created shim should use a blank source and explicit style rules instead of leaving defaults that can render oddly.

Example pattern to create a transparent iframe shim (adjust sizing/positioning to match your menu):

function insertTransparentShim(menu) {
  var shim = document.createElement('iframe');
  shim.src = 'about:blank';
  shim.frameBorder = '0';
  shim.style.position = 'absolute';
  shim.style.border = 'none';
  shim.style.opacity = '0';
  shim.style.width = menu.offsetWidth + 'px';
  shim.style.height = menu.offsetHeight + 'px';
  shim.style.left = menu.offsetLeft + 'px';
  shim.style.top = menu.offsetTop + 'px';
  shim.style.zIndex = (parseInt(getComputedStyle(menu).zIndex,10)||1000) - 1;
  menu.parentNode.insertBefore(shim, menu);
  return shim;
}

Troubleshooting tips: use IE's developer tools to inspect the DOM at runtime and look for the inserted iframe (check its src, borders, and computed styles). Try toggling the shim off to confirm whether select/object controls bleed through. Also ensure your page uses a standards DOCTYPE and consider replacing Spry with a maintained CSS/JS menu solution if long-term support is needed. Thanks to for sharing the discovery and to for confirming it helped.

Member Avatar for jean4designs

Well it feels nice to solve your own problem but it took so long. I have been having this problem for weeks and finally wrote an SOS on this site tonight. Afterwards I went to another site and found the answer and I am happy to share it with others

To eliminate the "false", open your script file and locate this line:

this.createIframeLayer(menu);

Place 2 slashes in from to comment it out, like this:

//this.createIframeLayer(menu);

this also gets rid of the bevel border look in IE around the sub menu......

Never in a million years would I have come up with this answer since I do not do java script and dreamweaver writes all this info in the CSS. So I am happy to share with others like me out there.

Member Avatar for TolucaDiablo

Thank you so much for solving this problem. I've been looking all over the web and could not find anything.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.