Firefox puts tablecells together in one cell
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...
Modificadas por PCase el
Todas las respuestas (3)
I've called the big guys to help you. Good luck.
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...
HI PCase, This is a web compatibility issue and might be easily answered in stackoverflow.com.