Comments on: Firefox and border-collapse

By: peterg

peterg — Wed, 28 Apr 2010 18:03:02 +0000

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;
}

By: shamania

shamania — Tue, 20 Apr 2010 15:32:51 +0000

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;}

By: poorinE

poorinE — Thu, 28 Jan 2010 03:20:32 +0000

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

By: Wise Owl

Wise Owl — Tue, 22 Dec 2009 12:00:05 +0000

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!

By: Kyle Florence

Kyle Florence — Tue, 01 Dec 2009 19:11:17 +0000

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.

By: Paul

Paul — Sun, 08 Nov 2009 20:01:44 +0000

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.

By: Jason Archer

Jason Archer — Tue, 15 Sep 2009 14:43:00 +0000

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*

By: Richard C

Richard C — Fri, 07 Aug 2009 16:42:07 +0000

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 …

By: mike

mike — Fri, 07 Aug 2009 10:01:28 +0000

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.

By: Adi

Adi — Mon, 03 Aug 2009 07:42:42 +0000

Thanks Mag Leahy! Your solution solved the problem.