When I view the site, the drop-down menus appear directly below the word that triggers them, which I assume is what you intended.

During development, Firefox may fail to detect all updates, particularly of linked-in assets such as CSS and JS files. Therefore, when you have a problem with your site, a good "first thing to try" is clearing your Firefox cache and if any functionality or layout depends on saved state or session data, deleting your saved cookies for the site.

(1) Bypass Firefox's Cache

Use Ctrl+Shift+r to reload the page fresh from the server.

Alternately, you also can clear Firefox's cache completely using:

orange Firefox button (or Tools menu) > Options > Advanced

On the Network mini-tab > Cached Web Content : "Clear Now"

If you have a large hard drive, this might take a few minutes.

(2) Remove the site's cookies (save any pending work first). While viewing a page on the site:

• right-click and choose View Page Info > Security > "View Cookies"
• Tools menu > Page Info > Security > "View Cookies"

In the dialog that opens, you can remove the site's cookies individually.

Then try reloading the page. Does that help?

You can also reload web page(s) and bypass the cache to refresh possibly outdated or corrupted files.

• Hold down the Shift key and left-click the Reload button
• Press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
• Press "Command + Shift + R" (Mac)

Start Firefox in Safe Mode to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).

• Do NOT click the Reset button on the Safe Mode start window or otherwise make changes.

• https://support.mozilla.org/kb/Safe+Mode
• https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

I've tried the solutions suggested by jscher2000 (clearing the cache) without success. Let me re-describe the problem.

Upon opening my website 9400.org the black menu bar appears in the correct position. Upon selection of a menu item, the black menu bar shifts downward and to the left, covering some of the page data. If I reload the page, the menu bar returns to its proper position. The problem repeats itself whenever a selection is made from the menu bar.

The page operates properly using IE, Chrome, Safari.

Additional suggestions?

Thank you.

JR

Hi rothjohn, you wrote:

Upon opening my website 9400.org the black menu bar appears in the correct position. Upon selection of a menu item, the black menu bar shifts downward and to the left, covering some of the page data. If I reload the page, the menu bar returns to its proper position. The problem repeats itself whenever a selection is made from the menu bar.

In loading various pages over a dozen times, I saw that twice (once when I tried right-clicking a link and pasting it into the address bar instead of clicking). I'm finding it hard to replicate.

Attached is a screen shot of the data from the Inspector (right-click > Q) showing the positioning for the out of position bar and the better positioned bar. I assume the difference is due to the script but I haven't dug into it or tried to figure out why it doesn't always work correctly.

Edit: Scratch the script, there's no script. Why is are the top and left rules usually ignored of my Firefox and only ignored on your Firefox after a reload?

Your edit poses a good question. I'm now starting to get complaints from my users who are experiencing the same placement problems that I've mentioned. So I know it's not just one of my machines, I'm seeing this problem using Windows 7 and Windows Vista.

Site always (in my experience) displays properly in IE, Safari, and Chrome so I assume the error is caused by Firefox. I can't insist that problem users switch to IE.

Suggestions for how to resolve or escalate this problem? I stored a few screen prints in a Word file. Apparently I can't attach that file to this message.

Thank you.

JR

Some suggested edits to 9400pagetemplate.css:

(1) Edit #topmenu as follows

• add: position:relative;

(2) Edit ul.pureCSSMenu as follows

• change: left: 100 to left:-1px
• change: top: 200 to top:-1px
• add: width: 905px;

(3) Delete the HTML comment on the first line. This is not legal in a CSS file.

This should give you a nice result in both Firefox and in IE8.

The units are missing for the left and top properties, so Firefox is ignoring them as the web console shows.
There should also be a line break before this rule for readability.

Could it be possible that there is a problem with the DOCTYPE if the rule get applied (it shows units in the screenshot).

ul.pureCssMenu {
	display:block;
	zoom:1;
	position:absolute;
	z-index: 1000;
	left: 100;
	top: 200;
}

The same here with missing units in height and width:

ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:3;
	height:100%;
	display:inline-block;
	background-color:#CECECE;	background-image:none;}
ul.pureCssMenu ul li.sep span{
	width:100%;
	height:3;
}

Thank you jscher2000 and cor-el. You've solved my problem.

JR

Thank you jscher2000 and cor-el. You've solved my problem.

JR