Hallo!

Firefox treibt mich gerade in den Wahnsinn: Er rendert Tabellenzellen zu hoch.

Testcase

IE 7 stellt die Tabellen korrekt dar. Opera macht generell Murks, aber das ist nachrangig. IE 6 nicht getestet und hier irrelevant.

Die Zellen mit den Eckgraphiken sollten quadratisch sein: 20x20 Pixel. Die Breite stimmt, aber aus mir unerfindlichen Gründen erzeugt FF unter den Bildern ein paar zusätzliche Pixel.

Soweit ich das sagen kann, muss es sich dabei um padding handeln, denn auch mit vertical-align: bottom lassen sich die Bilder nicht an den unteren Zellrand bewegen. Im Testcase habe ich explizite Höhenangaben für Zellen oder Zeilen weggelassen, aber ich habe unter anderem schon folgendes durchprobiert:

Explizites Setzen von height und max-height für Zeilen und Zellen
display: block
Höhensteuerung über HTML-Attribute
Explizites Setzen von padding usw. auf 0

Google spuckt mir ein paar Treffer zu "Firefox table cell height" aus, aber ich konnte nichts verwertbares finden.

Weiß jemand Rat?

Danke!

Ach ja, bevor jemand vorschlägt, das Ganze mit divs zu lösen: Das habe ich schon versucht. Nein. Ich brauche meine Nerven noch.

sars

Warum bindest Du die Grafiken nicht einfach als background-image ein?

Spoiler:

silanea

Daran habe ich ja gar nicht gedacht! Klappt einwandfrei!

Tausend Dank!

GinTonic

Um den Fehler zu beseitigen muss man in den Zeilen mit den Ecken die Schriftgröße verringern. z.B. auf 9px, dann passt es.

Nur nochmal so zur Info, falls jemand ein ähnliches Problem hat.

aNtiCHrist

Erklärung für das Verhalten:
http://www.dodabo.de/html+css/img-table/
http://carsten-protsch.de/zwischenne...e/luecken.html

Zitat:

Ach ja, bevor jemand vorschlägt, das Ganze mit divs zu lösen: Das habe ich schon versucht. Nein. Ich brauche meine Nerven noch.

Ist doch nicht komplizierter:
http://www.andreas-kalt.de/webdesign...ls/runde-ecken
http://www.alistapart.com/articles/customcorners/
http://www.alistapart.com/articles/customcorners2/

Für einfache Rundungen gibt sogar JavaScript-Toolkits, die einem die ganze Arbeit abnehmen.

edit:

Zitat:

Opera macht generell Murks

Nö, macht er nicht. Dein CSS-Code ist zum einen fehlerhaft, zum anderen ist die in Opera so hohe Zeile genau das, was du vorgibst: <img src="./img/i1.png" style="height: 180px; width: 180px;" /> - Da das Bild nicht verfügbar ist, führt es dann allerdings dazu, dass einige Browser den Platz nicht reservieren. Das Verhalten in so einem Fehlerfall ist allerdings nicht spezifiziert, insofern ist das Verhalten von Opera nicht falsch. Safari macht es z. B. ebenso.

silanea

Danke Antichrist! Der erste Link ist genau das, was ich verzweifelt gesucht hatte.

Der Grund, wieso ich keine divs benutzen möchte, ist der rechte Kasten. Ich habe versucht, ebendas aus divs zu bauen, und bin dabei ordentlich verzweifelt. In den Weihnachtsferien habe ich endlich wieder Zeit zum Basteln, da schaue ich mir das nochmal in aller Ruhe an.

aNtiCHrist

Würde ich auch vorschlagen. Der "Registerreiter" allein ist doch nichts anderes als eine Box, wo nur drei der vier Ecken eine spezielle Gestaltung benötigen. Die eigentliche Box darunter ebenfalls. Wo ist also das Problem?

Dexter

Wo ja alles geklärt ist

Zitat:

Zitat von aNtiCHrist

Da das Bild nicht verfügbar ist, führt es dann allerdings dazu, dass einige Browser den Platz nicht reservieren.

Kenne das nur von Gecko, welcher Browser(familie) macht das noch?
Interessehalber grad positiv (aus meiner Sicht) getestet: Amaya (!), Safari, IE6, IE7, Opera.
Rein gefühlsmässig finde ich übrigens Das Verhalten von Gecko "falsch", rein praktisch allerdings:

Zitat:

Das Verhalten in so einem Fehlerfall ist allerdings nicht spezifiziert

Doch. IMG=Inline=so breit und hoch wie der Inhalt.

Sicher kann man hier immer noch Haarespalten, ob "src" Inhalt von "img" ist.

Btw: welches Verhalten empfindest Du als richtig?

aNtiCHrist

Ok, ich dachte, der IE würde das auch machen, da der IE 7 den Testcase "korrekt" darstellen soll. Das waren somit zwei Browser, was mich zu dem pauschalen "einige" verleitet hat.

Was nun eher "richtig" ist, ist eine schwierige Entscheidung. Ohne die Angabe von width- und height-Attribut wäre ich klar für die Darstellung in der Größe, die für die Darstellung des Alternativtexts nötig wäre. Das ist ja auch die einzig sinnvolle Möglichkeit in so einem Fall, die Abmessungen des Bilds sind ja nicht ermittelbar und wenn man bei absichtlich deaktivierter Bilddarstellung die Bilder trotzdem zur Ermittlung der Dimensionen abrufen müsste, wäre das Abschalten ziemlich sinnlos.

Sind die Angaben allerdings vorhanden, gibt es für beide Darstellungsweisen gute Argumente. Dafür spricht, dass Bilder in der Praxis oftmals fürs Layout missbraucht werden und das ignorieren der Angaben zu einem stärker beeinträchtigten Layout führen könnte. Das ist dann zwar eigentlich das Problem des Autors/Webmasters, aber aus Anwendersicht wäre so ein Verhalten des Browsers dennoch zu bevorzugen. Hier wäre dann allerdings ggf. auch wieder zu differenzieren, ob der Nutzer die Bilder absichtlich deaktiviert hat, oder ob das Bild nicht dargestellt werden kann.

Dagegen spricht, dass die Dimensionsangaben für das Bild gedacht waren und für den alt-Text möglicherweise unpassend sind. Z. B. könnte der Alternativtext für ein kleines Icon in der Breite deutlich mehr Platz benötigen, als das Bild selbst. Gleiches gilt auch andersrum. Unter http://www.hixie.ch/advocacy/alttext findet man übrigens noch ein paar mehr Gründe dagegen.

Dexter

Zitat:

Zitat von aNtiCHrist

Dagegen spricht, dass die Dimensionsangaben für das Bild gedacht waren und für den alt-Text möglicherweise unpassend sind. Z. B. könnte der Alternativtext für ein kleines Icon in der Breite deutlich mehr Platz benötigen, als das Bild selbst.

Das überzeugt.

silanea

Hin und wieder zweifle ich doch an meinem Geisteszustand. Die Lösung war ebenso simpel wie naheliegend.

Die relevanten Angaben:

HTML-Code:


[...]
  <!-- Einfache Box -->
  <div class="rounded">
    <img class="rightcorner" src="./corner_inv_topright.png" alt="" />
    <img class="leftcorner" src="./corner_inv_topleft.png" alt="" />

    Inhalt

    <img class="rightcorner" src="./corner_inv_bottomright.png" alt="" />
    <img class="leftcorner" src="./corner_inv_bottomleft.png" alt="" />
  </div>

  <!-- "Reiter"-Box -->
  <div class="rounded2">
    <div class="innerrounded">
      Schwarzer Bereich rechts oben
      <img class="filledcorner" src="./corner_bottomleft.png" alt="" />
      <div class="innerblank">
        <img class="" src="./corner_inv_topright.png" alt="" />
      </div>
    </div>

    <img class="rightcorner" src="./corner_inv_topright.png" alt="" />
    <img class="leftcorner" src="./corner_inv_topleft.png" alt="" />

    Inhalt

    <img class="rightcorner" src="./corner_inv_bottomright.png" alt="" />
    <img class="leftcorner" src="./corner_inv_bottomleft.png" alt="" />
  </div>
[...]

Code:

body, html {
  background-color: #000;
}

div.rounded,div.rounded2 {
  background-color: #909030;
  padding-bottom: 20px;
}

div.innerrounded {
  color: #FFF;
  background-color: #000;
  width: 50%;
  float: right;
}

img.rightcorner {
  float: right;
}

img.leftcorner {
  float: left;
}

img.filledcorner {
  display: block;
  background-color: #909030;
}

