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:

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.

Posted Monday, February 2nd, 2009 · Back to Top

SPONSOR

Add Comment

8 Comments 0 Mentions

  1. John V Author Editor

    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 Author Editor

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

    ·

  3. Madrid Author Editor

    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 Author Editor

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

    ·

  5. CGoal Author Editor

    Great tip. It does make a difference when viewing. Everytime my page rendered i would see the border thickness first. my eyes were just drawn to it. I wanted the border to be as thin as it can be.. this article helped. thanks

    ·

  6. Helen Author Editor

    Thanks! Great tip! I’m still a bit of a web design newbie and articles like this are really helpful!

    ·

  7. Fabir Author Editor

    Awesome tips!!
    Your blog is been turning one of my favorites.

    ·

  8. Grout Author Editor

    It is really Greats , Thanks so much

    ·

 

Build Internet by One Mighty Roar. Since 2008.