Intresting problem, I didn't know the container.css would effect all the containers on a page, although it does kind of make sense(I guess).
A couple side points about you're coding.
First, you canNOT use ID in your tags unless it's got runat=server. there can only be one ID tag per page, so if you have multiple containers, and your container file sets "<hr ID='jimbob'" /> then when you put 6 containers on one page you'll have 6 HR tags with the same ID. This is why there are also "classes" instead. so use class= for stuff without a runat attribute. When you use runat=server DNN changes the ID at runtime and it's ok. Remember also, if you use runat=server, since the ID will change at runtime, your CSS will not be used....just a tip.
Another neat thing I found in VWD2008, if you click edit and pull down to "format document" it'll line everything up properly automatically, and remove any caps you may have used in your tags since TD is now supposed to be TD.
Those are just two quick pointers I noticed when I looked.
So the question then is...how do we get that container only to be effected by the CSS you are applying. I'm glad you sent the source, cause it makes alot of sense now.
Here is what you do...You declare a class on your wrapping table(instead of an ID), and then before your a:hover and stuff you put the class of the table so it only effects the contents of the table.
Here is my modified source, that solves your problem. It will make total sense when you see it.(cause I'm to lazy to zip it up and find somewhere on my server to put it :->)
/* Your CSS File */
.tbContainer A:link /* See how it is. table class <SPACE> element <COLON> Psudoclass */
{
text-decoration: none;
color: lime;
}
.tbContainer A:visited
{
text-decoration: none;
color: fuchsia;
}
.tbContainer A:hover
{
text-decoration: underline;
color: #ff0000;
}
.tbContainer A:active
{
text-decoration: none;
color: #003366;
}
.brownback
{
background-image: url(brown.jpg);
color: white;
}
td.brownback
{
color: yellow;
}
.green_container
{
font-weight: bold;
font-size: 10pt;
color: #666666;
font-family: Verdana;
}
.green_container:hover
{
font-weight: bold;
font-size: 10pt;
color: orange;
font-family: Verdana;
text-decoration: underline;
}
.green_container:visited
{
font-weight: bold;
font-size: 10pt;
color: #666666;
font-family: Verdana;
}
.tdGreen
{
font-weight: bold;
color: white;
font-family: Arial, Verdana;
font-size: 10pt;
background-color: #333333;
text-decoration: none;
}
.tdYellow
{
font-weight: normal;
color: white;
font-family: Arial, Verdana;
background-color: #ffffcc;
text-decoration: none;
font-size: 10pt;
}
.textWhite_title
{
font-weight: bold;
color: white;
font-family: Arial, Verdana;
text-decoration: none;
font-size: 13pt;
}
.textGreen_title
{
font-weight: bold;
color: #333333;
font-family: Arial, Verdana;
text-decoration: none;
font-size: 13pt;
}
<!-Source ASCX, I only modified one thing. I changed the ID of the table to a class instead. remember in your CSS ID's start with # classes start with . -->
<%@ Control Language="vb" CodeBehind="~/admin/Containers/container.vb" AutoEventWireup="false"
Explicit="True" Inherits="DotNetNuke.UI.Containers.Container" %>
<%@ Register TagPrefix="dnn" TagName="ICON" Src="~/Admin/Containers/Icon.ascx" %>
<%@ Register TagPrefix="dnn" TagName="ACTIONS" Src="~/Admin/Containers/SolPartActions.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TITLE" Src="~/Admin/Containers/Title.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRINTMODULE" Src="~/Admin/Containers/PrintModule.ascx" %>
<table class="tbContainer" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
</td>
<td width="100%" class="tdGreen">
<p align="left">
<dnn:ICON runat="server" ID="dnnICON" />
<dnn:ACTIONS runat="server" ID="dnnACTIONS" />
<dnn:TITLE runat="server" ID="dnnTITLE" CssClass="textWhite_title" />
</td>
<td width="100%">
</td>
</tr>
<tr>
<td background="<%= SkinPath %>cont_green_04.jpg" height="41%">
</td>
<td runat="server" id="ContentPane" class="brownback" valign="top" width="100%" height="41%">
</td>
<td background="<%= SkinPath %>cont_green_06.jpg" height="41%">
</td>
</tr>
<tr>
<td background="<%= SkinPath %>cont_green_07.gif" height="100%">
</td>
<td background="<%= SkinPath %>cont_green_08.gif">
<p align="right">
<dnn:PRINTMODULE runat="server" ID="dnnPRINTMODULE" />
</td>
<td background="<%= SkinPath %>cont_green_09.gif">
</td>
</tr>
</table>
<!-- end of code -->
A side note, if your intrested. it may seem backwards a little. When I first started messing with DNN I was usign straight ASCX files like you are, and it is indeed a great way to learn, as you can see all the control properties. You'll find when you get to doign it alot more, you're gunna want to go back to htm files. The reason is, it's alot easier to reuse the XML files with all your favorite settings, than to code all your settings every time. Also the other cool thing is, you can then lay out the majority in it's own "website" without loading the entire dotnetnuke(saves on your PC lag a little bit).
Anyhow thats how to do it, or how it worked for me. Please let me know if you have any other questions. Also check out my site and enter a skin in the contest. Nobody has entered yet, I"m hopign 10 do it by the 31st so I can give someone a prize :->