Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2009-04-16
5
Medium Priority
?
409 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:qeng
  • 3
4 Comments
 

Author Comment

by:qeng
ID: 24158353
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?' ... !!?
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 750 total points
ID: 24165050
>> 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.

Caching / temporary files would be the most likely culprit combined with what appears to be an Explorer crash.

What version of DW are you using?
0
 

Author Comment

by:qeng
ID: 24166450
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.
 
0
 

Author Closing Comment

by:qeng
ID: 31570982
Jason, thanks for jumping in on the initial reply.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
How do you create a user-centered user experience on your website? And what are some things you should consider in the process?
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Suggested Courses
Course of the Month10 days, 12 hours left to enroll

572 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question