Archive for November, 2010

Browserling: test your site in different browsers

Or at least, that’s what they promise. The reality is not getting close yet, though let’s not be too harsh on a project that only just launched, especially one with such promising features.

As a webdeveloper it’s always been important to check if your website works properly in different browsers. When using cool stuff like HTML5 and CSS3 even more so… you know some things won’t work in some browsers but you want to at least make sure they degrade gracefully. My usual method is a combination of installing the latest version of each browser on my pc and rely on browsershots.org for the rest. When a specific browser shows strange or serious malfunctions I’ll install a standalone version, run the Spoon browser sandbox or (worst case scenario) run a virtual machine.

Browserling promises an end to all this: It will let you run different browsers inside your own browser without having to install any plugins. (more…)

CSS3 rotate makes elements overlap

The problem

As I was working on my portfolio page I noticed an interesting bug in my theme: the thumbnail images in my posts are surrounded by an <a> element (they link to the original image) but hovering them didn’t always give the hand cursor. Clicking on them didn’t work either when the hand wasn’t appearing. At first I thought my links were broken, but the problem seemed to occur only on some areas of the images. After playing around I made the following observations:

  • All the linked images on the page produced the same bug
  • All the linked images were floated to the right. Not the <a> itself, but just the <img> was floating.
  • Making the <a>‘s float in stead of the <img>‘s didn’t fix the problem
  • Removing the floats did fix the problem.
  • Other websites didn’t seem to have this problem with floating links or images
  • Other websites don’t usually use the transform: rotate() CSS3 property

The investigation

I went on to investigate the structure of the HTML, which can be boiled down to the following simplified example: (more…)

Durango theme for WordPress

Durango is the name for my newly created WordPress theme, the one you’re probably seeing right now. I’m not a graphical designer, so most of the visual aspects I borrowed from a collection of other websites, but I tried to give it my own twist and included some cool new HTML/CSS stuff.

I’ll give a brief overview of how and why it was made, and things I think I should still improve. If you don’t care about all that and just want a copy of this theme, jump to the download button. (more…)