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]-->

Comments (17)

Spot on – thanks Chuck. Had the same issue and this was the best post I came across to solve it.

Chuck the only improvement I would suggest to get things looking good in Opera and Safari is drop the border-collapse:seperate completely and replace the css overall with:

table {
width:XXXpx; /*Replace XXX with number*/
border-color: #cfced6;
border-width: 0 0 1px 1px;
border-style: solid;
}
table td, table th {
border-color: #cfced6;
border-width: 1px 1px 0 0;
border-style: solid;
}

And then for IE browsers you would need to add:
table {
border-collapse:collapse;
}

Hope this is helpful and not a caffine fueled rant of madness! =)

Chuck:

Your solution doesn’t solve the problem. If you use border-collapse: separate, and you actually use the borders, the smallest border you can get is 2px, which is not acceptable.

I cannot believe this bug is still around in Firefox 3.

Cameron

I keep hearing how much better Firefox is supposed to be over IE, yet all the bugs I’ve come across while redesigning my site have been for Firefox.

The same thing happened when I tried to use a vertically centered, repeating background image (faux columns) in my container div.

Setting the container to overflow: visible or setting the margin to 1px (or how ever wide your border is) will work around this problem without conditionals

Thanks Mag Leahy! Your solution solved the problem.

Unfortunately I have my table in a scrolled container and can’t work around it yet.
I might resort to javascript hack if can’t work it out tonight.

A much simpler fix would be to set the table’s html border setting to 0 …

..Table width=”100%” border=0 …

If you set the table html border to something other than 0, and have style setting of “border-collapse: collapse”, then the “bug” appears …

Specifically I believe Firefox actually shifts the entire table 1 pixel to the left – if you have a right container border that should be matched up with your table border this is also 1px left making a 2px border on the right hand side.

Still… at least Firefox has Firebug which makes tracking and sorting this kind of error a couple of zillion times easier than certain other browsers *cough*

Excellent Post!

Chuck, using border-spacing instead of border-collapse solved the 1px issue in Firefox, but at the expense of adding 2px borders for table cells (as mentioned by Cameron McKay).

Mag Leahy, your solution to use css styles to apply borders on the bottom-left and top-right solved the 2px borders for table cells. Also,why did you include the IE conditional comment when your solution works without having to resort to border-collapse in Internet Explorer? I think you can get rid of the IE conditional comments and it will still work in IE

Cameron McKay, I understand what you mean when you consider this a bug in Firefox 3, but Firefox is complying with standards for this particular issue. Its just that standards complaint code is not giving us the correct result. Strange…

Peter V Cook, I’ve tried setting the margin-left to 1px and reduced my table width by 1px to give me the correct look in Firefox, but at the expense of the table looking incorrectly in IE, Opera, and Safari. I initially thought about using Javascript to target Firefox and only apply the margin-left style for that browser since there isn’t a conditional comment for Firefox. However, that was the wrong way to go about this problem. Chuck and Mag Leahy’s solution is much better.

My solution:

table {
width: 100%;
border-spacing: 0;
border-left: 1px solid #666;
border-bottom: 1px solid #666;
}

*:first-child+html table { border-collapse: collapse; } /* IE 7 */
* html table { border-collapse: collapse; } /* IE 6 */

table tr, table th, table td {
padding: 5px;
border-top: 1px solid #666;
border-right: 1px solid #666;
}

IE8 seems to support border-collapse as long as a DOCTYPE is set.

This is the only site I could find with anything approaching a solution to this problem, so thanks.

Using a gridview in ASP.NET with CssClass set and styles, I can ALMOST solve the problem!

Table style includes:

border-color: #000;
border-width: 0 0 1px 2px;
border-style: solid;

Cell style includes:

border-color: #000;
border-width: 1px 1px 0 0;
border-style: solid;

The gridview now looks perfect in Firefox, but Chrome and IE give an annoying slightly thicker left border. Have tried all sorts of other things which don’t work.

My understanding of conditional comments is that they only work for IE, whereas I want something which says “if this is Firefox, do something different”.

Just thought I’d add an other experience!

i’m poor in English.I had a same problem ,but i want to let has borde too. if add td-border,it can’t solve the problem with your methods.The td-order will have 2px height if you set 1px border.Maybe it can solve the problem like someone suggest set table left-bottom border and td right-top border. other methods?

i’m sorry.very poor in english

For me best way to solve this problem:
– use table tag property cellspacing=”0″
– for each table cell define border-width: 0 1px 1px 0;
– with css class define all cells in first column and you can do something like this:
table td.cell-in-first-column{border-left-width: 1px;}
– with css class define all cells in first row and you can do something like this:
table td.cell-in-first-row {border-top-width: 1px;}

Hi there, I’m having a problem with a image gallery template that I got from dynamic drive, my website template is floating, with 3 columns, the center column is where my thumbnails are, and when mouse hovers on image, larger version comes up in designated area beside thumbnails, my problem is that when the screen size changes using control +/-, the position of the larger image changes and blocks thumbnails , because it is set to the left hand side of the screen. I can easily fix it but I’m thinking about other people who might not know to simply change screen size. I just don’t know how to change the CSS so that the enlarged image is floating in the center column, and not fixed to the left side. How do I tie the two together, I’m not very savvy with this stuff yet, but hopefully someone can help me
This is the CSS,

.gallerycontainer{
position: auto;
/*Add a height attribute and set to largest image’s height to prevent overlaying*/
}

.thumbnail img{
border: 2px solid grey;
margin: 10px 5px 5px 5px;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px;color:#6a6f71;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:#8b8e91;
padding: 5px;
left: px;
border: px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
text:#ffffff;

}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 2px;
padding: 5px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 195px;
left: 675px; /*position where enlarged image should offset horizontally */

z-index: 50;
}

Solution for me was to specify border-collapse on the table element and not on its containing div.

#toolbarmain
{
background-color:#eaeaeb;
width:844px;
height:25px;
}
#toolbarmain TABLE
{
border-collapse:collapse;
}

This worked in IE and FF, whereas specifying border-collapse on the div makes IE and FF different.

I just ran into this bug. Running the latest release build of Firefox (17.0.1) as of December 21, 2012. I can’t confirm the fix in your blog post, but the rendering artifacts showed up no matter how many times I reloaded the page.

I figured out how to get the artifacts to not show up under normal viewing – I had border-collapse applied to both the ‘table’ and the ‘td’ elements on the page. Just applying it to the ‘table’ element fixed the normal view. However, print preview still has the issue. I’m hoping it won’t affect the actual print job.

Write a comment