Toni: Zweispaltiges Layout

Beitrag lesen

Hallo,
in dem nachfolgenden Beispiel
flackern Bild und Text (d.h. wechseln von Bild/Text 1 zu Bild/Text 2 und zurück), wenn ich mit dem Cursor über den Text "Überschrift" fahre.
Woran liegt dies?
Zusatzfrage:
Warum ist der rechte (Text-)Block höher als der linke obwohl in beiden die gleiche height-Angabe (372px) erfolgt ist?
Grüsse
Toni

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
       "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
  
<head>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<title>Bildwechsel</title>  
<script type="text/javascript">  
var txtBild1 = '<h1>Überschrift<\/h1><br>Text Bild1<b>Zeile 1<\/b><br>Text Zeile 2<br><br><b>und ...<\/b>'  
var txtBild2 = '<h1>Überschrift<\/h1><br>Text Bild2<b>Zeile 1<\/b><br>Text Zeile 2'  
  
function tauschen (BildNr,BildName,Text)  
  {window.document.images[BildNr].src=BildName;  
   document.getElementById('Text').innerHTML = Text;  
  }  
</script>  
<style type="text/css">  
  img#Bild {  
    float: left;  
    width: 515px height: 372px;  
    margin: 0; padding: 0;  
    border: 1px dashed silver;  
  }  
  div#Text {  
    margin-left: 515px;  
    height: 372px;  
    padding-left: 1em; padding-top: 80px;  
    border: 1px dashed silver;  
  }  
</style>  
</head>  
<body>  
<img id="Bild" src="Bild1.jpg" width="515" height="372" alt=""  
     onmouseover="tauschen (0, 'Bild2.jpg', txtBild2)"  
     onmouseout= "tauschen (0, 'Bild1.jpg', txtBild1)">  
<div id="Text"  
     onmouseover="tauschen (0, 'Bild2.jpg', txtBild2)"  
     onmouseout= "tauschen (0, 'Bild1.jpg', txtBild1)">  
     <h1>Überschrift</h1><br>Text Bild1<b>Zeile 1</b><br>Text Zeile2<br><br><b>und ...</b>  
</div>  
</html>