A while ago, we got contacted at Drupal.org by the Internet Explorer 7 compatibility team about layout issues in IE7 on our site. The e-mail was intended to help web developers prepare for IE7 by pointing out problems. My guess was that Microsoft had used a web crawler to look for various CSS signposts (with human verification afterwards):

"The page www.drupal.org does not display properly in IE 7 due to specific CSS Hacks that we have deprecated in IE 7. We believe that this issue is likely caused by the use of the Underscore, html>body and Star HTML Hacks on your CSS file which has been removed from IE 7. In IE 6, the layout appears correct since the specific hack being used is supported in that version of IE.
...
Removal of these hacks will resolve this issue."

I got really annoyed by that last line because it's plain untrue. What's worse is that I've noticed similar comments made by others in the Drupal community (and elsewhere): "[Some site] is broken in IE7 because they use IE6 hacks". As the person who designed the Drupal.org theme, I want to clear this up because it's a big fat lie and it's easy to see why.

Any sane designer these days will design for the standards-compliant browsers like Firefox and then sprinkle on CSS hacks to make it work in IE6. The very nature of these hacks is that they are invalid CSS, which only IE6 considers valid (e.g. a { _display: none; }). Standards-compliant browsers ignore invalid CSS rules (as specified in the specs), so the hacks have no effect on them.

Because IE7 fixed the parsing bugs, it can now be considered one of those standards-compliant browsers (for parsing CSS anyway). This means that whether IE6 hacks are present or not will have no effect whatsoever on how the site looks in IE7.

So, whether intentional or not, Microsoft has been flat out lying. And by doing so they're shifting the blame for their screw-ups to the same designers they've been torturing for years.

Well, I'm tired of taking the blame: my design works fine in those programs that are worthy of the name browser.

If you're not reading this through an aggregator, you will have already noticed: I've redesigned my website.

The last theme lasted about 2.5 years, so it was time for something new and fresh.

At BarCamp Amsterdam, I worked with Adrian Rossouw on a UI for styling a website. The result is a pretty cool color picker like in Gimp or Photoshop, but without Flash or Java. It just uses Javascript, CSS and transparent PNGs. It degrades to regular textboxes where you type/paste an HTML color code.

A bit later, Chris Messina suggested a slider control. Not much later, it was finished. It degrades to a plain select box, which is where the slider values are taken from. Its main purpose is to be used to select between options, and not for arbitrary continuous ranges.

These will soon be coming to a Drupal site near you after some more polishing and bug testing. Whether they will be used in Drupal 4.7 remains to be seen (though I can already think of a few spots where they would be useful).

Yay for open-source developer cross pollination :).

Note: Updated to work on IE6.

Dries pointed me to a nifty article which shows how to add rounded corners dynamically through JavaScript, without requiring images.

While the idea is cool, the implementation was rather limited, as the corners still had to be specified in CSS by hand.

So I modified it so the widths are calculated in the JavaScript instead. It now accepts any radius parameter and even allows elliptic corners. And once I got this far, well, adding anti-aliasing was really the obvious next step ;). So now we've got dynamic, anti-aliased and flexible corners.

The code is not very optimized, but then I've never done a real rasterizer before, and Javascript isn't the best of languages for stuff like this.

Unfortunately there's still a weird bug in the pixel coverage calculation (see nifty.js), but it's hardly noticable. If anyone figures out why, let me know.

Feel free to use this in any way you want, though please give credit where credit is due.

At FOSDEM I gave a presentation about Theme Development for the Drupal Conference in the Drupal developer's room. You can take a look at the slides. The topics I covered are:

• Overview of the Drupal theme system
• Making the FriendsElectric theme
• Clean, semantic XHTML/CSS
• Some examples of sexy Drupal sites

The presentation was filmed, the video is available through BitTorrent. For info on how to play the Ogg Theora files, check these instructions.

The other presentations are linked on drupal.org.

Read on for some useful links related to Drupal theming.

I've created a new theme for Drupal, called FriendsElectric. You can check out a quick live demo. You can get it from its Drupal.org project page.

The theme is tableless, can handle 1 to 3 columns and supports all theme engine options. The layout is fluid with fixed-width sidebars. Customizability is not so high due to the heavy use of images and the voodoo magic all over the CSS.

The biggest trouble was getting the layout to behave. It seems every approach to CSS layout out there suffers from at least one of these issues:

• (Floated) fieldsets inside the main content go crazy
• Clears inside the main content break the layout
• Completely fixed-width layout

All of these are bad when the content can be as varied and complicated as in Drupal. I managed to get rid of most issues in IE, Opera and Mozilla, but I have this sneaky suspicion that the Safari/Konqueror will need some adjustment. Feel free to report bugs, but do specify browser/os/version, and send a screenshot to me if possible (e-mail address on the left).