This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Firefox puts tablecells together in one cell

  • 3 cavab
  • 2 have this problem
  • 8 views
  • Last reply by guigs

more options

Hi @LL,

I am a webdesigner and my work is to realize a webbased processcontrolling system in my company. I started programming my sites for Chrome, based on the android tablets i will use in future. Today we are working with 2 Android tablets but about 40 more are following. For processplaning we have another tool which based on firefox, programmed a few year earlier. Now we get some handlingproblems with handling 2 browsers in our company, so i decided to change my site for firefox.

My problem is now, that firefox is the only browser which means to put all my tablecells in one cell. That sounds crazy. Other browsers dont do that. They showing all correctly. I have to say, that firefox just drops tablecells together which i am using for show a progressview. In this cells iam showing a value in percent with a percent based backgroundcolor. This cell get the color over a special id. The rest happens in CSS.

My table is correct, i am starting and ending the table, all rows and all cells with the right tags.

any ideas? i realy have to figure that out !!!

Here is the CSS for my table and below the css for my cellbased color: (just one color, the rest ids for the color formating are the same)

.CSSTableGenerator { margin-left:10px; margin-top:-10px; padding:0px; width:99%; height:93.0%; overflow-y:scroll; } .CSSTableGenerator thead{ width:970px;

       line-height:30px;

} .CSSTableGenerator table{

       border-collapse: collapse;
       border-spacing: 0;

width:100%; height:auto; margin:0px;padding:0px; /*line-height: 30px;*/ } .CSSTableGenerator tr:nth-child(odd){ background-color:#cccccc; } .CSSTableGenerator tr:nth-child(even) { background-color:#e2e2e2; } .CSSTableGenerator td{vertical-align:middle; border:1px solid #ffffff; border-width:1px 1px 1px 1px; text-align:center; padding:5px;

   empty-cells: show;

font-size:12px; font-family:Arial; font-weight:bold; color:#000000; line-height:30px; }.CSSTableGenerator tr:last-child td{ border-width:1px 1px 1px 1px; }.CSSTableGenerator tr td:last-child{ border-width:1px 1px 1px 1px; }.CSSTableGenerator tr:last-child td:last-child{ border-width:1px 1px 1px 1px; } .CSSTableGenerator tr:first-child th{ background-color:#3366ff; border:1px solid #ffffff; text-align:center; border-width:1px 1px 1px 1px; font-size:16px; font-family:Arial; font-weight:bold; color:#ffffff; } .CSSTableGenerator tr:first-child th:first-child{ border-width:1px 1px 1px 1px; } .CSSTableGenerator tr:first-child th:last-child{

border-width:1px 1px 1px 1px; } .CSSTableGenerator2 { margin-left:10px; margin-top:+5px; padding:0px; width:97.5%;

   height:auto;

max-height:77.5%;

overflow-x:hidden;

   overflow-y:auto;
   line-height: 30px;

}


cellbased color CSS:

  1. progress-level4 {
  background-color: #EEE713;
  background-size: 100% 100%;
  border-radius: 20px 0px 0px 20px; /* change me */
  box-shadow: 0 2px 9px rgba(255, 255, 255, 0.3) inset, 0 -2px 6px rgba(0, 0, 0, 0.4) inset;
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;

}

sorry for that bad transformation of CSS, but that happens just in this view, if i am trying to edit this question all looks nice...

Hi @LL, I am a webdesigner and my work is to realize a webbased processcontrolling system in my company. I started programming my sites for Chrome, based on the android tablets i will use in future. Today we are working with 2 Android tablets but about 40 more are following. For processplaning we have another tool which based on firefox, programmed a few year earlier. Now we get some handlingproblems with handling 2 browsers in our company, so i decided to change my site for firefox. My problem is now, that firefox is the only browser which means to put all my tablecells in one cell. That sounds crazy. Other browsers dont do that. They showing all correctly. I have to say, that firefox just drops tablecells together which i am using for show a progressview. In this cells iam showing a value in percent with a percent based backgroundcolor. This cell get the color over a special id. The rest happens in CSS. My table is correct, i am starting and ending the table, all rows and all cells with the right tags. any ideas? i realy have to figure that out !!! Here is the CSS for my table and below the css for my cellbased color: (just one color, the rest ids for the color formating are the same) .CSSTableGenerator { margin-left:10px; margin-top:-10px; padding:0px; width:99%; height:93.0%; overflow-y:scroll; } .CSSTableGenerator thead{ width:970px; line-height:30px; } .CSSTableGenerator table{ border-collapse: collapse; border-spacing: 0; width:100%; height:auto; margin:0px;padding:0px; /*line-height: 30px;*/ } .CSSTableGenerator tr:nth-child(odd){ background-color:#cccccc; } .CSSTableGenerator tr:nth-child(even) { background-color:#e2e2e2; } .CSSTableGenerator td{vertical-align:middle; border:1px solid #ffffff; border-width:1px 1px 1px 1px; text-align:center; padding:5px; empty-cells: show; font-size:12px; font-family:Arial; font-weight:bold; color:#000000; line-height:30px; }.CSSTableGenerator tr:last-child td{ border-width:1px 1px 1px 1px; }.CSSTableGenerator tr td:last-child{ border-width:1px 1px 1px 1px; }.CSSTableGenerator tr:last-child td:last-child{ border-width:1px 1px 1px 1px; } .CSSTableGenerator tr:first-child th{ background-color:#3366ff; border:1px solid #ffffff; text-align:center; border-width:1px 1px 1px 1px; font-size:16px; font-family:Arial; font-weight:bold; color:#ffffff; } .CSSTableGenerator tr:first-child th:first-child{ border-width:1px 1px 1px 1px; } .CSSTableGenerator tr:first-child th:last-child{ border-width:1px 1px 1px 1px; } .CSSTableGenerator2 { margin-left:10px; margin-top:+5px; padding:0px; width:97.5%; height:auto; max-height:77.5%; overflow-x:hidden; overflow-y:auto; line-height: 30px; } cellbased color CSS: #progress-level4 { background-color: #EEE713; background-size: 100% 100%; border-radius: 20px 0px 0px 20px; /* change me */ box-shadow: 0 2px 9px rgba(255, 255, 255, 0.3) inset, 0 -2px 6px rgba(0, 0, 0, 0.4) inset; display: block; height: 100%; overflow: hidden; position: relative; } sorry for that bad transformation of CSS, but that happens just in this view, if i am trying to edit this question all looks nice...

Modified by PCase

All Replies (3)

more options

I've called the big guys to help you. Good luck.

more options

FredMcD said

I've called the big guys to help you. Good luck.

The big guys sounds good... thx for your call !!

i am waiting now...

more options

HI PCase, This is a web compatibility issue and might be easily answered in stackoverflow.com.