My CSS feels dirty and I have no idea how to improve it.
Suggestions are greatly appreciated!
html, body { border:0; margin:0; padding:0; }
body { font: normal 12px helvetica,sans-serif; }
.header {
background-color:#242424;
height:40px; }
.header h1, h2 { text-transform:uppercase; }
.header h1 {
color:#FFF;
display:inline;
font-size:12px; }
.header h2 {
color:#B4B4B4;
display:inline;
font-size:12px; }
.header #title, .sub #nav, #content {
margin:0 auto;
width:797px; }
.header #title {
padding-top:12px; }
.header #version {
color:#FFF;
float:right;
font-size:10px;
margin:-13px 10px 0 0; }
.sub {
background-color:#E4F2FD;
border-bottom:#D1E5EE solid 1px;
height:30px; }
.sub ul, li { margin:0; padding:0; list-style:none; }
.sub li {
float:left;
padding-left:10px;
margin:8px 20px 0 -18px; }
.sub li a {
color:#21759B;
padding:8px;
text-decoration:none; }
.sub li a:hover { background-color:#FFF; }
#content { margin-top:15px; }
h1 { font-size:13px; }
hr {
border:0;
height:1px;
background-color:#E9E9E9; }
.quick-add {
background-color:#E9E9E9;
color:#575757;
font-size:12px;
margin-top:10px;
padding:2px; }
.quick-add td { padding-left:8px; }
#data { margin-top:15px; }
#member { width:100.5%; margin-left:-1px;}
#even {
background-color:#EFF8FF;
color:#21759B; }
#odd {
background-color:#FFF; }
#data td { padding:3px; }
#a { width:5%; text-align:center;}
#b { width:40%; }
#c { width:10%; }
#d { width:20%; }
#e { width:15%; }
Also, I have two different tables on two different pages (one for members and another for information) what's the best way to independently style them?
Thanks!