Styling inconsistency on Chrome and Firefox

Question

I have a table, that for one of its cells I am using the rule

border-right: 3px solid #000 !important;

It works fine on Chrome but in Firefox the border is invisible. I say invisible because if I deactivate the rule I can see the cells' contents move slightly.

-moz-box-sizing: border-box;

Did not help in any way as far as I can see.

So if you were to run this small example in Chrome, it would look fine. In Firefox you can spot some errors though (be sure to view at a wider width to see the error)

I have tried various other suggested option with no good results. The one closer to solving the issue was removing border-collapse altogether, but that makes all borders visible as can be seen from the image below:

Is this common for Firefox, and how can I overcome the issue.

Could you please provide your HTML, or better, a working code Snippet? — James Donnelly, Jan 14 '16 at 09:22
@JamesDonnelly a small example was added. Please dont pay any attention to the markup, its a mess I know. Also make sure that you have maximized the width of the result box in order to see thew correct table. — dearn44, Jan 14 '16 at 10:05
you still need to provide a snippet of the exact problem in order to help you, because this is too much with the few information you provided us. — dippas, Jan 19 '16 at 11:12
@dippas If you have a look at the question you will see that I indeed provide a fiddle that demonstrate the issue. It runs differently on Chrome and Firefox. — dearn44, Jan 20 '16 at 08:10
@kiran hi, I am trying to understand what did you do exactly, because your fiddle works indeed correctly, but copying the css from it to my page makes no difference. — dearn44, Jan 25 '16 at 08:46
@dearn44 I have changed some html tags too. Main problems you had were: 1) using multiple tbody elements. tbody is for grouping purpose and should be one or none in general. 2)some of your tbody were seen without any content or lets say without any rows. 3)you have messed up css using unnecessary styling. you were using css3 table, but I couldn't find any `display:table`. **NOTE: IF YOU PROPERLY WRITE HTML AND CSS, MOST OF THE BROWSERS WILL RENDER CORRECTLY.** — Kiran Shakya, Jan 25 '16 at 08:56
That is because I hastily tried to create the fiddle removing what I thought unnecessary. Also as you probably understood the table is created from a template and I am not sure if everything will work ok if I change it, nonetheless this answers the question. Could you add it below together with a brief explanation of the main problems so whoever sees this in the future may find it useful? — dearn44, Jan 25 '16 at 09:10
@dearn44: None of the 3 points kiran made are problems 1) Using multiple tbody elements is acceptable and in fact the whole *point* of the tbody element (grouping purposes... as he said himself) 2) There is nothing wrong with having an empty tbody, so you can ignore that 3) All the necessary CSS display properties already apply to HTML tabular data elements, so you don't have to worry about that either. Your HTML is perfectly valid - in fact, the only problems you have are minor typos in lines 250 (``) and 252 (``). — BoltClock, Jan 26 '16 at 08:11
@BoltClock I never agreed with kiran that using tbody is wrong. Mainly beacuse even with my limited knowledge I have seen it being used in other projects that I studied. Plus I still think that this is a firefox bug. No matter my html the template should never display the background color instead of my borders. Yet the fact that it does not work on firefox remains, and is indeed a problem since many people use firefox. — dearn44, Jan 26 '16 at 08:24
@dearn44: It would be better if you clean up your code. Take out all the fluff, angular comments etc. Also, you have inline styles splattered across with `!important`s. Move those to your external css. Reduce your code to a minimum and simple example which reproduces the problem. Create an MCVE. Also, try putting up a rule for `background-origin: border-box; background-clip: padding-box;` on your table elements and see. Then start reducing your code from there until the problem is gone, and then see. — Abhitalks, Jan 26 '16 at 10:37
Will try, yet I see that this is more complex than I thought, and its Mozilla who should have fixed it. In any case what should I do now that the deadline for the bounty is expiring but no answer is fully satisfying? — dearn44, Jan 26 '16 at 10:52
@BoltClock Ok I admit you can have multiple tbody on a table, and there were some typos on line 250 and 252, it doesn't solve the problem in firefox. Have you tried that on firefox? And there goes the css thing which were unnecessary and creating problems, and you say they were no problem at all! Blaming firefox won't change the fact. — Kiran Shakya, Jan 26 '16 at 11:11
@dearn44 I had my answer and explanation till Jan 19 but due to some negative votings I had to delete my answer. Anyway, if your problem is solved, then thats a good thing to know. — Kiran Shakya, Jan 26 '16 at 11:25
@kiran the fiddle you provided works on firefox, it is not something I can replicate though. If you created an answer with clear and concise steps for someone to follow then Id be happy to review it. Plus I might be wrong but your answer then and your fiddle now, have nothing to do with each other. I cant tell about the negative voting but in any case it is not simply a matter of me silently solving my issue. A proper answer should be presented that will guarantee every future viewer a solution and the poster must be properly accredited. — dearn44, Jan 26 '16 at 11:32

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

