josefk: IE zerreißt Tabelle - Firefox machts "richtig"

Beitrag lesen

Sodala, hab das ganze jetzt mal mit CSS gemacht. Leider haben mich die relativen angaben und das "umfliesen" von Elementen fast Verrückt gemacht, daher alles absolut. Leider zeigt mit der Firefox nun den roten Klecks rechts an und der IE links. Ich will das Dingens aber in der Mitte. :)

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>sprout</title>  
<style type="text/css" media="screen">  
 body  
 {  
  margin: 1em auto;  
  padding: 0;  
  font: 85% arial, hevetica, sans-serif;  
  text-align: center;  
  color: #505367;  
  background-color: #B8AC73;  
 }  
 #container  
 {  
     margin: 1em auto;  
  position: absolute;  
  width: 902px;  
  height: 692px;  
  text-align: left;  
  background-color: red;  
  border: 0px;  
 }  
 #11_sprout  
 {  
  position: absolute;  
  left: 0px;  
  top: 0px;  
  width: 183px;  
  height: 105px;  
 }  
 #12_top  
 {  
  position: absolute;  
  top: 0px;  
  right: 0px;  
  width: 719px;  
  height: 105px;  
 }  
 #21_row_blank  
 {  
  position: absolute;  
  top: 105px;  
  left: 0px;  
  height: 45px;  
  width: 902px;  
 }  
 #31_menue1  
 {  
  position: absolute;  
  top: 150px;  
  left: 0px;  
  height: 102px;  
  width: 183px;  
 }  
 #311_rowtop  
 {  
  position: absolute;  
  top: 150px;  
  right: 0px;  
  width: 719px;  
  height: 14px;  
 }  
 #312_left  
 {  
  position: absolute;  
  top: 164px;  
  left: 183px;  
  width: 18px;  
  height: 88px;  
 }  
 #41_menue2  
 {  
  position: absolute;  
  top: 252px;  
  left: 0px;  
  width: 183px;  
  height: 112px;  
 }  
 #42_left  
 {  
  position: absolute;  
  top: 252px;  
  left: 183px;  
  width: 18px;  
  height: 112px;  
 }  
 #51_menue3  
 {  
  position: absolute;  
  top: 364px;  
  left: 0px;  
  width: 183px;  
  height: 103px;  
 }  
 #52_left  
 {  
  position: absolute;  
  top: 364px;  
  left: 183px;  
  width: 18px;  
  height: 103px;  
 }  
 #blank  
 {  
  position: absolute;  
  top: 467px;  
  left: 0px;  
  height: 225px;  
  width: 183px;  
 }  
 #62_left  
 {  
  position: absolute;  
  top: 467px;  
  left: 183px;  
  height: 225px;  
  width: 18px;  
 }  
 #content  
 {  
  position: absolute;  
  top: 164px;  
  left: 201px;  
  height: 505px;  
  width: 504px;  
 }  
 #71_bottom  
 {  
  position: absolute;  
  top: 669px;  
  left: 201px;  
  height: 23px;  
  width: 504px;  
 }  
 #72_bottom  
 {  
  position: absolute;  
  top: 669px;  
  right: 0px;  
  height: 23px;  
  width: 197px;  
 }  
 #right  
 {  
  position: absolute;  
  top: 164px;  
  right: 0px;  
  height: 505px;  
  width: 197px;  
 }  
</style>  
  
</head>  
  
<body>  
<div id="container">  
 <div id="11_sprout"></div>  
 <div id="12_top"></div>  
 <div id="21_row_blank"></div>  
 <div id="31_menue1"></div>  
 <div id="41_menue2"></div>  
 <div id="51_menue3"></div>  
 <div id="311_rowtop"></div>  
 <div id="312_left"></div>  
 <div id="42_left"></div>  
 <div id="52_left"></div>  
 <div id="right"></div>  
 <div id="blank"></div>  
 <div id="62_left"></div>  
 <div id="71_bottom"></div>  
 <div id="72_bottom"></div>  
 <div id="content"></div>  
</div>  
  
</body>  
</html>