[HTML/CSS] Tabellenbug im Opera?

[paddya]

Guten Tag,

ich habe hier ein kleines Problem, das ich mir nicht erklären kann.

(X)HTML

<div class="contentbox">
    <h2>Kurier wählen</h2>
    <table>
      <thead>
        <tr>
          <th>...</th>
          <th>...</th>
          <th>...</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="courier"><img src="design/kschlecht.jpg" alt="Schlechter Kurier" /></td>
          <td class="courier"><img src="design/kmittel.jpg" alt="Mittlerer Kurier" /></td>
          <td class="courier"><img src="design/kgut.jpg" alt="Guter Kurier" /></td>
        </tr>
        <tr class="courierstory">
          <td>...</td>
          <td>...</td>
          <td>...</td>  
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
          <td>...</td>
        </tr>
      </tbody>
    </table>
  </div>

CSS

table {
    border-collapse: collapse;
}

table th {
    border-bottom: 2px solid black;
}

table td {
    padding: 0.3em;
    text-align: center;
    border: 1px solid #aaa;
}

.contentbox {
    border: 1px solid #999;
    margin-bottom: 2em;
    width: 95%;
    padding: 0.3em;
}

.courier img {
    height: 230px;
    padding: 0;
    margin: 0;
}

.courierstory td {
    text-align: left;
    font-size: 0.8em;
}

Soweit ist das kein Problem. Firefox 2.0.0.13 und IE7 zeigen das wie gewünscht an. Allerdings hat der Opera wohl ein Problem mit den Bildern, wie man auf diesem Bild sieht, denn alle anderen Tabellen, die nach diesem Schema erstellt werden, die aber keine Bilder enthalten werden korrekt dargestellt.
Sobald eine Tabellenzelle ein Bild enthält scheint es mir nicht mehr möglich zu sein, dessen Breite zu beeinflussen.

Jetzt meine Frage: Gibt es irgendeinen Workaround, dass die Tabelle auch im Opera nicht das Layout sprengt?

Danke schon mal im Vorraus

paddya

 

[Astrodan]

Ein Vergleich wäre mal gut, oder ein beispiel fürn Browser, also kein Bild.
Ansonsten interpretieren die neueren Browser auch sowas wie max-width, damit kannst du eine maximale Breite einstellen, das könnte möglicherweise für dich interessant sein.

 

[paddya]

Danke für deine Antwort, Astrodan.

Ein Vergleich wäre mal gut, oder ein beispiel fürn Browser, also kein Bild.

Im Firefox sieht das so aus: Vergleichsbild

Ansonsten interpretieren die neueren Browser auch sowas wie max-width, damit kannst du eine maximale Breite einstellen, das könnte möglicherweise für dich interessant sein.

Das Problem: die Angabe wird selbst mit "!important" einfach ignoriert. Weder "width: 600px" noch "max-width: 600px" auf die ganze Tabelle angewendet, oder eine Breitenangaben für die Spalte (<col>), noch für die einzelne zelle hilft etwas

Greetz

paddya

Edit.: Testcase

 

[Moloc]

Das Problem scheint Opera zu haben, wenn große Bilder verwendet werden, die mittels CSS kleiner gemacht werden. Hierfür würde es sich anbieten, die Bilder mit der Höhe 230px abzuspeichern (das steht ja in der CSS Datei), dann funktioniert es auch in Opera 9.26.


In Opera 9.5 (weekly build) scheint der Fehler behoben zu sein.

 

[paddya]

Das Problem scheint Opera zu haben, wenn große Bilder verwendet werden, die mittels CSS kleiner gemacht werden. Hierfür würde es sich anbieten, die Bilder mit der Höhe 230px abzuspeichern (das steht ja in der CSS Datei), dann funktioniert es auch in Opera 9.26.


In Opera 9.5 (weekly build) scheint der Fehler behoben zu sein.

Danke, werde das dann mal testen. Hätte ich aber auch selber drauf kommen können

Greetz

paddya