One thing to try would be to add another block element inside of the table cell and apply your border style to that element. For example, you might try to do something like this:

<table>
  <tr>
    <td>
        <div style="border-right: 3px solid #000;">My Content</div>
    </td>
  </tr>
</table>

Table cells like <td> and <th> are sized differently than regular block, inline block, or inline elements and so the borders might also get computed slightly differently depending on available space.

By using a <div> inside of your table cell, you can set it's width to 100% and it's height to 100% so that it covers the entire available table cell, then you can apply any border you like to the div and with box-sizing:border-box set on the div element, it should look the way you want. For example:

<div style="border-right: 3px solid #000; width: 100%; height: 100%; box-sizing: border-box;">My Content</div>

Here is more info on table sizing / box model quirks

edited May 23 '17 at 12:04

Community

1
1

answered Jan 26 '16 at 07:02

Ben Cole

1,847
1
15
18

Hi Ben, this indeed makes firefox display borders. But after manually trying it for the first two rows I noticed that even by removing padding for `` the `div`'s border actually is a bit to the left and it does not connect till the end, leaving empty spaces in each junction. – dearn44 Jan 26 '16 at 10:50
You'll need to make sure to set the table cells spacing and padding to zero. The empty space is a result of using the Table element for layout. More on how to reset the spacing here: http://stackoverflow.com/questions/339146/why-are-cellspacing-and-cellpadding-not-css-styles – Ben Cole Jan 26 '16 at 17:30
Thanks for the suggestion I will try it as soon as I find some time. – dearn44 Jan 27 '16 at 08:25
Ok it seems that this is indeed a way of doing it also. I can confirm that if someone wants to go with this solution it will work. – dearn44 Jan 28 '16 at 14:41

score -1 · Answer 2 · answered Jan 22 '16 at 13:54

-1

It's a known 'bug' in Firefox. It's being caused by setting the border-collapse to collapse. One solution is to set the border-collapse to separate.

answered Jan 22 '16 at 13:54

Stefan Neuenschwander

823
1
6
23

Hi Stefan, researching on the issue I indeed found that it is caused because firefox paint the background color on the borders if the `collapse` setting is used, so I tried all other possible options. I think they all produce the same result, where they show all borders next to each other, so you can see for example a cell having blue/black/orange borders on one side. I updated the question with an image showing the exact issue. – dearn44 Jan 23 '16 at 08:39
1

it is not any bug. wrong html and css can create such problems. try this https://jsfiddle.net/sfodcjkz/18/ – Kiran Shakya Jan 24 '16 at 09:12
Well I tried the fiddle with the seperate value and it worked for me. Please try it yourself before downvoting me. – Stefan Neuenschwander Jan 28 '16 at 12:30
@StefanNeuenschwander can you update the fiddle and post the link, so that we could verify you were correct? – Kiran Shakya Jan 29 '16 at 05:24

score -1 · Accepted Answer · answered Jan 26 '16 at 12:11

I have updated your original jsfiddle https://jsfiddle.net/sfodcjkz/4/ with some of the minor tweaks https://jsfiddle.net/sfodcjkz/18/.

The changes I carried over your fiddle are:

Removed empty <tbody> elements. Best practice is to group the body rows inside a <tbody>. Some modern browsers may auto correct the errors, but not all browsers are smart enough. So for consistency, we can avoid being dependent on smarter browsers.
Next I had problems with these css:

Line:349

.responsive-table thead {
    clip: auto;
    height: auto;
    overflow: auto;
    position: relative;
    width: auto;
}

Line:258

.responsive-table thead {
    border: 0 none;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Simply removed those css styles and you can see a cleaner look.

I am not sure why this answer has a downvote. I can confirm that this method works correctly, and that indeed empty `` elements can get Firefox confused. Until the downvoter gives a valid reason I would disregard the downvote. — dearn44, Jan 28 '16 at 14:45

Styling inconsistency on Chrome and Firefox

3 Answers3