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.