div.innerblank {
  background-color: #909030;
  text-align: right;
}

Das ist das Grundgerüst, mit dem ich weiterbastle. Wird so nur im Firefox sinnvoll angezeigt; IE 7 unterschlägt die unteren Ecken, Opera 9 fügt unten unter den Grafiken noch Padding an. Was IE 6 daraus macht, weiß ich nicht. Natürlich fehlen noch diverse Angaben zur Fehlervermeidung und sämtliche browserspezifischen Korrekturen.

Dazu sei gesagt: Ich wende nicht die in den von antichrist geposteten Links beschriebene Technik an, dem div ein übergroßes Hintergrundbild zu verpassen. Die Grafiken sind tatsächlich nur die 20 auf 20 Pixel großen Ecken. Klarer Vorteil: Die Boxen können so groß werden wie sie wollen und sind nicht durch die Größe des Hintergrundbilds beschränkt.
Im Gegensatz zu den vorgeschlagenen Methoden ist bei mir das Innere der Box transparent, nicht das Äussere. Dadurch bin ich zwar in der Wahl des Seitenhintergrundes eingeschränkt, aber dafür kann ich durch eine simple CSS-Angabe - background-color - die Boxfarbe beliebig ändern.

aNtiCHrist

Der Vorteil, die Bilder allein für die Ecken zu verwenden ist klar. Ob du das nun "invertiert" machst, hängt natürlich von den Anforderungen ab. Aber warum nimmst du dafür nicht einfach Hintergrundbilder? Ich habe mir das Problem noch nicht näher angesehen, aber img-Elemente sind hier imo nicht angebracht.

Der IE unterschlägt die unteren Bilder auch nicht, er stellt sie nur außerhalb der Box dar. Durch die floats ohne clear danach ist das auch nicht unbedingt verwunderlich. Allerdings scheint er das padding-bottom fälschlich auch auf in dem Element selbst liegende floats anzuwenden. Das ist natürlich falsch. Bei der Darstellung in Opera (und Safari) wundere ich mich ziemlich, hier liegen die floatenden Elemente links und rechts von *zuvor* im Dokument vorkommendem Inhalt. Ich würde dieses Verhalten nicht erwarten und habe auch keine Erklärung dafür. Wenn es korrekt wäre: Warum ist es gerade die letzte Zeile und nicht schon irgendwann früher? Seltsam ist auch, dass zwei verschiedene Engines auf dem Stand der Technik es genau gleich machen. Möglicherweise ist das Verhalten doch korrekt?

Abhilfe würde jedenfalls das Ersetzen des padding-bottom durch ein clear:both; schaffen. Oder besser noch, die Vermeidung des img-Missbrauchs und die Nutztung von Hindergrundbildern.

silanea

Zu den Darstellungsproblemen: Meine Version ist, wie geschrieben, erst mal ein Grundgerüst. clear etc. müssen natürlich erst eingearbeitet werden. Ich bin schon heilfroh dass ich - zunächst mal im FF - überhaupt etwas angezeigt bekomme, was meinen Anforderungen nahekommt.

Mir ist aber nicht klar, wie ich die imgs durch Hintergrundbilder ersetzen soll, ohne eine div-Zwiebel zusammenzuschustern. Da sind dann die imgs für mich das kleinere Übel. Theoretisch hast du Recht, dass reine Designgrafiken im Markup nichts zu suchen haben. Aber die philosophisch einwandfreie Version hat mir genug Kopfschmerzen bereitet um sie recht schnell zu verwerfen. Einzig fiele mir ein, 20x20 Pixel großen divs die jeweiligen Eckgrafiken als Hintergrund zuzuweisen und sie anstelle der imgs zu positionieren, aber allein bei der Vorstellung schaudert es mir.

aNtiCHrist

Ok, die Zwiebel ist auch nicht schön, aber immer noch die beste Alternative. Durch die img-Elemente fließt z. B. auch der Text anders, das dürfte nicht beabsichtigt sein und wenn du sogar eine Layout-Tabelle in Erwägung ziehst, dürften dich doch ein paar semantisch bedeutungslose divs nicht abschrecken? Absolut positionierte Eck-divs wären zwar ggf. eine Alternative, aber da wird es schneller Probleme mit fehlerhaften Browsern geben. Da wäre ich auch vorsichtig. Mit verschachtelten Boxen kommen aber praktisch alle Browser problemlos zurecht. Zumindest viel besser als mit Floats oder gar absoluter Positionierung.

