asked on

Why Does Horiz Spry Menu Bar Position Itself Off-Screen Left in DW CS3

I don't understand why inserting a horizontal spry menu bar in DW CS3 into a centered div should result in the menu being positioned partially off-screen to the left.

To test this, I'm using a stock oneColElsCtr.css template, creating a div id="navbarwrap" in the main container div above the main content and applying a bit of inline CSS code to highlight div id="navbarwrap".

Then in DW's design (or code) mode, I position my cursor inside the div id="navbarwrap" and insert a horizontal spry menu.

Instead of staying inside the div id="navbarwrap" where it's been placed, the menu is offset way left in the rendered page. It's not a cross-browser problem ... happens in both FF3 and IE7.

Why, and how to cause such a menu to remain in the div in which it was placed?

Thx.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menutest2</title>
<link href="CSS/oneColElsCtr.css" rel="stylesheet" type="text/css" />
 
<style>
#navbarwrap {
position: relative;
width: 100%
height: 40px;
background-color:#0066FF;
}
</style>
 
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
 
<body class="oneColElsCtr">
 
<div id="container">
<div id="navbarwrap">
 
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
      <ul>
        <li><a href="#">Item 1.1</a></li>
        <li><a href="#">Item 1.2</a></li>
      </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>
<h1>navbarwrap</h1>
</div>
  <div id="mainContent">
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at ... </p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at ... </p>
	<!-- end #mainContent --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

Open in new window

qeng

ASKER

Folks,
Don't bother trying to solve the apparent CSS/HTML related part of this question. There was something else causing this.
I seem to have found the source of the problem although I don't know why this occurs. It may be Explorer or DW related.
In trying to troubleshoot what seemed like abnormal behaviour of the menu, from within DW, I deleted the entire SpryAssets folder and deleted the test file I was working on, then re-created the test file and inserted a fresh instance of the horiz spry menu bar.
Initially this didn't seem to change anything ... same behaviour.
Shutting down DW and restarting it didn't seem to change anything. Same odd behaviour of the menu (yes, I was refreshing browser caches and even shutting down and re-opening the browsers).
I also noticed at the time that Explorer was behaving oddly. I was trying to create a screengrab to add to my post and while I was able to open a graphics editor, I wasn't able to save files from within the editor (I use this editor daily so ... that was not normal for it). Explorer was also not letting me shut down (by normal means) the graphics editor.
After shutting down the computer entirely and going through a couple of reboots, without changing anything, I reloaded DW and republished my test page to both FF and IE and miraculously, now the spry menu is displaying correctly inside the div id="navbarwrap".
I've occasionally had this type of odd DW behaviour in the past where changes being made to the code after a while, just don't seem to get reflected in the browser or worse, only some changes seem to get reflected while others don't show.
I'll leave this question up for a short while in case someone else has experienced this type of behaviour but I feel at this point it's like someone saying 'a program is doing something odd ... why?' ... !!?

ASKER CERTIFIED SOLUTION

Jason C. Levine

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

qeng

ASKER

CS3 Version 9 Build 3481
I suspect the same thing. Does the cache have a size limit (I would have assumed old info just got pushed out if so). This seems to have occured near the end of longer development sessions where many pages were loaded/reloaded and the browsers are holding many pages on screen.

qeng

ASKER

Jason, thanks for jumping in on the initial reply.