I have an ASP.NET MVC application that has a jQuery Treeview and a jQuery Splitter in it. There is a header at the top. Below that, the splitter is used to separate the space into two divs. The left div contains the treeview, and the right div contains the content.
I have a stylesheet just for the content area; all of the styling is prefixed with #Content, and the div that contains the content is id="Content". Within that stylesheet, I have styled the <a> links so that they’re not underlined unless you hover over them.
Typically I put a table in the content area to display some grid-style data. Within the grid is a column of links to display detail.
Here is the problem. Most of the links in the content area will work properly (they will underline when you hover over them), but there are one or two links in the column that are failing their a:link style; they will be underlined on first display, and stay underlined whether they are hovered over or not.
This only happens when the page is rendered out of the ASP.NET MVC application. I am using the development web server in Visual Studio (Cassini) for testing. If I View/Source in the browser, save the page on my desktop, and fixup the links to the jQuery scripts and the style sheets, and view the page in the browser by clicking on the thusly saved page, the problem does not occur.
I have tried both Internet Explorer 7 and the latest version of Firefox, and the links fail in exactly the same way, but only when running the actual application. All of the styling works, except for <a:link> in the #Content div.
Has anyone seen these kind of random link styling failures before? I am at a loss. I don’t understand why the page would work as advertised if I save it out of the browser and open it again, but it will not work from the application, regardless of browser.
Fixed by adding
a:visited { text-decoration:none }to the content area stylesheet, and clearing the browser cache.