I recently ran into a problem that was really hard to figure out. I was working on a responsive design where I used img {max-width:100%;} to make sure that images would be downsized rather than overflow in narrower viewports.

Sometimes the only way of incorporating data from a third party is by loading it in an iframe element. A few examples are financial reports, e-commerce applications, and ticket booking applications. Using an iframe is not ideal for many reasons, one of which is that it can make multiple sets of scrollbars appear on the page. Not only does it look ugly, it also makes the site less user-friendly. But there is a workaround.

Changing only the colour can be a bit subtle though, especially for people with colour vision deficiency. Depending on which colours are used to differentiate between visited and unvisited links it can be hard to tell them apart. To make the difference more obvious, there are a number of techniques involving background images, generated content (like the one I describe in Check marking visited links), and other CSS properties. However, if you’ve been using any similar tricks to style visit

Unfloating a floated element is as simple as specifying float:none. Width doesn’t seem to be quite as straightforward – lately I’ve come across several cases where people use width:100% to undo explicitly specified widths when they should be using width:auto instead. So here’s a brief explanation of the difference.

This was pretty puzzling as I couldn’t remember having any problems with buttons in Safari for iOS before. After taking a closer look at the CSS I was using for these particular buttons and the CSS I had used previously, I managed to find out what made the difference.

As I have noted in a couple of blog posts recently, there are some cases when CSS has quite unexpected results in screen readers (or the way web browsers create the accessibility information they hand over to screen readers). If you haven’t read them, the posts are Screen readers, list items and list-style:none and Using display:table has semantic effects in some screen readers.

That isn't necessarily a problem provided that you use progressive enhancement and unobtrusive JavaScript. If you follow those principles, content and basic functionality will still be there when scripting is unavailable. Many of us understand that. But one thing I’ve noticed is that some developers forget to consider semantics or accessibility in the markup they use JavaScript to insert.

With that said, sometimes you have to do things you don’t really want to. Like styling select elements, which I’ve recently had to find a way to do. There are quite a few workarounds for doing this out there. However, most of the ones I looked at replace the select element with a bunch of links which changes semantics and behaviour a bit too much for my tastes. I couldn’t find any implementation that I was completely happy with, so I took the best one I could find and tweaked i

I don't expect this to be a big deal. Actually I’m not sure it will have any impact at all, at least not for me. It’s already a rare thing to need to do something special for IE9.

There used to be a time when “everybody” had Flash player installed. These days there are many millions of iOS users that don’t. Apple does not include Flash Player with new Macs anymore (neither is it included with OS X 10.7 Lion). And then there are people who block Flash with browser extensions or uninstall it completely.

There used to be a time when “everybody” had Flash player installed. These days there are many millions of iOS users that don’t. Apple does not include Flash Player with new Macs anymore (neither is it included with OS X 10.7 Lion). And then there are people who block Flash with browser extensions or uninstall it completely.

In situations like these you can use CSS to tell any HTML elements you want to behave like they were tables, table rows, and table cells by using a combination of display:table, display:table-row, and display:table-cell. You get the layout you want without littering your markup with tables that shouldn’t be there. But there is a slight catch.

But wait a bit. Leaving the issue of putting elements that may rely on JavaScript to work in the markup for another time, should those elements really be links? What does the text on them say? What happens when you click them? If they trigger some kind of action that doesn’t match the normal link behaviour of going to another URL, it’s quite likely that you should really be using buttons.

But that’s not all. As part of the birthday celebration there is also a campaign to raise 600 000 Ethiopian Birr (≈ USD 35 000) for charity:water. The goal of the campaign is to give the people of Northern Ethiopia access to clean water. You’ll find more info about the campaign on the Authentic Jobs charity:water Campaign 2011 site.

At first I thought it was going to be as easy as just copying the .vdi files to the other drive and then pointing each Virtualbox machine to the new location of its corresponding .vdi file. Turned out it isn’t quite that easy.