Quick Tip – Consistent Border Weight in Internet Explorer

Consistent IE BordersEver 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:

IE Border Weight Thickness

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.

  • Stumble It!
  • Bookmark It!
  • Tweet it!

About Zach Dunn

Zach is a partner and interface designer at One Mighty Roar from Massachusetts, USA. Follow him on Twitter @zachdunn.

 

Discussion

  1. John V

    February 2nd, 2009 at 8:17 PM

    I can’t say I’ve ever run into this problem as I’ve never used the keywords to define the border thickness. Besides, isn’t defining an exact pixel size shorter than using the keyword anyway :P

    Good point to make though – and something to keep in the back of my mind if I run into code written by others.

  2. nikola

    February 3rd, 2009 at 3:25 AM

    it is always better to write 1px solid #some_color … thin, thick, blue, black bad solution … ;-)

  3. Madrid

    February 4th, 2009 at 3:51 AM

    Yeah, I also specify the exact pixels to avoid IE’s own interpretation. As far as I know, this only happens with IE.

  4. Maicon

    February 16th, 2009 at 6:13 PM

    Very good tips man. A have sufered with borders in IE..

Join the Conversation!

Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.

CommentLuv is Enabled

 

Sponsors

Advertise on Build Internet!