Fun with HTML and CSS

I spent some time yesterday figuring out CSS problems for Job Connections.

The Job Connections site was built using a CSS for printing that wasn't including all of the parts of the page that should be printed. They use a stylesheet called print.css, and when somebody would try to print a page, they weren't getting anything but the text in the middle of the page.



I took a look and found that the stylesheet was setting all of the region styles to "display: none", which tells CSS not to display them. Editing the stylesheet to remove these bits was all that was needed, so I set it up to print everything but the menu bar at the top and down the side.

In the same file, there was a reference that looked like an attempt to make the links display as bolded when the page was printed. The code that was trying to do this looked like:

a { font-weight: bold;
border-width: 0px;
text-decoration: none;
}

That wasn't working, mostly because the style was being applied to all anchors. I updated it to look like:

a:link, a:visited {
font-weight: bold;
border-width: 0px;
text-decoration: underline;
color: #520;
background: transparent;
}

This change applied the style to both links and visited links. I then went one step further and added some magic to get the actual link to print (works in CSS2 compliant browsers):

/* this bit will print the URL after the link
when done from the CSS2 compliant browsers */
a:link:after, a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}

The magic is in the ":after" bit, which basically says "after you display the link, display something else". With this applied, the links all get bolded, underlined, and are followed by the actual URL in parentheses afterward.

I don't have access to post this to the JobConnections web site yet, so you can see the problem if you go there and look at the printed page (print preview from your browser).

I got access to the web site (thanks to Walt Feigenson), so this is partially fixed now. It looks pretty good except the content still has quite a large area of whitespace to the left due to the way the style sheets are interacting. I'm playing with updating this now to make the print CSS work the way it should and not inherit the styles that cause this from the "screen" CSS.