CSS не отображается правильно в Chrome и Firefox - PullRequest
Новая
       8

CSS не отображается правильно в Chrome и Firefox

0 голосов
/ 31 мая 2018

У меня проблемы с определенными стилями, которые некорректно отображаются в браузерах для созданных мной таблиц.В частности, класс, который я создал, не отображает цвет фона .rowB, а также правую границу, которую я создал для класса cellBrdrRght.

@charset "UTF-8";
/* CSS Document */
/* info charts */
td{ 
vertical-align: middle;
}
.chartHeader{
background-color: #115967!important;
color: #fff;
text-align: center;
font-weight: bold;
}
.rowA{
background-color: #d0d0d0!important;
color: #4b4b4b;
    
.rowB{
background-color: #666666!important;
color: #fff;
}
.cellBrdrRght {
border-style: solid!important;
border-width: 0px 1px 0px 0px!important;
border-color: white!important;
}
.cellnoBrd {
border-style: none;
}
.tableFooter{
font-size: 10px;
border-style: none;
background-color: #115967!important;
color: #fff;
text-align: left;
colspan: 3;
a:sideBar {
background-color: #115967!important;
padding: 25px 50px 75px 100px;
color: #fff;
}
<link href="http://benefitsatbenefitelect.com/new/wp-content/styles/other-styles.css" rel="stylesheet" type="text/css">
<div style="overflow-x: auto;">
<table>
<tbody>
<tr class="chartHeader">
<td class="cellBrdrRght">Plan Benefits</td>
<td class="cellnoBrd" colspan="2">Current Benefits</td>
</tr>
<tr class="rowA">
<td class="cellBrdrRght">Description</td>
<td class="cellBrdrRght">PPO</td>
<td class="cellnoBrd">HDHP</td>
</tr>
<tr class="rowB">
<td class="cellBrdrRght" style="text-align:left;"><b>Deductible</b> In/Out-of-Network &amp; 2x Family</td>
<td class="cellBrdrRght">$1,250/$2,250**</td>
<td class="cellnoBrd">$3,000/$6,000**</td>
</tr>
<tr class="rowA">
<td class="cellBrdrRght" style="text-align:left;"><b>Coinsurance</b> In/Out-of-Network</td>
<td class="cellBrdrRght">Alaska Plan 20%/20%<br> Non-Alaska Plan 20%/40%</td>
<td class="cellnoBrd">Alaska Plan 20%/20%<br> Non-Alaska Plan 20%/40%</td>
</tr>
<tr class="rowB">
<td class="cellBrdrRght" style="text-align:left;"><b>Out-of-Pocket Maximum</b> In/Out-of-Network &amp; 2x Family</td>
<td class="cellBrdrRght">$5,000/$10,000</td>
<td class="cellnoBrd">$5,000/$10,000</td>
</tr>
<tr class="rowA">
<td class="cellBrdrRght" style="text-align:left;"><b>Primary/Specialist Office</b></td>
<td class="cellBrdrRght">$30 PCP/$40 Specialist</td>
<td class="cellnoBrd">Alaska Plan*: PCP 20%/20% Specialist 20%/20%<br> Non-Alaska Plan*: PCP 20%/40% Specialist 20%/40%</td>
</tr>
<tr class="rowB">
<td class="cellBrdrRght" style="text-align:left;"><b>Retail Prescriptions</b>Generic/Preferred/Non-Preferred</td>
<td class="cellBrdrRght">$20/$45/$60</td>
<td class="cellnoBrd">20%*</td>
</tr>
<tr class="tableFooter">
<td colspan="3">*After Deductible is met **Individuals in Family Tier need only meet individual deductible vs. family deductible</td>
</tr>
</tbody>
</table>
<hr/>
</div>

Веб-страница: http://benefitsatbenefitelect.com/new/index.php/portfolio-item/dark-places/

Файл CSS: http://benefitsatbenefitelect.com/new/wp-content/styles/other-styles.css

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

Вы пропустили закрывающие теги в .rowA: 

.rowA{
  background-color: #d0d0d0!important;
  color: #4b4b4b;
}

и в .tableFooter: 

.tableFooter{
  font-size: 10px;
  border-style: none;
  background-color: #115967!important;
  color: #fff;
  text-align: left;
  colspan: 3;
  }

Попробуйте, и все должно работать правильно

0 голосов
/ 31 мая 2018 
@charset "UTF-8";
/* CSS Document */
/* info charts */

td{ 
    vertical-align: middle;
}
.chartHeader{
    background-color: #115967 !important;
    color: #fff;
    text-align: center;
    font-weight: bold;
}
.rowA{
    background-color: #d0d0d0 !important;
    color: #4b4b4b;
}
.rowB{
    background-color: #666666 !important;
    color: #fff;
}
.cellBrdrRght {
    border-style: solid !important;
    border-width: 0px 1px 0px 0px !important;
    border-color: white !important;
}
.cellnoBrd {
    border-style: none;
}
.tableFooter{
    font-size: 10px;
    border-style: none;
    background-color: #115967 !important;
    color: #fff;
    text-align: left;
    colspan: 3;
}
a:sideBar {
    background-color: #115967 !important;
    padding: 25px 50px 75px 100px;
    color: #fff;
}

Измените это, ваш .rowA & .tableFooter не закрывается должным образом в {} ...

...