Rowspan - Unterschiedliche Zeilenhöhe

Toasti2000 · 26. Februar 2006

Hallo zusammen,

bin nun schon seit Tagen dran ein Problem in meinem Tabellen-Layout zu lösen.

Habe rechts eine Zeile wo der Content reinkommt, also die Zeile kann länger wie auch kürzer sein, sprich dynamisch. Links habe ich 2 Zeilen die dann über die Höhe von der rechten Zeile gehen. Leider teilt der IE hier die Höhe der beiden Zeilen genau auf. Die obere Zeile auf der linken Seite soll aber nur 78px hoch sein, die untere Zeile soll den Rest ausfüllen.

Seht einfach mal selbst, ich denke ihr wisst was ich meine:

Hier der Screen vom Firefox, hier funktioniert es:

Hier vom IE, es funktioniert nicht:

Die weiße Lücke dürfte nicht sein, denn gleich nach der oberen Zeile mit Hintergrundbild sollte die untere Teile anfangen.

Anbei noch das Stylesheet und der Code:

HTML:

<?xml version='1.0'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/transitional.dtd'>
<html>
<head>
<title>index</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<link rel='Stylesheet' href='css/style.css' type='text/css' />
</head>
<body>

<table class='all'>
 <tr>
  <td colspan='2' class='top'>&nbsp;</td>
 </tr>
 <tr>
<td colspan='2' class='navi'>
  <a href='index.php'>Start</a>
  <a href='?do=vereinsinfo'>Vereinsinfo</a>
  <a href='?do=mannschaften'>Mannschaften</a>
  <a href='?do=turnier'>Turnier</a>
  <a href='?do=trainer'>Trainer</a>
  <a href='?do=presse'>Presse</a>
  <a href='?do=termine'>Termine</a>
</td>
</tr>
 <tr>
  <td class='subnavi-top'>&nbsp;</td>
<td rowspan='2' class='content'>

 <table class='content'>
  <tr>
   <td style='height: 40px'>&nbsp;</td>
  </tr>
<tr>
 <td style='background-color: #fff; padding: 10px;'>
  <h1>Aktuelles</h1></td>
</tr>
<tr>
 <td style='background-color: #ECEEF6; height: 10px;'></td>
</tr>
<tr>
 <td style='background-color: #fff; padding: 10px;'><p><b>Unsere Homepage ist fertig!</b></p></td>
</tr>
<tr>
 <td style='background-color: #fff; padding: 10px;'><p>blablablablablablablalblalbla</p></td>
</tr>
<tr>
 <td style='background-color: #ECEEF6; height: 10px;'></td>
</tr>
<tr>
 <td style='background-color: #fff; padding: 10px;'><p><b>Unsere Homepage ist fertig!</b></p></td>
</tr>
<tr>
 <td style='background-color: #fff; padding: 10px;'><p>blablablablablablablalblalbla</p></td>
</tr>
   </td>
  </tr>
  <tr>
   <td style='height: 40px'>&nbsp;</td>
  </tr>
 </table>
 
</td>
 </tr>
 <tr>
  <td class='subnavi'> 
 <table class='subnavi'>
  <tr>
   <td class='subnavihead'><ul><li>Start</li></ul></td>
  </tr>
  <tr>
   <td style='height: 4px'></td>
  </tr>
  <tr>
   <td class='subnavipoints'>
    <ul>
    <li><a href='?do=start&site=aktuelles'>Aktuelles</li></a>
    <li><a href='?do=start&site=archiv'>Archiv</li></ul></a></td>
  </tr>
  <tr>
   <td style='height: 10px;'></td>
  </tr>
 </table>
 </td>
</tr>
 <tr>
  <td colspan='2' class='footer'><a href='?do=kontakt'>Kontakt</a><a href='?do=impressum'>Impressum</a></td>
 </tr>
</table>

</body>
</html>

Code:

<!--

html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
        padding: 0;
        font-family: Verdana, Arial, sans-serif;
        background-color: #fff;
        font-size: 100%;
        text-align: center;
}

