Why do my login status links not render properly with BlueprintCSS's print.css

Question

I am attempting to implement the BlueprintCSS grid framework in my app and after including the scripts it calls for my links are rendering weird. I have it narrowed down to the print.css. was wandering if anyone has run across this before.

Here's what renders

Logout (javascript:__doPostBack('ctl00$LoginStatus1$ctl00',''))

Obviously, removing the print.css fixes this problem but, why? This is the browser screen? IE8 and Chrome both render the same.

Answer 1

I believe this is caused by Blueprint's use of the :after and content content generation properties. The use for this is obviously so that people when reading printed documents they can see where links go to, since you obviously can't click on the paper to find out!

The easiest way to solve this problem is to remove, or change so that excludes your login link, this ruleset:

a:link:after, a:visited:after {
    content:" (" attr(href) ")";
}

Of course, it would also be a good idea to not use inline Javascript in the href attribute.