innerHTML

I have what a former professor of mine called fear of the “fraud squad.” Today’s example: if someone looking at my CSS asked me to articulate the difference between a and a with the :link pseudo-class, i.e., a:link, could I explain the difference? Or would I throw out a useless definition and then hear the fraud squad busting through my office windows from their black helicopters?

I couldn’t articulate the difference but can now. The venerable W3C states that browsers use :link and :visited to distinguish between links that have not or have been visited. Also, these pseudo-classes are mutually exclusive. So, what’s true for a:link will never be true for a:visited, and vice versa, but if you define a style for a, it will be true for both.

About pseudo-classes: a layman’s definition of a pseudo-class is hard to find, but 456 Berea Street has a blog entry on pseudo-classes that’s helpful.

http://shouldiusetablesforlayout.com/

Why this never occurred to me and why I never saw this solution before, I don’t know. Used with max-width, it works really damn well.

So, you’ve got a webpage you’ve designed—it looks great, except for a jump in width when the content goes from exceeding the viewport height to fitting into the viewport height. The default behavior of IE6 and 7 is to always have scrollbars on the right, but Firefox, Opera and Safari all only add scrollbars as you need them. So, the question: is there a way to force scrollbars to always be present?

Yes, thanks to a solution by Patrick Lauke that I read about here. You set the height of the html element in your css to 100% and the bottom-margin:1px. I confess it works.

This breaks how the browser works by default and I’m loath to do that, but in a particular project I’m working on (a web application that could potentially be used all day), this jump in width would drive some users up the wall.

This follows up on my last post about the :hover pseudo-class. Turns out it doesn’t quite work for “all” elements.

The default action in HTML for a table is to treat a tr, or table row, as something like an invisible container. You can apply an attribute to a table called “border-collapse” which switches the prominence table’s give to columns over to rows, letting the row sort-of become “un-invisible” (guess that’s the same as “visible”) and able to take style. For example:

http://staff.washington.edu/jtate/dev/tabletest.html

If the “border-collapse” attribute is removed from the above test, you lose the ability to style rows. But also notice in the above test page that the hover attribute–which the CSS2 spec from the W3C says works for “all” elements–only works on the top row and then only partially on the bottom rows. It’s a mystery. Applying padding, margins, all sorts of other fun attributes doesn’t solve it/make the :hover work as it should (or should according to my definitive guide to DHTML).