Gernot Back: Probleme mit Hoehe von Tabellenzeilen

Beitrag lesen

Hallo nochmal,

eigentlich wollte ich dich ja noch ein bisschen zappeln lassen, damit du dich selbst bemühst, aber da der Thread im Archiv zu verschwinden droht, bevor du am nächsten ecuadorianischen Werktagsnachmittag wieder im Forum bist, poste ich dir mal eine Lösung, von der ich nicht weiß, ob ich sie dir wirklich empfehlen soll (angesichts der Klimmzüge, die man für Opera machen muss und angesichts der Macken, die auch der IE teilweise bei einem Resize des Fensters damit hat.

Was ich selbst ja gerne wüsste: Hat jemand eine bessere Lösung für das Problem, möglicherweise sogar ohne Tabellenmissbrauch?

Gruß Gernot

Hier mein Code:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<title>Ecuadekor</title>  
<meta name="author" content="Gernot Back">  
<meta name="generator" content="Ulli Meybohms HTML EDITOR">  
<style type="text/css">  
[code lang=css]  
body {  
  overflow:auto;  
}  
  
html, body, table {  
  width:100%;  
  height:100%;  
  margin:0;  
  padding:0;  
  border-collapse:collapse;  
}  
  
td {  
  padding:0;  
}  
  
#ecuador {  
  background-color:red;  
  height:100%;  
  width:100%;  
  position:relative;  
}  
  
#ecuador div {  
  background-color:blue;  
  height:75%;  
}  
  
#ecuador div div {  
 background-color:yellow;  
 height:67%;  
}  
  
#ecuador #content{  
  position:absolute;  
  top:5%;  
  left:5%;  
  width:90%;  
  height:90%;  
  overflow:auto;  
  background-color:white;  
}  
  
#content p, #content h1{  
  color:black;  
  margin:1% 2%;  
}  
  
#left {  
  height:50px;  
  vertical-align:top;  
}  
  
#top {  
  width:150px;  
  vertical-align:top;  
}  
/*  
im nachfolgenden externen Stylesheet  
steht als Workaround für Opera:  
  
#ecuador #content{  
  overflow:scroll;  
}  
*/

</style>
<link rel="stylesheet" type="text/x-opera-css;charset=utf-8" href="opera.css">
<script type="text/javascript">

  
// Den Resizefix benötigt auch nur Opera:  
window.onresize = function() {  
    if(window.opera)  
      window.location.reload();  
  }

</script>
</head>
<body>
<table>
  <tr>
   <td id="left" colspan="2">Platz für die Kopfzeile</td>
  </tr>
  <tr>
   <td id="top">Platz für die navi links</td>
   <td>
     <div id="ecuador">
       <div id="content">
         <h1>Eine Überschrift</h1>
         <p>ganz viel Text</p>
       </div>
       <div>
         <div>&nbsp;</div>
       </div>
     </div>
   </td>
  </tr>
</table>
</body>
</html>[/code]