While working on the new website for Kegan’s Kandy Web Services (the website development business me and my friend Kegan run), I ran across an interesting bug.

Firefox seems to have some issues with the border-collapse CSS property where it will render the left border 1 pixel to the left of the table as seen in the image to your right. This can be solved by using border-spacing: 0; in place of border-collapse: collapse;

All is well right? It now works fine in Firefox and Safari, but guess which browser is all messed up now?

Internet Explorer, as usual, renders it completely different. It doesn’t understand the border-spacing property, so it inserts spacing between the border and content area.

So, now Firefox is fine, Safari is fine, but Internet Explorer is broken. If you change border-collapse to “collapse” Firefox will be off by 1 pixel.

What’s the solution?

Use conditional comments to give IE border-collapse: collapse; while everything else gets border-collapse: separate;

In your main stylesheet file, give the table element the following properties:
border-spacing: 0;
border-collapse: separate;

Then, use conditional comments to give Internet Explorer border-collapse: collapse

<!--[if IE]>
<style type="text/css">
table#wrapper { border-collapse: collapse; }
</style>
<![endif]-->

Here is the resulting code I used to fix the problem for the new Kegan’s Kandy website

style.css
table#wrapper {
width: 800px;
margin: 0 auto;
border-left: 1px solid #ab9666;
border-right: 1px solid #ab9666;
border-top: 0;
border-bottom: 0;
border-spacing: 0px;
border-collapse: separate;
}

template.php
<!--[if IE]>
<style type="text/css">
table#wrapper { border-collapse: collapse; }
</style>
<![endif]-->