CSS class not working after renaming

I am completely new to CSS so I suspect this will be a dumb question. When I copy and rename a css class in order to modify it without changing the other. The class doesn't work anymore. I am sure I am missing something.

Here is the code that doesn't work.

    <asp:Repeater ID="LIC" runat="server">
    <HeaderTemplate>
    <table cellspacing="1" cellpadding="0" width="720px" style="background-color:#ded5ae; border-right: #2f375c 1px solid; border-left: #2f375c 1px solid;">
      <tr>
        <td class="header1a" width="1%">
        &nbsp;</td>
        <td class="header1a" align="left" width="20%">
        <%# "Client Code" %></td>      
        <td class="header1a" align="center" width="41%">
        <%# "Product Description" %></td>
        <td class="header1a" align="center" width="19%">
        <%# "Expiration Date" %></td>
        <td class="header1a" align="center" width="19%">
        <%# "Maintenence End" %></td>
      </tr>
    </HeaderTemplate>

/* Header1a - Main header */
.header1a
{
	background-image: url( 'bg_header1.png' );
	background-color: #BAC8D5;
	color: #FFFFFF;
	font-weight: bold;
	height: 60px;
	font-size: 12px;
}

/* Links in header1a */
tr.header1a a			{color:#FFFFFF;text-decoration:none}
tr.header1a a:hover	{color:#C0C0FF;text-decoration:none}

Code (markup):

If I use the existing class header1 it does work.

/* Header 1 - Main header */
.header1 {
	background-image: url('bg_header1.png');
	background-color: #7D8CFF;
	color: #FFFFFF;
	font-weight: bold;
	height: 32px;
	font-size:12px;
}

/* Links in header1a */
tr.header1 a			{color:#FFFFFF;text-decoration:none}
tr.header1 a:hover	     {color:#C0C0FF;text-decoration:none}

Code (markup):

Everything seems to be the exact same. What am I missing?

Any help would be greatly appreciated.

 

well after some more testing if I change an option in header1 it is also not being reflected on the website. Looking at the source in the web browser I am changing the correct style sheet though. Now I am really lost

 

whenever I get stuck like this I usually make sure that my style is actually 'stylizing' something. try setting something really really obvious, like

background : red ;

to make sure it is an actual problem with your containers, and not just a problem with your style.

 

After way to much work. I finally figured out that it was the browser caching the page. How will this work when the website is live? Is there something in code that I can do in order to have my changes reflect without clearing the browser?

 

Well... it might help if you axed the outdated/outmoded code. Presentational markup, classitus, etc, etc.

Class="header1a" on ALL of them - that means put a class on the TR and inherit, save some code... HEADER, that means they probably shouldn't even BE TD, but TH - TABLE HEADER.

I'd have to see more to make a real evaluation - but I've got the feeling you've WAY overthought the solution to this layout... or if as you said "new to CSS" you've been reading books or tutorials a decade out of date.

Of course, being the table is unclosed it's likely the whole layout probably needs to go.

for the code, this is probably all that would be needed there:

  <asp:Repeater ID="LIC" runat="server">
    <HeaderTemplate>
    <table class="container">
      <tr>
        <th class="minthin"></th>
        <th class="code"><%# "Client Code" %></th>      
        <th class="description"><%# "Product Description" %></th>
        <th class="expires"><%# "Expiration Date" %></th>
        <th class="maintEnd"><%# "Maintenence End" %></th>
      </tr>
    </HeaderTemplate>

Code (markup):

With the following CSS

.container {
	border-collapse:collapse;
	table-layout:fixed;
	empty-cells:show;
	width:720px;
	background:#DED5AE;
	border:#2F375C solid;
	border-width:0 1px;
}

.container td,
.container th {
	border-left:1px solid #DED5AE; /* fake cellpadding */
}

.container th {
	text-align:center;
	background:#BAC8D5;
	color:#FFF;
}

.container th a {
	color:#FFF;
	text-decoration:none;
}

.container th a:active,
.container th a:focus,
.container th a:hover {
	color:#CCF;
}

.container td {
	border-top:1px solid #DED5AE; /* fake cellpadding */
}

.container .minThin {
	width:1%;
	border-left:none;
}

.container .code {
	width:20%;
	text-align:left;
}

.container .description {
	width:41%;
}

.container .expires,
.container .maintEnd {
	width:19%;
}

Code (markup):

This of course assumes you are going to be following with TR/TD that are NOT headers, right?

Sad part is, about half that CSS could be axed if Gecko didn't still have it's head wedged up it's backside about colgroups.