Probleme mit CSS

estadlbauer

Ich habe ein Problem mit der unterschiedlichen Darstellung einer Seite im
IE und Firefox/Mozilla und finde dazu nichts in den Foren.

Im Firefox wird bei der Darstellung die width-Eigenschaft unterdrückt,
wenn man zwei Texte nebeneinander darstellen will.
Wenn man die Text untereinander darstellen will, also ohne display:inline,
sieht es wieder gut aus.

Im IE wird es meiner Meinung nach richtig angezeigt!

Was ist der Fehler?
Und wie kann man es lösen?

Ich möchte es nicht in eine Tabelle reinschreiben!!!!
(was natürlich möglich wäre)

Gruß

--------------------------
Der Code ist folgender

HTML

<html>
<head>
<style type="text/css">
#bla {border: thin solid black; width: 100px; display: inline;}
#blu {border: thin solid black; width: 100px; display: inline;}
</style>
</head>


<body>


<p id="bla">Ein ganz anderer Text</p>
<p id="blu">Schon wieder ein anderer Text</p>


</body>
</html>

Alles anzeigen

Dr. Evil

Ein wesentliches Merkmal von Inline-Elementen ist, dass diese keine feste Breite haben dürfen. Dafür gäbe es seit CSS 2.1 inline-block. Das wird allerdings auch noch nicht von Firefox (bzw. Gecko) unterstützt.

Eventuell hilft dir aber ja auch eine CSS-Eigenschaft wie float?

Oder du setzt noch ein div außenrum (in deinem Beispiel ließe sich auch der body verwenden, aber vermutlich sind die beiden Absätze ja nicht der einzigen Kind-Elemente des body?), welchem du display: table verpasst und setzt deine Absätze auf display: table-cell. Da bin ich aber nicht sicher, wie gut der IE mit zurechtkommt... (Aber ist eh die hässlichste Methode! )

brain

Das mit dem inline-block klingt gar nich schlecht, das würde (hoffentlich) einige häufige Probleme lösen. Muss wohl doch mal wieder in die Specs reinschauen. Aber dazu gleich mal ne Frage: Warum tun sich Browserhersteller (egal welche) meistens so schwer mit Standard-Updates? Sollte doch eigentlich kein Ding sein ein paar neue CSS-Definitionen in die Engine einzufügen oder so...