table, td, ul, li {
        margin: 0;
        border: 0 solid #fff;
        padding: 0;
}

p {
        margin: 0;
        padding: 0;
}

ul, li {
        margin: 0;
        padding: 0;
        list-style-type: none;
}

table {
        border-collapse: collapse;
}

td {
        vertical-align: top;
}

/* Layout
=========*/

table.all {
        width: 701px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
}

td.top {
        width: 701px;
        height: 130px;
        background-image: url('../images/top.gif');
}

td.navi {
        width: 701px;
        height: 24px;
        line-height: 100%;
        background-image: url('../images/navi.gif');
        text-align: left;
        vertical-align: middle;
        padding-left: 160px;
}

td.subnavi-top {
        width: 155px;
        height: 78px;
        background-image: url('../images/subnavi-top.gif');
        background-repeat: no-repeat;

}

table.subnavi {
        width: 125px;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
}

td.subnavihead {
        line-height: 100%;
        border-left: 5px solid #9FA8B2;
        border-bottom: 2px solid #9FA8B2;
}

td.subnavi {
        width: 155px;
        background-image: url('../images/subnavi.gif');
        background-repeat: repeat;
        text-align: center;
        vertical-align: top;
}

td.content {
        width: 546px;
        background-image: url('../images/content.gif');
        background-repeat: repeat;
}

table.content {
        width: 545px;
        background-color: #B8BBC8;
}

td.footer {
        width: 701px;
        height: 26px;
        background-image: url('../images/footer.gif');
        vertical-align: middle;
}

/* Fonts 
========*/

td.navi a:link, td.navi a:visited {
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        text-decoration: none;
        margin-left: 12px;
}


td.navi a:hover, td.navi a:active {
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        text-decoration: underline;
        margin-left: 12px;
}

td.subnavipoints ul li a:link, td.subnavipoints ul li a:visited {
        margin-left: 9px;
        font-size: 11px;
        color: #fff;
        text-decoration: none;
}

td.subnavipoints ul li a:hover, td.subnavipoints ul li a:active {
        margin-left: 9px;
        font-size: 11px;
        color: #fff;
        text-decoration: underline;
}

td.subnavihead li {
        margin-left: 5px;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
}

td.subnavipoints {
        border-left: 5px solid #6E7AA1;
        border-top: 1px solid #6E7AA1;
        border-bottom: 1px solid #6E7AA1;
        background-color: #6E7AA1;
}

table.content a:link, table.content a:visited {
        font-size: 12px;
        color: #626E92;
        text-decoration: underline;
}

table.content a:hover, table.content a:active {
        font-size: 12px;
        color: #626E92;
        text-decoration: none;
}

td.footer a:link, td.footer a:visited {
        font-size: 11px;
        color: #000;
        text-decoration: none;
        margin-left: 12px;
}

td.footer a:hover, td.footer a:active {
        font-size: 11px;
        color: #000;
        text-decoration: underline;
        margin-left: 12px;
}

h1 {
        font-size: 15px;
        color: #39425F;
        font-weight: bold;
        margin: 0;
}

h2 {
        font-size: 12px;
        color: #000;
        font-style: italic;
        margin: 0;
}

p {
        font-size: 12px;
        color: #000;
}

span.highlight {
        font-weight: bold;
}

input {
        font-size: 10px;
        font-weight: bold;
        width: 192px; 
        border: 0; 
        background-color: #E5E7F0;
}

textarea {
        font-size: 11px;
        font-weight: bold;
        font-family: Verdana, Arial, sans-serif;
        width: 192px; 
        border: 0; 
        background-color: #E5E7F0;
}
-->

Wäre echt super wenn ihr mir helfen könntet

Vielen, vielen, vielen herzlichen Dank im Voraus!

Grüße,
toasti

Rowspan - Unterschiedliche Zeilenhöhe

Toasti2000

Erfahrenes Mitglied

Neue Beiträge