Render CSS horizontal gradient

Question

I can't get a fiddle to work locally: http://jsfiddle.net/efortis/t6QsP/ And I suspect shadowing of the CSS or similar since I've looked really careful and it should work, it used to work but due to many updates I've lost the feature with the nice gradient for the window list color. My window now looks like this without the gradient:

Which is not what I'm expecting since i defined the CSS class in the HTML:

<div class="popup" id="popupD" 
            style="display: none;" >

<table width="100%" border="1" cellspacing="0" cellpadding="2" align="center" class="horizontal-gradient">
  <tr>
  <td colspan="3"><h2><div class="horizontal-gradient">Pandora sök</div></h2> 
</td>
  <td><a href="javascript:void(0)" onclick="document.getElementById('popupD').style.display = 'none';">X</a></td>
</tr>
</table> 
        <table id="mainTable" border="0" class="tabell" cellspacing="5" cellpadding="2">
          <tr>
            <!-- Placeholder for the form table -->
            <td valign="top">
              <table id="formTable" border="0" class="tabell" cellspacing="2" cellpadding="2">
                <tr>
                  <td>
                    <b>Sök efter handläggare</b>
                  </td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>Sök efter person, funktion, organisation, roll eller signatur med följande namn:</td>
                </tr>
                <tr>
                  <td>
                    <input type="text" class="textandlist" name="searchValue" size="40" />
                  </td>
                </tr>
                <tr>
                  <td align="right">
                    <input type="button" class="knapp" name="searchButton" id="searchButton" value="&nbsp;&nbsp;Sök&nbsp;&nbsp;" onclick="doSubmit('HandlaggareSearch','search')" />
                    <input type="button" class="knapp" name="cancelButton" id="cancelButton" value="Avbryt" onclick="cancelHandlaggareDialog()" />
                    <input type="button" class="knapp" name="showButton" id="showButton" value="Visa alla" onclick="doSubmit('HandlaggareSearch','showAll')" />
                  </td>
                </tr>
              </table>                      
            </td>
            <!-- Placeholder for the result table -->
            <td valign="top"><a href="javascript:void(0)" onclick="document.getElementById('popupD').style.display = 'none';">Stäng</a>

              <img src="/PandoraArendeWeb/images/spacer.gif" />
              <table id="headerTable" class="tabell" cellspacing="2" cellpadding="2" width="700">

                <tr>
                  <td colspan="5">
                    <b>Sökningen gav inga träffar.</b>
                  </td>
                </tr>

                <tr>
                  <td colspan="5">
                    <b>Resultat</b>
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <span>Antal träffar: </span>
                  </td>

                  <td colspan="3" align="right">

                  <a href="javascript:SearchHandlaggareShow('previous')">
                    &lt;&lt;

                    -

                  </a>

                  [

                  -

                  ]

                  <a href="javascript:SearchHandlaggareShow('next')">

                    -

                    &gt;&gt;
                  </a>

                </td>

              </tr>

            </table>

            <div style="height: 220px; overflow: auto;" >   
              <table id="resultTable" class="tabell" cellspacing="2" cellpadding="2" width="700">
                <tr>
                  <th><a href="javascript:SearchHandlaggareSort('1')">Signatur</a></th>
                  <th><a href="javascript:SearchHandlaggareSort('2')">Namn</a></th>
                  <th><a href="javascript:SearchHandlaggareSort('3')">Enhet</a></th>
                  <th><a href="javascript:SearchHandlaggareSort('4')">Grupp</a></th>
                  <th><a href="javascript:SearchHandlaggareSort('5')">Roll</a></th>
                </tr>

                <tr class="bakgrund1" onmouseover="this.className='highlight'" onmouseout="this.className='bakgrund1'">

                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>

              </table>
            </div>

          </td>
        </tr>
      </table>
      </div>

I asked about this before and we concluded that the problem was something with my other code: https://stackoverflow.com/questions/11344739/css-horizontal-gradient-not-working So I'm suspecting that I'm shadowing the CSS class from somewhere and that is the only explanation I have. Do you have any idea how to resolve this?

Here is the entire CSS file, that I did not find shadowing in:

*  {font-family:arial;}

.avnamn{ 
                color: #90002b; 
                font-size: 140%; 
                display: inline; 
                vertical-align: 3%; 
                margin-left: 1%;
                }

