In preparing for my own design work, I created an Expression Design template for myself based on the Blueprint CSS framework.

There are utilities to customize the Blueprint grid to any number of columns of any width, but I started with the default 24-column grid and created a starting template for my latest project.

more...

As a regular part of creating websites, I include a Javascript script to add Portable Network Graphics (PNG) transparency to Internet Explorer 6. The script I use is called iepngfix and was created by Angus Turnbull of Twin Helix Designs.

There are other similar scripts, but most if not all of these pngfix scripts incorporate an IE-only CSS behavior attribute that targets image elements. The pngfix.htc behavior script scans the page for PNG images and applies an IE transparency filter. This results in proper transparency on the website. There are some limitations. See the PNGFIX page for details.

more...

Some folks getting on board with CSS tend to get stuck on CSS specificity. The descriptions of which rules override other rules tend to make more sense to programmers than designers, since programmers are used to the concepts of inheritance and overriding properties.

If you're not from the programming world and CSS seems a bit confusing, perhaps this analogy may help clear some concepts up. Think of CSS rules as poker hands. The best hand determines an element's style.

more...

For a while now, I've been looking for a Flash application that would perform the ubiquitous photo slideshow that I see on so many of the sites featured at Godbit (godbit.com now defunct).

Then I came across Richard Rutter's CSS Image Fades page last week. Cool, I thought. If I can fade from an image to a background, why stop there? Once a background image is fully visible, I could move it to the image tag, set its opacity to 100 percent, then slide a different image underneath it.

more...

With the announcement that IE7 will be pushed to the general public via a high-priority Automatic Update, we need to be even more diligent in ensuring our sites render correctly with the IE7 browser.

more...

If you didn't visit on CSS Naked Day, I've saved a screenshot of what this site looked like without styling.

Today, several hundred sites are removing "styling" from their web sites as a way of promoting quality internet design and in support of web standards.

So we're taking our styles off -- going naked for a day, so to speak. Why would we do this? It's to demonstrate some principles of professional website design that most internet visitors never see or realize exist:

more...

I was working on some CSS adjustments at work about a week ago -- in the normal setup: three different browsers open and my text editor squished at the bottom of the screen. One of my coworkers watched as I made CSS adjustments in my text editor, and noticed that my changes were appearing in all three browsers without any intervention on my part.

His first reaction was surprise. Then he realized what I had done. I had temporarily added a meta tag in the xhtml source document, which caused the browsers to refresh themselves automatically. He had never seen this technique used for CSS coding before.

more...

Microsoft released IE7 Beta 2 Preview yesterday and I've been checking on how sites are rendering.

It's not pretty.

Nearly every example of the One True Layout is broken. Suckerfish and to a greater degree Nick Rigby CSS Flyout Menus are not consistent with Firefox, Opera, etc rendering. Positioning is messed up on the Vine Type website.

more...

I've made a minor redesign change to my company site, switching it over from hand-coded ASP to Vine Type. Part of why I didn't do this earlier is that I had flyout navigation in place.

Now with the release of Vine Type 0.98, I can use the $_nav_map template variable where my navigation goes, then employed nickrigby-style css flyout technique (with some Eric Meyer thrown in ) to create the flyout menu. As I add pages, the flyout expands automatically.

more...

So I'm uploading my IE6 mouseover report to my blog and I notice this:

The bottom borders of every one of my blog entry titles is shorter than it should be. And I only see this in IE.

So my reward for finding one bug is to find another. Well today I had a chance to pare down the XHTML to a bare bones example page that I submited to Quirksmode.

more...

I ran across an anomaly with Internet Explorer the other day. I had hooked a mouseover event for a DIV and found that it wasn't being fired in IE as it should.

I narrowed down the HTML and isolated the problem. It occurs in the bottom margin and padding area only -- and only when no width is specified, or if width is defined as auto.

Example Web Pages

more...