Let’s say you rely on a third party CSS framework that set the default layout of your content. The following CSS rule is part of the framework:

img {
    width: 100%;
}

This CSS directive tell all your images to use the full width available to them.

Now, for any reason (aesthetic, layout, etc.), you want to reset this behaviour.

One solution (the laziest) is to remove those three lines from the original CSS file. But if you’re like me, this sound too dirty for you as you don’t want to modify the original CSS file (I like to avoid patches on third party tools and libraries I don’t maintain).

Another solution consist in overriding this width attribute in another CSS file that you will call after the original one. This case is covered by the CSS 2.1 specification which define the inherit value:

img {
    width: inherit;
}

This solution is perfect and work as expected in Firefox. Unfortunately, and without any surprise, it doesn’t with Microsoft’s browser as IE has anecdotical support of CSS’s inherit.

But today I found a trick to fix this in both Firefox and Internet Explorer. The workaround is to use the auto value instead of inherit:

img {
    width: auto;
}

I’ve tested it with both Firefox 3.0rc1 and Internet Explorer 6.0.2800.1106CO.

Of course this solution is not generic: it only work in my case because img html tags has width attributes that support the auto value.