Saturday, March 10, 2007

The IE border-spacing workaround

Everyone knows these two HTML table tag attributes: cellpadding and cellspacing. And everyone hates the annoying necessity of these attributes in the CSS era. Well, developers, who has looked after what's up now about this issue, have learned that fortunately the cellpadding attribute is safely substitutable with the padding value of the table cells.

But what about cellspacing?

Cellspacing can also be omitted if you work with the border-collapsing model, because IE supports this model in CSS. (Or maybe not; we'll come back to this later.) Anyway, just put border-collapse: collapse in your table's style, and all the space between your table cells will be gone, and the adjacent borders will collapse to one simple border.

(For those of you who didn't fully get the picture, here is a nice illustration of the two border models.)

Problems will arise when you want to use the separated borders model. In this mode the CSS engine (browser) is expected to apply the td border styles separatedly to every single table cell, just as these were simple divs. We can think of this as the normal behaviour, and the collapsing model as a special case, if only because that the former is the initial (default) value in the CSS specs. When you're in the 'separate' model, you can control the space between your table cells with the border-spacing value of the table. You can set the horizontal and the vertical spacing.

But the problem is that IE doesn't support the CSS border-spacing attribute. Instead it puts a fixed 2px space between the cells. This is the point, where normally a developer gives up, becomes a bit melancholy, and puts back the cellspacing attribute into the HTML code. The conclusion: cellspacing can't be controlled by CSS (cross-browser).

Some good news

However, there is some consolation: generally you don't need that. Usually we only need to eliminate that bad looking space between the cells, and this can be achieved by CSS, even in IE. And the good news is that not only in the 'collapse' model but even in the separated!

Say, we want a table, in which all table rows have a red 1px bottom border, and a pink 1px top border (we want it to look a bit like buttons). 'Collapse' model is not an option now. This is a situation, where we have to use the 'separate' model with 0-width border-spacing between the cells.

For this the standard CSS code is as follows:
table {
border-collapse: separate;
}

td {
border-top: 1px solid red;
border-bottom: 1px solid pink;
}

It works in the standard compliant browsers, but what about IE?

That's a Feature, Not a Bug

Thankfully, IE is so buggy, that one bug helps to fix an other. So, what to do if I want to achieve a zero-spacing separating model? Exploit the bugs in the collapsing model! IE's border collapsing works fine, but magically gets switched off, if you give a 'position: relative' style to the table cells. If you do this, the browser jumps back to the separated model, width 0 cellspacing! Thx, Mr. Bug.
table {
border-collapse: separate;
border-spacing: 0;
*border-collapse: collapse; /* hack is needed for IE7 also */
}

td {
border-top: 1px solid red;
border-bottom: 1px solid pink;
*position: relative;
}

This way, you don't need any of those ugly HTML tag attributes, while working in either a collapsed, or a 0-cellspacing separated borders model. Have fun!

UPDATE

knakts noted in his comment that this workaround provides solution only to those cases in which the border-spacing value is zero. And I felt sympathy for him/her. Thus, as a matter of urgency, I researched another workaround, which brings us closer to the heaven.

Here it is:
table {
border-collapse: separate;
border-spacing: 5px;
*border-collapse: expression('separate', cellSpacing = '5px');
}

Still not perfect, because you can't differentiate vertical and horizontal spacing, but, as I said, one small step to the happiness.

knakts, don't be melancholic!

UPDATE 2 on 2009.05.05.

Check out this. An article about how to make it really behave like a one-time-running configuration, instead of the usual CSS expression behaviour with the well-known huge performance hit.

82 comments:

  1. OK -- this is a great post on an obscure topic -- thanks for the info!

    ReplyDelete
  2. Thanks a lot, this is great hack :-)

    ReplyDelete
  3. 1)Should I use both collapse and separate for class.table?
    and
    2)Is that "*" necessary in both
    *border-collapse: collapse;
    and
    *position: relative; ?

    Thanks
    David

    ReplyDelete
  4. Hi David,

    1. Yes, you should. Standard browsers will ignore the rules with an "*" before them.
    2. Yes, it's a necessary workaround for those rules which are not supported in either IE6 and IE7.

    ReplyDelete
  5. Interesting article. Unfortunately it is not solution for border-spacing other than zero. Now let me get a bit melancholy and put back up the cellspacing...

    ReplyDelete
  6. Thanks, the "expression" method worked. :)

    ReplyDelete
  7. I've been looking for days for a way to get more spacing between cells to simulate border-spacing in IE. This is the best solution I've found. Thanks very much!

    ReplyDelete
  8. Excellent solution!
    Thanks.

    ReplyDelete
  9. It is really helpful, thanks

    ReplyDelete
  10. Wow! Two days trying to figure out a solution to the border-spacing issue and all it needed was one line. This worked for me to make the spaces between cells look the same in IE, Opera, and Firefox.

    table {
    border-collapse: separate;
    *border-collapse: expression('separate', cellSpacing = '1px');
    border-spacing: 1px
    }

    So simple.

    When you know how. ;-)

    Thank you so very much.

    ReplyDelete
  11. Just what I was looking for! Thanks, Martin

    ReplyDelete
  12. I tried this solution and it didn't work. IE only said something about blocking active content, asked me if I wanted to allow some ActiveX thing, and when I said 'Yes' nothing happened. Still the default 2px separation.

    ReplyDelete
  13. @León, this is because JS is disabled on local machine by default in IE. You can test it with any script written in the HTML file. I bet you were working with a local file. CSS expressions are JS.

    After allowing that activeX thing refresh the page, then it'll work.

    You will not experience such problems if you work with remote files.

    ReplyDelete
  14. This post provided a very easy solution to a frustrating problem. Thank you for the info.

    ReplyDelete
  15. Fantastic workaround!!

    ReplyDelete
  16. Unfortunately, this work arround leaves you with a css not validated by the W3C CSS Validator.

    ReplyDelete
  17. If it's so important to you, I'll post a workaround how to make your workaroundish css validated by the w3c validator.

    ReplyDelete
  18. I used this, which validates fine. Hope it's useful to someone!

    HTML:
    < link rel='stylesheet' type='text/css' href='/css/basic.css' />
    < !--[if lte IE 7]>< link rel='stylesheet' type='text/css' href='/css/basic_ie_workarounds.css' />< ![endif]-->

    BASIC.CSS:
    table { border-collapse:separate; border-spacing:0; }
    /* ... etc ... */

    BASIC_IE_WORKAROUNDS.CSS:
    table { border-collapse:expression('separate',cellSpacing=0); }

    There's more CSS reset (browser unification) stuff in basic.css, and more IE workarounds (body->* font inheritance workaround, other) in basic_ie_workarounds.css too.

    Now I just need a working, validating, cross-browser block-level anchor element! :-) (Hint: this is impossible.)

    ReplyDelete
  19. In the above comment, there's a space between < and the following character, since this stupid blogging software thinks I want to inject HTML into the comment. So replace "< " with "<" before running the code.

    Also, if anyone is wondering whether 'separate',cellSpacing=0 really returns 'separate' and not 0, this little test reveals that both statements are run and the result of the first one is returned. Paste it in the browsers' URL line.

    Return value test:
    javascript:alert('x',cellSpacing=0);

    Run both test:
    javascript:alert('x',alert('y'));

    ReplyDelete
  20. and what if your CSS is "border-spacing: 2px 5px;"?
    In the IE-fix you can give only one number for cellspacing...

    ReplyDelete
  21. You haven't read the entire post. As for that, and AFAIK, different vertical and horizontal cellspacing is unaccomplishable in IE, either by HTML or CSS or other ways.

    ReplyDelete
  22. think i found a way to fix and diferentiate the vertical and horizontal spacing in IE.. :.

    just give the td a class, position it relative and move it left by -6px; it's kinda weird, but worked for what i needed to do... maybe u can use also td+td .
    A lot of hacks for one css though. I think i will use divs...

    table tr td.second {
    *position:relative;
    left:-6px;
    }

    ReplyDelete
  23. thanks!!
    PS u can also use - it's shorter ;)

    table.css_class {
    border-spacing: 1px;
    *border-collapse: expression('separate', cellSpacing = '1px');
    }

    ReplyDelete
  24. Perfect, a million thanks.

    ReplyDelete
  25. Thanks, appreciate this.

    ReplyDelete
  26. You are a friggin' genius! T H A N K - Y O U !

    ReplyDelete
  27. Not the perfect fix, but well worth mentioning in my blog about dynamic table creation.

    http://www.skewsme.com/observations4.html#tables

    ReplyDelete
  28. One and a half year later, still a very useful exploit. Thanks for sharing!

    ReplyDelete
  29. Anyone tested this on IE8? Anyway, big thanks, saves me the time I don't have to figure this one out.

    ReplyDelete
  30. IE8 fully supports CSS 2.1, so this is not an issue anymore.

    ReplyDelete
  31. I am having an issue with Firefox that I can't seem to find a hack for. Check out the Main vertical menu for www.wholesalewarrantyclub.com in Firefox and then in any other browser. It's working the way that I want it to in all browsers except firefox.
    The html looks like this:
    table border="0" cellspacing="2" cellpadding="0"

    and the images are a sprite. Firefox allows some of the background image to show through the 2px cellspacing...and I don't want that.

    ReplyDelete
  32. This is really good...it worked..but have another problem if anyone knows abt it. As per css if we use border-collapse: collapse; it will ignore empty-cells: show. how to achieve that? I mean for IE I am using the star hack provided here (*border-collapse: collapse;, *position:relative and empty-cells: show;) where as empty-cells is getting ignored because of *border-collapse: collapse;. I need both the properties any workaround?

    ReplyDelete
  33. I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

    ReplyDelete
  34. Nice information, I really appreciate the way you presented.Thanks for sharing..

    http://www.w3cvalidation.net/

    ReplyDelete
  35. Thanks a lot - I was pulling my hair out with the border-spacing in IE6 and IE7 - the expression hack works in both of those browsers - I line of css - NICE FIX THANKS FOR SHARING!

    ~ Jim
    http://tentonweb.com/

    ReplyDelete
  36. This is exactly what I was looking for, thanks!

    ReplyDelete
  37. Excellent post. Just helped me too. Trying to make my ap the same in as many different browsers as possible even older ones like ie6 and have menu that looked fine in all but ie6/7. 3d effect with light border one side dark on other needed border-collapse:sererate but couldn't get the spacing on older ie's down to 0 till now. Have bookmarked your blog and will have a better look through soon to see what other handy snippets are there

    Cheers
    Andrew Blake

    ReplyDelete
  38. Thank you for sharing you provided me with a quick solution to the problem!!! Cheers x

    ReplyDelete
  39. Sweet, the expression worked for IE7

    ReplyDelete
  40. Your blog is really helps for my search and i really like it.. Thanks a lot..:)
    Term Papers Writing Services

    ReplyDelete
  41. Thank you, the expression is fantastic for IE!

    ReplyDelete
  42. Awesome dude, how did you even discover this hack, hats off!!

    ReplyDelete
  43. Thanks for this great hint!

    Only drawback is, IE only understands px-values. em-values are not interpreted at all :-/

    ReplyDelete
  44. Thank you!! great quick solution for a obscure problem!!

    ReplyDelete
  45. Thank you for the auspicious writeup. It in reality was a leisure account it.
    Glance complicated to more added agreeable
    from you! By the way, how can we keep in touch?
    Visit my blog post - free long porn video

    ReplyDelete
  46. At this time I am going away to do my breakfast, after having my breakfast coming over
    again to read additional news.
    My weblog :: nude teens

    ReplyDelete
  47. This is the perfect site for anybody who hopes to find out
    about this topic. You know a whole lot its almost hard to argue with you (not that I really would want to…HaHa).
    You definitely put a brand new spin on a subject which has been written about for a long time.

    Great stuff, just great!
    Also see my web page: free teen porn

    ReplyDelete
  48. I do not even know how I ended up here, but I thought this post was
    great. I do not know who you are but definitely you're going to a famous blogger if you aren't already ;) Cheers!
    Take a look at my homepage ... Sexy blonde shows off her tits

    ReplyDelete
  49. Good day! I could have sworn I've been to this blog before but after looking at some of the articles I realized it's new to me.
    Anyways, I'm certainly happy I discovered it and I'll be book-marking it and checking back regularly!
    Also see my web page > teen porn

    ReplyDelete
  50. thanks. this is very useful and it fixed the same problem on IE 9 for me.

    ReplyDelete
  51. Very nice article, just what I wanted to find.


    Here is my website; d'nest

    ReplyDelete
  52. Hi there! Do you know if they make any plugins to protect against hackers?
    I'm kinda paranoid about losing everything I've worked hard on.
    Any tips?

    Look at my weblog ... michael kors history

    ReplyDelete
  53. I'm not sure where you're getting your information, but great topic.
    I needs to spend some time learning much more or understanding more.

    Thanks for fantastic info I was looking for this information for my mission.


    Feel free to surf to my web blog レイバン激安

    ReplyDelete
  54. My partner and I stumbled over here coming from a different
    page and thought I might as well check things out. I like what I see so now i'm following you. Look forward to finding out about your web page yet again.

    Also visit my page; レイバンサングラス

    ReplyDelete
  55. Hmm is anyone else experiencing problems with the images on this blog loading?
    I'm trying to figure out if its a problem on my end or if it's the blog.
    Any responses would be greatly appreciated.

    Visit my web page; ロレックススーパーコピー

    ReplyDelete
  56. Helpful info. Lucky me I discovered your site unintentionally, and I'm stunned why this accident did not took place earlier! I bookmarked it.

    Feel free to visit my weblog - ロレックスレプリカ

    ReplyDelete
  57. When I originally commented I clicked the "Notify me when new comments are added" checkbox
    and now each time a comment is added I get three emails with
    the same comment. Is there any way you can remove me from that service?
    Thank you!

    Feel free to surf to my site - crazyinshreveport.blogspot.com

    ReplyDelete
  58. Right away I am ready to do my breakfast, when having my breakfast coming over again to read other news.


    my site: ロレックスレプリカ

    ReplyDelete
  59. Hello There. I discovered your weblog the usage of msn.
    This is an extremely well written article.
    I will be sure to bookmark it and come back to read extra of your helpful information.

    Thanks for the post. I'll certainly return.

    Also visit my homepage; facelap.com

    ReplyDelete
  60. continuously i used to read smaller posts which also clear their motive, and that
    is also happening with this piece of writing which I
    am reading here.

    Feel free to visit my page プラダ バッグ

    ReplyDelete
  61. Unquestionably imagine that which you said. Your favorite justification seemed to
    be on the web the easiest thing to be mindful of.

    I say to you, I definitely get irked even as people think about issues that they just do not recognize about.
    You managed to hit the nail upon the highest and
    outlined out the entire thing with no need side effect , people can take a signal.
    Will likely be again to get more. Thanks

    Feel free to surf to my blog post; www.christianlouboutinoutletshop2013.com

    ReplyDelete
  62. Link exchange is nothing else except it is simply placing the other person's blog link on your page at suitable place and other person will also do same in support of you.

    Stop by my weblog :: www.christianlouboutinoutletshopx.com

    ReplyDelete
  63. I am genuinely thankful to the owner of this web page who has shared this enormous piece of writing at at this time.


    my blog; tono-betos.newtonmarketing.biz

    ReplyDelete
  64. I'm extremely inspired along with your writing abilities and also with the layout for your blog. Is that this a paid theme or did you customize it yourself? Anyway stay up the excellent quality writing, it's uncommon to
    peer a nice weblog like this one nowadays..

    Also visit my homepage; bmi calculator for adults

    ReplyDelete
  65. In Canada, the type of wait is normally six months.
    Are the sleeves padded as well the way the rest attached to the
    jacket? Visible calf Air-Sole unit contributes the ultimate on cushioning.
    air max shoes have gone to a long avenue since they were
    made in 1987. http://mentefeliz.info/read_blog/27519/nike-jordan-from-previous-ingenuity-to-world-fame

    ReplyDelete
  66. 。 "9月号"のドキュメン
    タリー映画の
    おかげで、国民
    がすることの重要性を知っている9月の広告雑誌
    。あなたが9月の雑誌を介して読み取
    るときは、大きなブランド
    から非常に多く
    の広告が、数量、実際に陸橋雑誌が含
    まれている内
    容から見てあまりにも多く
    のものを持っていた

    Here is my weblog; グッチ バッグ

    ReplyDelete
  67. 。現在はもっと多くのグッチのスタイルはしかし
    、上記の二つは私の
    独自のトップピックですがあります。お好みのグッチの
    バッグに最適な価格を見つけるために店の周
    りにしてください

    Also visit my web site グッチ 長財布

    ReplyDelete
  68. 。、2011年の早い
    初めに、グッチは
    、私たちにその素晴ら
    しい歴史と、自社製品への
    新しいアイデアを与
    えるための繊細なデザイ
    ンが認められた。そのデザイ
    ンのアイデアのために
    グッチは流行の、世界で最も一般的
    なブランドの一つ
    であったと流行のリーダーになる
    。フォワードグッチの新しいアウ
    トレット、ブーツ、
    今年の初めに袋を見てみま
    しょう。 。私たちは冬に
    流行の靴のメイ
    ンストリームであり、古典的
    な赤と緑の色で装飾されたどち
    らかと黒色昨
    年のグッチの
    デザインを見に行こう

    Also visit my web page :: wiki-grenoble.tmp02.haisoft.net

    ReplyDelete
  69. 。グッチの靴は、
    企業間の強力なポ
    イントになったグッチはエリートイタリア
    のファッションハウスとしてのルーツへの回帰
    であった1970年代と1980年代
    から次の災害を発見した
    。明らかに。彼らはそれが大量
    生産のロゴと高級ブラ
    ンドの両方であること
    は不可能であったことを指摘し
    なければなりません。グッチ
    の靴のような革製品は1920年代と1930年
    代の内部組織に
    その名を与えたプラス彼らはファッ
    ションの革新に努力を集中すべきと感じたこれらの領域
    に加えて、1997年にグッチは
    セヴェリン-Montres引き継ぎ、グ
    ッチの名の下
    にそれを改名しました。時計職人
    が時間の間にヨーロッパで最も尊敬さ
    の一つであったとの間で、その威信と一流のイメージを維持するの
    Guccisゴールにつな
    がったファッション意識と裕福な顧客

    Here is my webpage :: gisoracle.cemagref.fr

    ReplyDelete
  70. あなたはココシャネルの任意の画
    像を見れば、彼女は間違いなく真珠の文字列を着用されます
    が、そのうち
    の数十は、彼女の首
    の周りに輪にし
    、彼女の胸にさりげ
    なく迷う

    my site - シャネル 財布

    ReplyDelete
  71. Heya! I'm at work surfing around your blog from my new iphone! Just wanted to say I love reading through your blog and look forward to all your posts! Keep up the fantastic work!

    my website; www.pradahandbagsoutletssale.com

    ReplyDelete
  72. I am sure this post has touched all the internet people, its really really
    pleasant post on building up new blog.

    my homepage; レイバンメガネ

    ReplyDelete
  73. This skeletal change is immediately vision on an X-ray.
    So Watase's fans can't worry as my wife many stories arrive.
    I this is so common and need to know it. Penney is an incredibly affordable mid-range department shop perfect for accessories shopping.
    http://thewebsitez.com/cgi-bin/forum/Blah.pl/Blah.pl?
    v-memberpanel/a-view/u-16812//

    ReplyDelete
  74. I have been surfing online more than three hours today,
    yet I never found any interesting article like yours.
    It's pretty worth enough for me. Personally, if all web owners and bloggers made good content as you did, the net will be much more useful than ever before.

    my web site; sexvideovoyeur.com

    ReplyDelete
  75. It's great that you are getting ideas from this post as well as from our discussion made at this place.

    Feel free to surf to my site: cheap nike air max

    ReplyDelete
  76. Howdy would you mind sharing which blog platform you're working with? I'm planning to
    start my own blog in the near future but I'm having a tough time choosing between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your layout seems different then most blogs and I'm looking for something completely unique.
    P.S Apologies for being off-topic but I had to ask!

    Feel free to surf to my site ... sexygirlchat.net

    ReplyDelete
  77. Hi there to all, how is all, I think every one is getting more from this web page, and your
    views are good for new visitors.

    Feel free to surf to my web site - cheapairmaxonline.blog.fc2blog.us

    ReplyDelete
  78. I visited various web sites except the audio quality for audio songs present
    at this web site is genuinely excellent.

    Here is my homepage Http://www.wildpartygirls.org

    ReplyDelete
  79. It's very effortless to find out any matter on web as compared to books, as I found this piece of writing at this web page.

    Here is my web-site: ナイキエアジョーダン

    ReplyDelete
  80. Really no matter if someone doesn't be aware of afterward its up to other visitors that they will help, so here it occurs.

    My blog buy bulk twitter followers

    ReplyDelete