.b{border:1px solid #000;}

.readonly{background-color: #CCC;}

.Webdings{
    font-family: Webdings;
    }

ul{margin-top: 0px}

.mt3{margin-top:-3px;}
.mt5p{margin-top:5px;}

.fontS80 {font-size: 80%;} 
a:link{color:#000; text-decoration:none; }
a:visited{color:#000; text-decoration:none; }
a:hover{color:#000; text-decoration:none; }
a:active{color:#000; text-decoration:none; }

.fontS75 {font-size: 75%;} 

.link{color: #003366;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;}

.link_sm{color: #003366;
    text-decoration: underline;
    cursor: pointer;}

.link_sm{font-size: 70%;cursor: pointer;}

.small{font-size: 75%;}

.smallg{font-size: 75%;
color: #555;}

.ssmall{
    font-size: 65%;
    font-weight: bold;
    color: #555;
}
.small60{font-size: 60%;}
.small50{
    font-size: 50%;
    color: #333;
}
.smallb{font-size: 85%;}
table{display:inline;}

h1{font-size: 130%;display:inline;}
h2{font-size: 100%;display:inline;}
h3{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}
h4{font-size: 70%;display:inline;}
h5{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}

.hthin{
    font-size: 125%;
}

.th {text-align: left;}

td, th{font-size: 75%;
    vertical-align: text-top;}
.td_link{cursor: pointer;}
.td40{height:40px;}
.td60{height:60px;}



.thkant{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 70%;
        text-align: left;
}

.labb{F0F0E3; c1c1b3 }

.bb{border-bottom: 1px solid #000;}
.bbV{border-bottom: 1px solid #FFF;}
.TB_nbA {background-color:#CCC;}
.TB_bt, .TB_nb, .TB_db, .TB_bb {background-color:#efefdc;}

.hk {background-color:#d9ddb3;}

.hknot {background-color:#f9faf2;}
/*<!--F8F8F1-->*/
.TB_bt{border-top: 1px solid #FFF;}
.TB_bt5{border-top: 5px solid #FFF;}
.TB_bb{border-bottom: 1px solid #999;}
.TB_bb2{border-bottom: 2px solid #c1c1b3;}
.TB_db{border-bottom: 1px solid #000; border-top: 1px solid #000;}
.TB_tb{border-top: 2px solid #efefdc;}

.TB_bo{border: 2px solid #efefdc;}
.TB_bo_hk{border-top: 1px solid #efefdc;}


.TB_bo2{border: 1px solid #efefdc;}

.TB_bo2B{
border-top: 2px solid #c1c1b3;
border-left: 3px solid #efefdc;
border-right: 3px solid #efefdc;
border-bottom: 2px solid #c1c1b3;
}

.TD_bo{
    border-right: 1px solid #c1c1b3;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.TD_bo2{

    border-right: 0;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.ytb{
    border-left:3px solid #efefdc;
    border-right:3px solid #efefdc;
}

.datum {
    font-size: 70%;
    padding-right: 5px;
    vertical-align: text-top;} 
.sub {background:#EAEAEA;}
.sub_meny, .sub_meny_r, .sub_meny_active, .sub_meny_sm{
    font-size: 70%;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: text-top;}

.sub_meny_sm {
    font-size: 60%;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
}   

.sub_meny_r{
    float:right;
    font-size: 70%;
    padding-left: 8px;
    padding-right: 8px;}

.sub_meny_rm{margin-top:4px;}
.sub_meny_active{font-weight: bold;}

.flikkant1 {
    background-image: url(../images/fl1k.jpg);
    background-position: center;
    z-index: -1;}

.inl_namn{
    font-weight: bold;
    font-size: 70%;
    color: Black;
    text-decoration: none;}

.th{text-align: left;}
.tr{text-align: right;}

.g1{
    background-color: #FFF;
    line-height: 20px;
}

.g2{
    background-color: #EEE;
    line-height: 20px;
}

.g3{
    background-color: #DCDCDC;
    line-height: 20px;
    font-weight: bold;
    font-size: 100%;
}
.g4{
    background-color: #CCC;
    line-height: 20px;
}

.popup{
    border-color: #000; 
    border-style: groove; 
    border-width: 2px; 
    padding: 0px; 
    background-color: #FFF;
    font-size: 70%;
}

.popuphandlaggare{ 
    border-color: #000;
    border-style: groove;      
    border-width: 2px;      
    padding: 0px;      
    background-color: #FFF;     
    font-size: 70%;     
    position: absolute;     
    top: 900px; 
    }

.popupN{
    background-color: #F0F0E3;
    color: #000;
    width: 100%;
    display: inline;
    font-weight: bold;
    height: auto;
    padding: 2px;
    border-bottom: 1px solid #000;
}
.pin{padding: 6px;}

.fl10, .fl20, .fl30, .fl40, .fl50, .fl60, .fl70, .fl80, .fl90, .fl100 {
    padding-bottom:4px;color: #000000;
}

.over{
    background-color: #EFEFDC;
    line-height: 20px;
}

.half{
line-height:50%;
}

.quarter{
line-height:25%;
}

.lh10{
line-height:10%;
}

.checkmargin {margin-right: 25px;}  
.checkmarginL {margin-left: 25px;}  

.pusher {padding-left: 15px;"}
.pusherR {margin-right: 40px;"}

.rand3{background-color: #FFF; line-height: 3px;}
.rand1{background-color: #FFF; line-height: 1px;}

.whiteborder {     color: #ffffff;      border: 4px solid #ffffff;      padding: 10px;      margin: 10px; }
#details { width: 700; color: #ffffff; }
.column1 {     color: #000000; margin: 0;      padding: 0;     width: 600px;     border:0;     float: left; }
.column2 {     color: #000000;margin: 0;      padding: 0;     border:0;     width: 80px;     float: right; }

.f200 {
    color: #000000;
}

.f210 {
    color: #000000;float: left;
}
.f220 {
    width: 400;
}
.f1450 {
    width: 600;
    float:left;
}
.f1550 {
    width: 150;
    float:left;
    padding:15px;
}
.paddedcell {
    padding:15px;
}
.b2{border:2px solid #efefdc;}
.inp_sel{width: 80%;}

.fl21{float:left; padding:5px; margin:5px; width:150px;} .fl455{float:left; padding:5px; margin:5px; width:120px;} 

.form-bg {
  background: #eeefdf;
  width:1000px;
  overflow:hidden;
}
.form-bg2 {
  background: #eeefdf;
  width:100%;
  overflow:hidden;
}
.data-bar {
  border-bottom:1px solid #fbfbf7;
  display:inline-block;
  padding:10px 10px;
}

.left {
float:left;
width:200px;

}
.discount {
float:right;
width:500px;

}
.discounts {
width:900px;

}
.right {
float:right;
width:700px;
}
.yta20 {
background: #eeefdf;
width:1100px;
}

.yta2 {

width:1100px;
}

.data-box {
width:650px;
height:100px;
border:1px solid #cbcbcb;
}
#table td { 
margin:120px; 
} 

#personName {     float:left;     width:300px;   }  #otherDetails {     float:right;     width:450px;      }

.th_rad_sort {border-bottom: 2px solid #000000; text-decoration: none;"}

a img { border: 0; outline:0;}

.horizontal-gradient {
    background: #1a2adb; /* Old browsers */
    background: -moz-linear-gradient(left,  #1a2adb 0%, #a1e6ed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1a2adb), color-stop(100%,#a1e6ed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* IE10+ */
    background: linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a2adb', endColorstr='#a1e6ed',GradientType=1 ); /* IE6-9 */
    color: white;
    width: 1015px;
}
.f { float: right;     color: white; }


.handlaggare { width: 1000px; }

div.data-box-nat{
    margin-bottom: 10px;
    border: 2px solid gray;
    width: 600px;
}
div.data-box-pct{
    margin-bottom: 10px;
    border: 2px solid gray;
    width: 600px;
}
.newpopup {
z-index:100;
 position: absolute; 
  top:50%;
  left:50%;
  background-color:#ffffff; //not working

} 

Inspecting the element in chrome shows that the CSS is crossed out. What does it mean?

Answer 1

Since the code you have provided works fine and I can't possible reproduce your issue, here's how you debug it:

1. Open the dysfunctional page in Chrome
2. Hold Ctrl+Shift and press i - The developer tools will appear
3. Go to the "Elements" tab
4. Press the magnifying glass among the buttons at the bottom of the window and click the element in question on the page. In your case, select the element that should have a gradient.
   OR: browse your way to the element in question using the DOM browser in the "Elements" tab.
5. With the element selected, examine the "Styles" tab in the right column. There are all the styles that have been applied to your element, sorted from top to bottom by precedence, meaning that if two styles have been defined for the same property, the upper one will take precedence.

Now you can see if your style has been overwritten anywhere, and in which stylesheet and in which line it happened.