silanea

Zitat:

Zitat von aNtiCHrist

Ok, die Zwiebel ist auch nicht schön, aber immer noch die beste Alternative. [...]

Ich probiere es nochmal aus, aber meine bisherigen Versuche haben mich da ziemlich abgeschreckt. Andererseits hast du natürlich Recht, dass die Grafiken den Textfluss beeinflussen. Das war mir erst gar nicht bewusst, weil in dem Design, für das ich die Boxen brauche, sehr große Innenabstände vorgesehen sind.

Mal sehen, vielleicht komme ich doch noch zu einer befriedigenden Lösung.

Eines will ich aber mal loswerden: Vielen Dank Dexter und dir für euer Feedback, nicht nur hier, sondern allgemein in den Webmasterforen. Ihr zwei habt mir - direkt und indirekt - schon von einer ganzen Menge Leitungen heruntergeholfen.

Dexter

Zitat:

Zitat von silanea

Mir ist aber nicht klar, wie ich die imgs durch Hintergrundbilder ersetzen soll, ohne eine div-Zwiebel zusammenzuschustern.

Das geht schlicht nicht*.
Die Frage steht immer noch im Raum, warum Du Dich so vehement gegen semantisch "freie" DIVs wehrst, aber stattdessen mit inhaltlich wertlosen Grafiken experimentierst.

Zitat:

Da sind dann die imgs für mich das kleinere Übel.

Wo ist denn der Unterschied? Du pfriemelst ewig mit Deiner üblen (!) Frickellösung rum, dabei gibt es nicht nur eine semantisch korrekte sondern auch extrem problemunanfällige Lösung für Dein Problem.

Edit: ärx

* mit kleinen Umwegen, wie Überschrift/ letzter Absatz/element formatieren kann man div-suppe einsparen.

silanea

Ihr habt mich überzeugt. Ich habe mich wohl bei meinen Versuchen bisher einfach zu blöd angestellt. Nun also doch die Boxen als Zwiebeln. Probleme bei der unteren Box:

Ich musste für die linke untere Ecke des schwarzen "Reiters" ein recht unschönes Konstrukt aus drei divs verwenden, damit ich unter der Ecke die Hintergrundfarbe der Box durchscheinen lassen kann. Gibt es da irgendeine schönere Lösung? Ich konnte keine finden.
Im IE 7 schlägt anscheinend mal wieder der von mir vermutete Rundungsbug zu, der mir schon bei einem Menü zu schaffen machte: Je nachdem wie man das Browserfenster vergrößert oder verkleinert, springen die "Zwiebelschalen" in der Box umher.

FF 2 und 3 sowie Opera 9 zeigen die Boxen korrekt an, soweit ich das bisher sehen konnte. Einziges Problem, das mir bis jetzt aufgefallen ist: Zieht man das Browserfenster sehr klein, steht der Text in den Ecken über den farbigen Bereich hinaus. Muss natürlich noch behoben werden.

aNtiCHrist

Zitat:

Ich musste für die linke untere Ecke des schwarzen "Reiters" ein recht unschönes Konstrukt aus drei divs verwenden, damit ich unter der Ecke die Hintergrundfarbe der Box durchscheinen lassen kann.

Eventuell, indem du doch für die gesamte rechte Kante des Registerreiters Bilder verwendest. Dann bräuchtest du keinen zusätzlichen schwarzen. Hat halt dafür den Nachteil, dass du in der Höhe nicht mehr so ganz flexibel bist. Mit einer eigenen Schale für den rechten Rand sollte das aber auch unendlich skalierbar sein, man müsste das dann nur richtig sortieren.

Andere und vermutlich elegantere Idee: Die Schale für das Bild unten rechts mit einem negativen margin-right außerhalb der Elternschale positionieren. So kannst du Konturen erzeugen, die die Elternbox überragen.

Die Macke im IE ist interessant, sie lässt sich aber bestimmt leicht durch eine nicht spürbare Verringerung der Breite auf 49% umgehen. Wenn du einen meiner Vorschläge umsetzt, brauchst du das schwarze Float nicht mal. Damit sollte dann auch dieses Problem verschwinden.

Anzeige

Anmelden

Weitere Tipps