Quick Tip – Consistent Border Weight in Internet Explorer
Ever define a border weight in CSS only to find it heavier in Internet Explorer? Today’s tip is on keeping consistent border width across browsers when using shorthand.
If you’re familiar with CSS shorthand, you’ll know that border width can be described in either exact units (pixels), or through one of several more general terms (like thin).
A Difference of Opinion
Shorthand would work fine normally, but once again Internet Explorer has decided to redefine the rules. As I’ve said in earlier articles, IE is an absolutely baffling mess joy to work with sometimes.
When all the other browsers are told to jump, Internet Explorer reinvents the term jump and then hits the deck.
For modern browsers, the CSS shorthand “thin” is synonymous with 1 pixel. Internet Explorer defines it as 2px. How’s that for a difference of opinion?
One More Pixel Wide
Internet Explorer consistently adds 1px additional width to the typical shorthand weight. A border width of medium (3 pixels) become 4, and thick (5 pixels) becomes 6 when rendered with IE.
One pixel difference may not sound like an earth shattering amount, but it can really make a mess on carefully measured layouts. I’ve put together a live demonstration illustrating the differences using “thin” as a baseline.
For those of you who don’t have a Internet Explorer handy, here’s a screencap from IE7:
As you can see above, it is a noticeable difference when scanning the page.
What Can I Do About It?
Unfortunately this seems to be an adapt by avoiding situation. Personally I would recommend specifying the exact measurement in the CSS to guarantee consistency.
The shorthand is not that much of a time saver to begin with, and this method will certainly save headaches when troubleshooting designs. If anyone else has suggestions or alternatives I’d love to hear them as well.
From experience, Internet Explorer seems to be the only browser that has this discrepency. If I’ve missed any others please let us know in the comments.
