DD AnyLink Drop Down Menu

[chinchilla2]

Script : DD AnyLink Drop Down Menu

I have been able to implement this script on my site using PHP. However there is a change in display behavior between FF1.5 and IE 6.0.2 SP2. In addition there is a display shift in FF when screen resolutions are changed. In FF, the menus get shifted to the left when in any resolution greater than 800x600.

1024x768:

800x600


Also, in FF I get a "Error in parsing value for property 'top'. Declaration dropped. Line: 0" when I mouse over or click the links.

The script and the css have been returned to their original settings from my haphazard attempts at getting it to display the same in both IE and FF. I have, however, separated out the script and calling it up as an external and I have added the css to my global css page.

The only variable I can see that may be a factor is the centering style I am using in the global css page.

.centersite {
	padding: 0px;
	margin: 0px auto;
	position: relative;
	text-align: left;
	width: 760px !important;
	}

If any additional code needs to be posted, please let me know. Since the script in question is currently on a development server, I can't post a link but i will post as much code as needed to help out with this.

-- Edited to add --
If anyone can tell me how to get rid of that little dashed line around a previously clicked link I'd appreciate it. I've tried adding "onBlur" comments to the href line with no results. Could be my syntax. Tips graciously accepted on this.

[jscheuer1]

I have been able to implement this script on my site using PHP. However there is a change in display behavior between FF1.5 and IE 6.0.2 SP2. In addition there is a display shift in FF when screen resolutions are changed. In FF, the menus get shifted to the left when in any resolution greater than 800x600.

This most likely has to do with the text-align:left of the .centersite selector. Perhaps you can add text-align:right or center to the selectors for the menu. Or, you may need to drop that declaration from .centersite and add it in individually via selectors or inline for the elements that actually need it.

Also, in FF I get a "Error in parsing value for property 'top'. Declaration dropped. Line: 0" when I mouse over or click the links.

This is a new thing with FF 1.5 and greater. It really doesn't mean much, only that FF is ignoring this (what it considers an invalid) style. If it doesn't affect the vertical positioning of the element in question, don't worry about it. If it does, further investigation will be required to correct the situation.

If anyone can tell me how to get rid of that little dashed line around a previously clicked link I'd appreciate it. I've tried adding "onBlur" comments to the href line with no results. Could be my syntax. Tips graciously accepted on this.

This is a part of the user interface and, as annoying as it is from a design perspective, impacts directly upon usability, particularly for a mouseless user. As a result, it is best just grinned and borne with.

[chinchilla2]

John,

I tried removing the "text-align: left;" as well as modifying it to read "center" and "right" with no results. Good suggestion though. The majority of the text lies inside table cells and are manipulated in that fashion so that line is redundant anyway and was pulled.

You did get me to thinking and I discovered that if I remove the position declaration from .centershop (position: relative) then the dropdowns position as they should. So far I have found no other effects from removing that line. This is only a "stop-gap" fix since if I do have to replace it for other sections of the site to function properly, I'll be back at square one. I'm hoping it's another redundant bit of coding. (Nothing like trying to modify someone else's work without destroying something that you need to retain).

FF parsing may be the problem though. I did several checks during modifying and checking the page layout and it's not only popping up the parsing error for "top" but also for "left", which would indicated this is where the problem is. I get no resulting error indication in IE. These are not a 1 time per page error either. I can clear the console, cache, close and reopen the browser, force a refresh and I get those errors for every time I mouse over the links. For example if I hover over the link twice, then I get 2 listings for each error.

If anyone can figure out what the parsing problem is, then please post it. I'll do the same if I can find the right patch for it in case others may experience the same effects.

[jscheuer1]

FF parsing may be the problem though. I did several checks during modifying and checking the page layout and it's not only popping up the parsing error for "top" but also for "left", which would indicated this is where the problem is. I get no resulting error indication in IE. These are not a 1 time per page error either. I can clear the console, cache, close and reopen the browser, force a refresh and I get those errors for every time I mouse over the links. For example if I hover over the link twice, then I get 2 listings for each error.

Oddly enough, this happens on the demo page as well but, does not effect the positioning of the drop downs so, I would think it is not a problem. Additionally the line number given for the error is 0. This usually means that the declaration is being applied via the use of the javascript setTimeout() method. Elements set for inclusion in this method often cannot be found due to syntax errors in the coding or neglecting to define them in a wide enough scope for the setTimeout() method to understand what is being referred to. Still, since it occurs on the demo page and creates no problem there, I would think the chances are very high that it is a red herring and that some other aspect of your page's design is responsible for the misalignment issue you are experiencing.

Furthermore, the only setTimeout() method employed by the script is used for hiding the drop downs, not for displaying them.

One more tidbit on this, if you find this line in the script:

dropmenuobj.style.left=dropmenuobj.style.top=-500

and change it to this:

dropmenuobj.style.left=dropmenuobj.style.top=-500+'px'

The error will go away, so give that a shot and see what happens. I'd wager it will stop the error, if it fixes your alignment problem too, great! But, I doubt that it will.

[chinchilla2]

John,

I gave this a whirl and you're right, stopped that error from popping up. Plus it didn't bother the cross-browser checking at all. A big thumps up to you on that one.

One more tidbit on this, if you find this line in the script:

dropmenuobj.style.left=dropmenuobj.style.top=-500

and change it to this:

dropmenuobj.style.left=dropmenuobj.style.top=-500+'px'

The error will go away, so give that a shot and see what happens. I'd wager it will stop the error, if it fixes your alignment problem too, great! But, I doubt that it will.

I had to check to see if it fixed the alignment problem but that still occurred. I'm about 3/4's of the way through the site pages and haven't found where removing ".centersite - position: relative" section has turned into a factor. Without it in there, the alignment on the menu works perfectly. With the modification to the code above, it definitely looks like that positioning in the global settings was the culprit. I'll post again if I wind up having to replace that line, but for now your tips and tricks here have definitely gotten me way further than my clumsy hacking would have.

Thank you bunches,