Laura: Browserweichen/Browserhacks

Beitrag lesen

Hallo,
untenstehende Source bringt in Netscape und Firefox das gewünschte Ergebnis, nämlich dass die linke Seite mit dem Inhaltsverzeichnis sich bei Änderung der Schriftgröße in der Breite nicht verändert. Der rechte Balken wird wie gewünscht mit der Schriftgröße in der Höhe verändert.
In Opera und im IE verändert der linke Balken die Breite, beim IE sogar noch die Höhe, wenn man die Schrift verkleinert.
Ich habe gelesen, es gibt sogenannte Browserweichen/Browserhacks für solche Zwecke, aber ich kann leider nicht erkennen welche 'Hacks' mein Problem lösen.
Könnt Ihr mir vielleicht weiterhelfen?

NB. Die Farbe habe ich zur Demo willkürlich gewählt!

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<style type="text/css" >  
<!--  
body {  
  font-size: 100.01%;  
  margin:0;  
  padding:0;  
  
}  
  
html {  
  margin:0;  
  padding:0;  
}  
  
h1 {  
  margin:0;  
  padding:0;  
}  
  
#dirlinks {  
  position:absolute;  
  background-color:#5a73ff;  
  top:0;  
  left:0;  
  margin:0;  
  padding:0;  
  padding-left:10px;  
  overflow:auto;  
  width:230px;  
  height:100%;  
}  
  
#Inhalt {  
  position:absolute;  
  font-size:1em;  
  top:6em;  
  right:0px;  
  left:240px;  
  margin:0;  
  padding-top:10px;  
  padding-right:20px;  
  text-align:center;  
}  
  
  
#Inhalt h1 {  
  font-size:1.7em;  
}  
  
#kopf {  
  margin:0;  
  margin-left: 240px;  
  padding:0;  
  height:4em;  
  background-color:#5a73ff;  
}  
  
#kopf h1 {  
  margin:0;  
  padding:0;  
  padding-top:0.5em;  
  color:#E0FFA0;  
  text-align:center;  
  font-size:2em;  
}  
-->  
</style>  
  
</head>  
  
<body class="std">  
<div id="dirlinks">  
<br/><br/><br/><br/><br/><br/><br/>  
Thema 1 - xxxxxxx<br/><br/>  
Thema 2 - xxxxxxx  
</div>  
<div id="kopf">  
<h1>Kopfzeile</h1>  
</div>  
<div id="Inhalt">  
<h1>Überschrift</h1>  
<br/><br/><br/><br/>  
blabla-------------------------------------blabla<br/>  
blabla-------------------------------------blabla<br/>  
blabla-------------------------------------blabla<br/>  
blabla-------------------------------------blabla<br/>  
blabla-------------------------------------blabla  
</body>  
</html>