Most recent post

Using max-width on images can make them disappear in IE8

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.

It worked great everywhere… until I went to check in IE8. The site’s logo was gone! None of the usual IE bug fixes cured the problem, and it took me quite a while to realise that max-width was part of the problem.

Posted on February 2, 2012 in Browsers, CSS

Slightly older posts

How to adjust an iframe element’s height to fit its content

In some cases JavaScript can be used to resize an iframe element to make it as tall as its content, making it look like the content is part of the parent page.

Posted on December 16, 2011 in JavaScript, Usability

Visited links can only be differentiated by colour

It used to be possible to apply any CSS to visited links. This has privacy issues, so most browsers have implemented styling restrictions and only allow colours to be changed.

Posted on December 8, 2011 in Browsers, CSS

The difference between width:auto and width:100%

If you're using width:100% to undo a previously set width on a block level element, you should probably be using width:auto instead. Here's why.

Posted on December 2, 2011 in CSS, Quick Tips

Styling buttons in iOS WebKit and -webkit-appearance:none

When applying CSS to buttons there are some odd behaviours in WebKit browsers for iOS. Luckily there are at least two ways of working around them.

Posted on November 24, 2011 in CSS

Screen readers and CSS

Some CSS intended for visual media types only has unexpected and semantic effects on screen readers.

Posted on November 17, 2011 in Accessibility, CSS

JavaScript-created markup also needs to be semantic and accessible

Browsers, assistive technology and end users have to deal with non-semantic markup even if it is inserted by JavaScript functions.

Posted on November 10, 2011 in (X)HTML, Accessibility, JavaScript

An accessible, keyboard friendly custom select menu

A way of styling the closed state of select elements without sacrificing accessibility.

Posted on November 3, 2011 in Accessibility, CSS, JavaScript

More posts are in the archive