CSS & ems not working correctly

programming web dev
1

Okay, here I go again…

I have:

some text
a table
and the rest of the document

My problem: Text size isn’t good! I’m using ems, but in the table things aren’t going great…

HTML:


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../../test.css" rel="stylesheet" type="text/css">
</head>

<body oncontextmenu="return false" onselectstart="return false" oncopy="return false">

<p class="heading1">Publicaties</p>
<p class="defaulttext"> <br>
Voor de artikelen die u hier kunt downloaden heeft u de Acrobat Reader nodig. Als u deze nog niet heeft, dan kunt u die op de <a href="http://www.adobe.com/products/acrobat/readstep2.html">website van Adobe </a> downloaden. </p>
<p class="defaulttext"><img src="../../images/adobe.gif" width="16" height="16"> <a href="http://www.adobe.com/products/acrobat/readstep2.html" target="_blank">Download Adobe Reader</a></p>
<p class="defaulttext">&nbsp;</p>

<table class="table" width="100%" border="0" cellpadding="6" cellspacing="1">
 <tr>
	<td class="table_header" colspan="3">2005</td>
  </tr>
 <tr>
	<td class="table_verklaring">Geplaatst in: </td>
	<td class="table_verklaring">Onderwerp:</td>
	<td class="table_verklaring">Datum: </td>
 </tr>
 <tr><td class="table_subcat" colspan="3"><a href="http://www.brandevoortercourant.nl" target="_blank">Brandevoorter Courant </a></td></tr>   
 <tr>
	<td class="table_items">&nbsp;</td>
	<td class="table_items"> <a href="2005/bc/05-januari-zichtbaar.pdf" target="_blank" class="defaulttext">Buurtpreventie in Brandevoort steeds meer zichbaarder</a></td>
	<td class="table_items">Januari</td>
 </tr>  
 <td class="table_dummy" colspan="3">&nbsp;</td>
 <tr><td class="table_subcat" colspan="3"><a href="http://www.cofoto.nl/" target="_blank">De loop</a></td></tr>
 <td class="table_dummy" colspan="3">&nbsp;</td>
 <tr><td class="table_subcat" colspan="3">Overig:</td></tr> 
  <tr>
	<td class="table_items">Afgegeven huis aan huis</td>
	<td class="table_items"><a href="2005/Overig/Jaarverslag2004.pdf" target="_blank" class="defaulttext">Jaarverslag 2004 </a></td>
	<td class="table_items">&nbsp;</td>
  </tr>
</table>
</body>
</html>

And CSS:


html { font-size: 100%; /* IE hack */}

BODY {
	SCROLLBAR-FACE-COLOR: #6B8C99;
	SCROLLBAR-HIGHLIGHT-COLOR: #475D66;
	SCROLLBAR-SHADOW-COLOR: #475D66;
	SCROLLBAR-3DLIGHT-COLOR: #475D66;
	SCROLLBAR-ARROW-COLOR: #475D66;
	SCROLLBAR-TRACK-COLOR: #0F2933;
	SCROLLBAR-DARKSHADOW-COLOR: #0F2933;
	margin:0;
	background-color:#205C73;
	height:100%;
	font-size:0.75em;
}


#top {
background-image:url(images/logo-bg.gif);
background-repeat:repeat-x;
}
#topleft {
float: left;
width: 150px;
margin: 0;
background-image:url(images/logo-01e.gif);
background-repeat:no-repeat;
}
#topleft .floatleft {
margin: 25px 38px 27px 38px;
}
#topmiddle {
margin-left: 150px;
margin-right: 438px;
}
#topright {
float: right;
width: 438px;
background-image:url(images/logo-03.gif);
}
#topright .floatright {
margin: 27px 0 27px 2.5px;
width:96px;
border: 1px solid #0F2933;
}

#navcontainer {height:285px; margin-top:50px;}
#navcontainer .topimage1 {background-image:url(images/nav-boven.gif); background-repeat:no-repeat;}
#navcontainer .topimage2 {background-image:url(images/nav-boven-preventies.gif); background-repeat:no-repeat;}
#navcontainer p {margin: 0; height:34px;}
#navcontainer h4 {margin: 1px 0 0 0;}
#navcontainer .bottomimage {background-image:url(images/nav-onder.gif); background-repeat:no-repeat;}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li { 
margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
font-variant:small-caps;
color: #CFE8F1;
} 
#navcontainer a, #navcontainer a:visited {
display: block;
color: #839A8B;
background-color: #205C73;
background-image:url(images/nav-midden.gif); 
background-repeat:repeat-y;
padding: 0 .8em 0 1em;
text-decoration: none;
line-height:150%;
width: 150px;
}

#navcontainer a:hover, #navcontainer a:active {
color: #CFE8F1;
background-color: #839A8B;
background-image:url(images/nav-midden-active.gif);
background-repeat:repeat-y;
}

#filler {
_height:100%;
min-height:100%;
margin-top:-50px;
margin-bottom:50px;
}
#copyright {
position:absolute;
height:50px;
bottom:0px;
width: 150px;
text-align:center;
}
#copyright a, #copyright a:visited {
color: #839A8B;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.75em;
text-decoration: none;
width: 150px;
}
#copyright a:hover, #copyright a:active{
color: #CFE8F1;
text-decoration: none;
}
#filler .nedstat{
display:none;
}

.heading1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	background-color: #839A8B;
	font-size:1.2em;
	color: #0F2933;
	padding: 0.5em 0.2em 1em 0.5em;
	border: 1px solid #fff;}
.heading2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #6B8C99;
}
.heading3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #6B8C99;
	font-style: italic;
}
.defaulttext {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:1em;
	color: #97AEB7;
	line-height:150%;
}
.defaulttext a, .defaulttext a:visited {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:1em;
	color: #97AEB7;
	line-height:150%;
}
.defaulttext a:hoover, .defaulttext a:active {
	color: #97AEB7;
}

.table { background-color: #fff; }

.table_header { 
background-color: #839A8B;
font-size:1.2em;
font-weight:bold;
color: #0F2933;
padding: 0.5em 0.2em 1em 0.5em;}
.table_verklaring { 
background-color: #839A8B;
color: #0F2933;
font-size:1em;
padding: 0 0 0.2em 0.5em;
}
.table_subcat { 
font-size:1em;
padding: 0.5em 0 0.2em 0.5em;
background-color: #1D5165;
color: #fff;
}
.table_subcat a, .table_subcat a:visited{ 
padding: 0.5em 0 0.2em 0.5em;
background-color: #1D5165;
color: #fff;
}
.table_subcat a:hoover, .table_subcat a:active{ 
font-size:1em;
background-color: #1D5165;
color: #fff;
}

.table_items { 
font-size:1em;
background-color: #205C73;
color: #fff;
}
.table_items a, .table_items a:visited {
font-size:1em; 
background-color: #205C73;
color: #fff;
}
.table_dummy { 
background-color: #205C73;
padding:1em;
}

Summary:
Overall textheight should be .75em (working)
In the table
Header: 1.2em (working)
verklaring 1em
subcat: 0.75em (padding should be 0.5em left… but the text ‘brandevoort courant’ is more to the left then the ‘2005’ and ‘geplaatst in’. while the should be inline)
items: 0.75em (links are bigger right now, shouldn’t be!)

Probably am I declaring things double (0.75em*0.75em) or not using correct methods or even “less clever” classes or the use of it…

Please help me with this problem.