Trace link hover styles

Question

I have been using Firebug in Firefox and Developer toolbar in IE to help trace my styles for a branding effort in SharePoint. The trace styles in Developer Toolbar is very nice.. I can easily trace a hyperlink's styles and create the css to change it's styling, I'm having some trouble with tracing the hover style for links as neither Firebug nor Developer Toolbar will tell me where those styles are being defined, which makes me hard to override it..

I even tried a:hover { color: #ccc !important; } as a hackish way of doing things, and this fixed a lot of them, but some still remain. The CSS that comes with SharePoint is pretty big, and it's hard to manually go in and find them myself.

Any suggestions?

Answer 1

Jopache, I've been debugging on Chrome or Safari for several months and have grown really fond of the "inspect element" option that's built into webkit when you right-mouseclick on an element. I believe that firebug also adds that functionality to Firefox as well--I switch to Firebug when I really need to get detailed on my requests. So, if you've never tried this one, right mouse click on your link (it will be in the hover state at that point) and click on inspect element. Hopefully, that'll point you to at least the a: state which can then be searched via ctrl-f or grep for similar styles. Also, you'll notice a "computed style" that can be helpful to find specific quirks that can serve as alternate elements to search on.

It can be frustrating to do this on big documents....I'm in the middle of a hugely complex application UI refresh with a 5,000 line CSS document that's more complicated that any I've ever seen. Sometimes, it just requires head-banging. You might try a shortcut and see if a generic a:hover declaration at the bottom of the CSS doc (remember, it reads top to bottom so the last element will override any previous) to solve the issue while you search for a better solution.

If all else fails, here's a pretty good tut: http://www.cleverworkarounds.com/2007/10/08/sharepoint-branding-how-css-works-with-master-pages-part-1/