Tutorials from April, 2009

Probably one of the most widely adopted “web 2.0” features is the grayed out overlay. Rather than always redirecting users to a new page, overlays allow the current page to get “grayed out” with an overlaid panel. With the wide use of Javascript libraries like jQuery, the prevalence of these grayed-out overlays is understandable: they are very easy to build.

Let’s start with the markup and CSS. We’ll need two wrappers, appended at the end of the DOM. Although we will append these later with jQuery, for now just put them right in the HTML (or wait until we append them).

The idea for these wrappers is that the first ‘overlay’ div will be the grayed-out background and the ‘overlay-panel’ will be the HTML panel that sits on top of the overlay.

Now let’s get started by styling the overlay. The first problem we’ll have to tackle … (more…)

Although good CSS should be written to be as browser-universal as possible, even the best front end developers find it necessary at times to target specific browsers for certain styles. In most cases this means writing a set of special CSS blocks to handle eccentricities in IE and its various versions.

There’s a wide variety of reasons to target specific browsers: IE6’s lack of native support for transparent png24’s, pesky ‘has-layout’ bugs, and IE6’s lack of min-height support are just a few.

One way to target specific browsers is through CSS selector hacks, which take advantage of quirks in different browser implementations. Perhaps the best known browser hack is the “star html” hack. Basically you prepend * html to any normal selectors in order to target IE6 specifically: