Fixed: Links jumping to the side on hover (in firefox)

[suleika]

Certain links, including links "behind" images, are jumping to one side when I hover over them, which can cause some very annoying jumping of adjacent items and occasional mass vibration if I hover on particular pixels.  It's caused by an expansion of some space on the right hand side of the link. I've tried to troubleshoot this disabling all my extensions and checking my user config etc, but I can't work out why it's happening.  Why some links and not others?  I've examined the css using the WebDeveloper extension but I haven't managed to see a pattern.

This started a month or so ago and I can't remember changing anything in particular at that time.

Here's an example from the current BitsDuJour page. The thin red lines are link outlines generated by the Web Developer extension.

First, without hovering:



Then the dramatic jump when I hover over "buy now"


The "comments" link also jumps.  You can see this when comparing with the screenshot where there is no hover. 


You can also see the "Focus MP3 Recorder" has extra space (by observing the red outline line)


Can anyone reproduce this?  Or help me fix it?  Or tell me where to post instead of here?  Or give me some clues as to the cause so I can google more succesfully for fixes?  Or point me to a test page where I can report which links hover and which don't?  It's driving me a little bit mad...

I'm using Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11 - Build ID: 2007112718

On preview; on this DCF page some of the links that are expanding on hover are:

• All links at the bottom of the page between and not including Donation coder: about us and Translate - except the rss icon
• My links in my text above
• My donation yellow icon below my avatar - the other icons on the left of the donation icon are not expanding on hover.  This icon is not jumping; like the Focus MP3 Recorder link above, I can only see the extra space on the right when I show the outline with the Web Developer extension.
  

I don't think there are any other expanding links on this page but I'm not 100% sure of that.

[blackcat]

sorry. i cant reproduce this problem. the site works fine in my firefox. Maybe there's extension or greasemonkey scripts that you install cause the problem. try clean your cache then run firefox w/o any extensions loaded. then surf the site again to see if it still happens

[suleika]

Thanks, blackcat.  I didn't think of clearing my cache.  I already tried disabling all extensions and greasemonkey - pain to do it again, but if you think I need to clear my cache as well, I will do it.

I've just remembered firefox has a safe mode, doesn't it?  I would expect no problem at all in safe mode, so I should try it to make sure of that.

[blackcat]

if you dont want to clear firefox cache, you can rename your cache folder temporarily so firefox will think the cache folder doesnt exitst and it will create a new one. whenever you want to get your original cache folder back, just delete the new cache folder that firefox created and rename your original cache folder.

firefox stores cache here
c:\Documents and Settings\$username\Local Settings\Application Data\Mozilla\Firefox\Profiles\

 

[suleika]

It's fixed.   

The same thing was happening in safe mode.  So that meant it wasn't extensions, themes or toolbar settings (except it still could have been preferences that certain extensions set - safe mode does not automatically disable those).

But I found out that safe mode does not affect user.js, userChrome.css or userContent.css, so I used your rename trick, blackcat, and renamed the latter two (the first one was empty) and the problem vanished. It turned out to be a userContent.css mod that I'd forgotten I did.  I somehow missed it when I was checking my config - I think I may have accidentally checked userChrome.css twice thinking I was checking the both it and userContent.css, since I don't remember seeing this file.   

Here's the offending line:

[Select]

/* display a new window icon when mousing over a link if it launches a new target */
a[target]:hover {padding-right: 17px;background: transparent url(new-window.gif) no-repeat top right;}

There was no new-window.gif, so all I saw was space.

Thanks for helping me.   

[suleika]

By the way, in doing this, I had some problems booting it in safe mode - I managed in the end.  I use Firefox portable on my second disc partition.  It is the windows default for internet, but the run command won't find it (I tried various versions, portable, not portable etc... I probably need to add the path or something).  Well, a quick fix was to pin a shortcut to my start menu (Windows XP style).  In the properties of the new Start Menu shortcut I was able to add the parameter -safe-mode.