Basically it's because the modules have thier own classes applied by DNN to them, so your applying your :hover and such to classes that aren't being used inside the module.  You're applying thm to the cell, but in the cell are more cells that have thier own class.

So...There is a file in DotNetNuke, called default.css that applies to everything in your website.  Every class in that file can be overridden.  To override them, in your skin.css file you must declair the same class that your overriding, and set the attributes you wish to override.

make sure, when you override something, override it exactly.  If they say border-left you say border-left adn so on.

Here is the section you need to override.  I've highlighted the items that you must override.  Just put those classes in your skin.css file and it should work.  if not take a look at default.css in your skin admin, site settings page...you'll see it all there.

/* GENERIC */
H1
{
font-family: Tahoma, Arial, Helvetica;
font-size: 20px;
font-weight: normal;
color: #666644;
}

H2
{
font-family: Tahoma, Arial, Helvetica;
font-size: 20px;
font-weight: normal;
color: #666644;
}

H3
{
font-family: Tahoma, Arial, Helvetica;
font-size: 12px;
font-weight: normal;
color: #003366;
}

H4
{
font-family: Tahoma, Arial, Helvetica;
font-size: 12px;
font-weight: normal;
color: #003366;
}

H5, DT
{
font-family: Tahoma, Arial, Helvetica;
font-size: 11px;
font-weight: bold;
color: #003366;
}

H6
{
font-family: Tahoma, Arial, Helvetica;
font-size: 11px;
font-weight: bold;
color: #003366;
}

TFOOT, THEAD
{
font-family: Tahoma, Arial, Helvetica;
font-size: 12px;
color: #003366;
}

TH
{
vertical-align: baseline;
font-family: Tahoma, Arial, Helvetica;
font-size: 12px;
font-weight: bold;
color: #003366;
}

A:link
{
text-decoration: none;
color: #003366;
}

A:visited
{
text-decoration: none;
color: #003366;
}

A:hover
{
text-decoration: underline;
color: #ff0000;
}

A:active
{
text-decoration: none;
color: #003366;
}

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en  <--I like this one for finding elements

http://chrispederick.com/work/web-developer/ <-- this one is GREAT for testing CSS.

nectar wrote Many thanks for your reply. I have added the highlighted sections in my container's css file and it worked. The only problem is that it affected the rest of the modules too. How would I make it not affect the rest, but modifying only the container's css file? Thanks

All modules are held within a container.  I may be missunderstanding what you are trying to do I guess, but yes if you apply those items to the container, it will effect the contents of the container, or, the modules that the containers are holding.  I thought that was what you were wanting to do.

I guess you could create two containers, one for contents that have your styles applied, and one that doesn't.

Anyone have a better idea?