I have integrated code for a LavaLamp sliding menu which so far works great (I had a few issues but was able to quickly solve them by reading through the boards) however there is one frustrating thing that's in my way. When you initially load a page, the menu hover background is in the wrong position, its close but off a bit. For example, go to the home page and the background state is a little wider than it should be, hover over it and it corrects, now go to another link, say the About page, no problem, but hard refresh and its way off initially, hover again its fine... I don't think my client will like this but can't seem to fix it, please help!
Source: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/?cp=all#comments
My page: http://www.kristophersamari.com/concorde/index.html
EDIT: noticed that that depending on the menu item selected as current, the further to the right it is offset. i.e. "home" is only offset a bit. "about us" a little more, etc. then "contact" is way off...
OK so I found the solution, it was not a spacing issue per se, it was the way the script was being loaded. Because the the script was being loaded by default as
$(function() { … }it was creating the space needed for the.backelement using the default font space before loading the replacement font which would have defined the correct space needed.Instead it was suggested on the message boards to replace the
$(function() { … }with$(window).load( function() { … }instead, worked perfectly across all browsers!