Featured Posts

Supreme Court Rules Against FCC, Net Neutrality Not a good day for net neutrality... A federal court threw the future of Internet regulations into doubt Tuesday with a far-reaching decision that went against the Federal...

Read More »

The Fog Machine has Arrived My Chauvet Hurricane 1300 arrived today. First thing's first--immediately unpack it, add some fog juice, and play! [caption id="attachment_81" align="aligncenter" width="225"...

Read More »

Realestate Manager 2.0 Picture Preview Since Real Estate Manager 2.0 is now almost ready for release, I figured I would share the differences between the current version (1.1) and 2.0. To start things off, the...

Read More »

Automotive Manager Photo Update It's been less than 2 months since I started on Automotive Manager. In that time, I've taken the thing from next to nothing to an almost complete product. I'm not sure how...

Read More »

The New GreeneCountyIndiana.com Since about March I have been working (rather slowly) on a new content management system for GreeneCountyIndiana.com. Along with it comes a new layout and many new features. The...

Read More »

Chuck’s Blog Rss A scary bee!!!

Firefox and border-collapse

Posted on : 30-03-2008 | By : Chuck | In : HTML/CSS, Programming

17

2/8/12 Note: This was posted in 2008, when Firefox was around version 3. I no longer use this template, so this problem may be fixed with newer versions of the browsers.

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 border-collapse bugFirefox 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?

IE does not understand border-spacingInternet 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]-->