Last night I spent about two hours "fixing" a skin that had basically nothing wrong with it other than the CSS. The client had been working on the skin for several weeks and was really frustrated because CSS wasn't working correctly, Firefox displayed different that IE, and graphics overlapped text, etc. The skin.css file was hundreds of lines, barely understandable and using Firefox's web developer tool bar showed as many as fourteen styles applied to a single item.
Forget that the client wasn't up to speed on the cascading portion of CSS, one of her major problems was that DNN applied styles she didn't know about. She had a lot of styles applied at the <td> or <tr> level, sometimes wrapped with the same style in a <div> or <span>, and then a DNN control came in and overtook her style. The simplest way to avoid this is to change the DNN style at the skin level, using the DNN class. The various skinning resources and documents show the CSS order, and pretty much anything redefined at the skin.css level is what the browser will render. The trick sometimes is knowing what the DNN style is. Web toolbars for both Firefox and IE can help here. Maybe an example:
The DNN Copyright control has a CSS style of #dnn_dnnCOPYRIGHT_lblCopyright. A skin which had this code:span class="MyClass"></span><dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" /></span>
<
Would not necessarily show any of the CSS effects of the MyClass class. But if you eliminate the <span> and use the #dnn_dnnCOPYRIGHT_lblCopyright class in your CSS file, you get your desired results.
Hope this helps someone else as well as my client. :)
Jeff