Felix Riesterer: Opera display:inline-table vs. FF display:inline

Liebes Forum,

leider macht mir heute Opera einen Strich durch meine CSS-Rechnung.

Auf der Schulleitungs-Seite unserer Schul-Homepage werden Tabellen mit Bildern und zugehörigen Bildunterschriften nicht immer inline angezeigt. Beabsichtigt ist eine Darstellung, in der die Tabellen wie Bilder in einem Fließtext laufend nebeneinander in einem zentrierten Textabsatz angeordnet werden. Sowohl in Opera, als auch im Firefox gelingt mir das, nur nicht eben in beiden gleichzeitig.

Opera braucht für die Tabellen ein
table.inline display:inline-table
während der Firefox (1.0.7) ein
table.inline display:inline
verlangt. Beide Browser verhalten sich im jeweils anderen Falle nicht wie beabsichtigt.

Nun meine Fragen:

  • Wie erreiche ich trotzdem bei beiden eine einheitliche Darstellung?
  • Ist das nun eine Fehlinterpretation des FF oder von Opera, oder gar ein Bug eines der beiden?

Ich freue mich über gute Ratschläge!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

  1. Hallo Felix,

    Opera braucht für die Tabellen ein
    table.inline display:inline-table
    während der Firefox (1.0.7) ein
    table.inline display:inline
    verlangt. Beide Browser verhalten sich im jeweils anderen Falle nicht wie beabsichtigt.

    Setz doch einfach beide Angaben hintereinander:

    table.inline {  
      display:inline;  
      display:inline-table;  
    }
    

    Und um dann auch noch den IE zufrieden zu stellen: dahinter dann noch wieder einen Conditional-Comment, mit dem du die Klasse noch einmal überschreibst:

    <!--[if IE ]>  
    <style type="text/css">  
    [code lang=css]  
    table.inline {  
      display:inline;  
    }
    

    </style><![endif]-->[/code]

    So habe ich das jedenfalls bei meinem letzten Projekt gelöst.

    Der IE am Mac brauchte dann auch noch zusätzlich eine serverseitige Lösung.

    Gruß Gernot

    1. Lieber Gernot,

      Setz doch einfach beide Angaben hintereinander:

      table.inline {

      display:inline;
        display:inline-table;
      }

      diese Angaben erzeugen das von mir gewünschte Ergebnis. VIELEN DANK!  
        
      Warum ist das so? Wenn der FF `display:inline`{:.language-css} bekommt, warum ändert er das dann anschließend nicht auf das folgende `display:inline-table`{:.language-css}? Und wenn ich die Reihenfolge ändere, dann ändert er sehr wohl von inline-table auf das folgende inline. Das verstehe, wer will...  
        
      Welcher Browser hat denn nun einen Bug? Ich tippe da mal auf den FF, bin aber zu faul um in der Buglist nachzusehen.  
        
      Jedefalls danke für den sehr hilfreichen Tipp!  
        
      Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/),  
        
      Felix Riesterer.
      
      1. hi,

        Warum ist das so?

        Weil Browser ihnen unbekannte Werte für CSS-Eigenschaften per Definition zu ignorieren haben.

        Wenn der FF display:inline bekommt, warum ändert er das dann anschließend nicht auf das folgende display:inline-table?

        inline kennt er, nimmt er.
        inline-table kennt er nicht, nimmt er nicht.

        Und wenn ich die Reihenfolge ändere, dann ändert er sehr wohl von inline-table auf das folgende inline.

        Nein, er "ändert" nichts.
        Er sieht zuerst inline-table - kennt er nicht, ignoriert er.
        Er findet inline - kennt er, nimmt er.

        Das verstehe, wer will...

        Du willst jetzt sicher auch :-)

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Lieber wahsaga,

          inline kennt er, nimmt er.
          inline-table kennt er nicht, nimmt er nicht.

          AHA! Jetzt verstehe ich. Ich hatte wohl auf der entsprechenden SelfHTML-Seite nicht aufmerksam genug auf die Browserunterstützungen geschaut... Aber nein! Ein solcher Sachverhalt wird dort nicht näher erwähnt! Weder in 8.1 noch in 8.1.1 steht, dass es bei den table-Angaben zu Browserunterschieden bei "vernünftigen" Browsern kommt.

          Das verstehe, wer will...
          Du willst jetzt sicher auch :-)

          Technisch gesehen, ja... aber kausal gesehen nein! Warum machen denn der FF und Opera da Unterschiede, wo keine zu sein haben?

          Opera scheint sich in diesem Falle korrekt zu verhalten, da "inline" für eine Tabelle nach dem Standard wohl unangebracht ist, da ja ihre Kindelemente nicht tabellarisch, sondern eben inline angezeigt würden. Vielleicht sollte ich tatsächlich mal im Firefox-Bugtracker nachsehen, ob dieser offensichtliche "Bug" schon repariert werden soll, oder ob ich da auf die 1.5er Version warten muss.

          Dir jedenfalls Dank für die Erleuchtung!

          Liebe Grüße aus Ellwangen,

          Felix Riesterer.