Hat Mozilla doch CSS- Probleme?

[Der Dicki]

Hallihallo, alle zusammen!

Ich stehe gerade vor einem seltsamen Problem:

Auf meiner Seite http://www.ewetel.net/~tobias.hahner, aka http://www.dicki-web.de.vu benutze ich exzessiv CSS.

Bei meinem Problem geht es um die Seite
http://www.ewetel.net/~tobias.hahner/konventionen.html

Leider gab es erhebliche Probleme damit, daß verschiedene Elemente (hier img und span) die gleiche Klasse haben, und gleichzeitig in einem Dokument vorkommen:
span wird richtig angezeigt (mittig), img hingegen nicht...
Kommt in einem Dokument nur eins der beiden Elemente mit der Klasse "formel" vor, dann sieht Alles so aus, wie es soll.

Ich habe mir zwar damit helfen können, dem Bild die Klasse wieder wegzunehmen und es in ein entsprechendes span zu setzen, aber das kann es doch nicht sein, oder?

Da benutze ich extra Klassen, um so einem Problem vorzubeugen, und dann das... (IE 5.5 machts übrigens richtig)

Meine Frage also: Ist es ein Bug, oder ein Feature, daß Mozilla verschiedene Elemente mit gleichen CSS- Klassen unterschiedlich darstellt?

Um lästigen Quelltextsucherein vorzubeugen, hier der entsprechende Auszug aus meiner CSS- Datei (http://www.ewetel.net/~tobias.hahner/stil.css):

.formel {
 display: block;
 text-align: center;
}

Und die Elemente:
  <img class="formel" src=".....gif" alt="">
  <span class="formel">.....</span>

Viele liebe und fragende Grüße,
Der Dicki

PS: Bis auf eine Character- Encoding- Warnung ist das Dokument valide:
http://validator.w3.org/check?uri=http://www.ewetel.net/~tobias.hahner/konventionen.html
Das CSS ist auch valie:
<          http://jigsaw.w3.org/css-validator/validator?uri=http://www.ewetel.net/~tobias.hahner/stil.css>

[Utz]

Hi,

.formel {
display: block;
text-align: center;
}

Na ja, text-align macht für Bilder nicht wirklich Sinn, da geht's ja dann doch mehr um Text :-)
margin: auto; (bzw. margin-left: auto; margin-right: auto;) sollte für ein Bild eher das Angebrachte sein.

Grüße,

Utz

[Der Dicki]

Hallihallo!

Ja, das ging mir auch durch den Sinn. Ich habe das text5-align wirklich nur ungern benutzt, aus dem von Dir genannten Grund.

Tatsache ist aber, daß Mozilla das Bild trotzdem mittig darstellt, wenn nicht irgendwo anders im Dokument noch ein span mit der gleichen Klasse vorkommt.

Viele liebe Grüße,
Der Dicki

PS: Werde mal sehen, ob die margin- Angaben für Bild und Text gleichermassen funktionieren...

[Bio]

Sup!

Vielleicht machst Du einen minimalen Test-Case?

Gruesse,

Bio

[Der Dicki]

Hallihallo!

Vielleicht machst Du einen minimalen Test-Case?

Ich weiß zwar nicht genau, was Du meinst, aber ich tippe mal auf "Test- Datei"...

Eine solche habe ich hier mal hingestellt:
http://www.ewetel.net/~tobias.hahner/test.html

Ich hoffe, die ist minimal genug...

Viele liebe Grüße,
Der Dicki

PS: Ich habe den Vorschlag von Utz auch mal in die Tat umgesetzt, sieht genauso sch... aus: http://www.ewetel.net/~tobias.hahner/test2.html

[herbalizer]

Hi!

Das leigt wohl daran, das span als Blockelement so wie div oder p vom Mozilla eine Breite von 100% zugewiesen bekommen. Somit werden Inlineelemente im span mittig ausgerichtet während der span selbst 100% breit ist. Das img hat aber immer eine Breite die sich aus den natürlichen Abmessungen des Bildes ergeben, ist also nicht 100% breit und wird somit richtiger Weise rechts angeordnet, da es als Blockelement gesehen wird. Das gilt auch dann wenn das img als Blockelement im span steht. Das verhalten läst sich ganz gut nachvollziehen wenn man den Elementen ein Border mitgibt.

Du mußt also margin: auto hinzufügen.

Zum probieren:
.formel {
  display: block;
  text-align: center;
  border: 2px solid red;
  margin: auto;
}

<span class="formel">Text</span>
<img src="gonfish.png" alt="" class="formel" />
<span class="formel"><img src="gonfish.png" alt="" class="formel" /></span>
<span class="formel"><img src="gonfish.png" alt="" /></span>

Gruß Herbalizer

[Der Dicki]

Hallihallo!

Danke, es klappt!
http://www.ewetel.net/~tobias.hahner/test3.html

Dann kann ich ja jetzt die Quelltexte wieder entrümpeln ;)

Viele liebe Grüße,
Der Dicki

[herbalizer]

Hi!

Danke, es klappt!
http://www.ewetel.net/~tobias.hahner/test3.html

Bitte bitte. Du kannst ja alternativ für die Geckos auch MathML einsetzen :)

Gruß Herbalizer

[Der Dicki]

Hallihallo!

An die Verwendung von Math ML habe ich auch schon gedacht. Dafür hätte ich sogar in Kauf genommen, daß man die Formeln dann nur noch mit "Geckos" sehen kann.
Aber leider ist das an zwei Dingen gescheitert:

1. Ich habe kein Programm, mit dem ich MathML erstellen kann.
      (Wie man an der .de.vu erkennen mag, fehlt mir an allen Ecken und Enden das nötige Kleingeld,
      und kostenlose Programm konnte ich nicht finden.)

Also habe ich mir gedacht: "Sch... drauf, dann schreibe ich die Formeln eben von Hand",
und da folgt dann Problem Nr. 2:

2. Ich bin anscheinend zu blöd, MathML einzubinden.
      Ich weiß, daß mein Mozilla MathML "versteht" (habe es auf Kai Lahmanns Seite gesehen),
      aber wenn ich das selber versuche, zeigt er nur Mist an.

Leider ist mozilla.linuxfaqs.de nicht mehr online, so daß ich mich nicht an Beispielen orientieren kann,
und mit den Beschreibungen vom W3C kann ich nichts anfangen.
Die beschreiben zwar Alles wunderschön, aber für die Darstellung wird wieder "normales" HTML mit Schummeleien verwendet (damit es auch ja Jeder sehen kann...).

Wenn Du mir eine Seite nennen könntest, wo "echtes" MathML drauf zu finden ist, wäre mir sehr geholfen... Dann könnte ich da mal den Quelltext auseinander rupfen und es auch selber mal probieren.
So lange werde ich mich wohl leider mit gifs begnügen müssen...

Viele liebe Grüße,
Der Dicki

[herbalizer]

Hallöchen

1. Ich habe kein Programm, mit dem ich MathML erstellen kann.
      (Wie man an der .de.vu erkennen mag, fehlt mir an allen Ecken und Enden das nötige Kleingeld,
      und kostenlose Programm konnte ich nicht finden.)

Amaya und evtl. der Mozilla-Composer.

2. Ich bin anscheinend zu blöd, MathML einzubinden.
      Ich weiß, daß mein Mozilla MathML "versteht" (habe es auf Kai Lahmanns Seite gesehen),
      aber wenn ich das selber versuche, zeigt er nur Mist an.

Auf der MathML-Project-Page von Mozilla gibts diverse Beispielseiten: http://www.mozilla.org/projects/mathml/
Am besten verwendet man die XHTML1.1 + MathML2.0 + SVG1.1 - DTD http://www.w3.org/TR/XHTMLplusMathMLplusSVG/ welche auch eine Beispieldatei enthält.

Allerdings sollten Dokumente als xml oder xhtml+xml ausgeliefert werden sonst ignoriert das der Mozilla.

Gruß Herbalizer

[Bio]

Sup!

Womit bewiesen wäre: Der IE macht es falsch, nicht richtig... Mozilla rules!

Gruesse,

Bio

[Der Dicki]

Hallihallo, Bio!

Womit bewiesen wäre: Der IE macht es falsch, nicht richtig... Mozilla rules!

(Zitat Yoda:) "Dem stimme ich zu!" (Zitat Ende).

Aber vielleicht ist das ja kein Bug, sondern ein Feature! Der erste Browser, der die Gedanken des Seitenbastlers lesen kann ;)

Viele liebe Grüße,
Der (etwas schlauere*] ) Dicki

*] soll heißen: schlauer als zuvor, nicht schlauer als Du :)

[Bio]

Sup!

Womit bewiesen wäre: Der IE macht es falsch, nicht richtig... Mozilla rules!
(Zitat Yoda:) "Dem stimme ich zu!" (Zitat Ende).

Na, wenn YODA das sagt ;-)

Aber vielleicht ist das ja kein Bug, sondern ein Feature! Der erste Browser, der die Gedanken des Seitenbastlers lesen kann ;)

Das hat PAF auch immer gesagt, und ich fand es schon immer schlimm, wie der IE "korrigierend" eingreift, damit falscher Code richtig aussieht.

Viele liebe Grüße,
Der (etwas schlauere*] ) Dicki

*] soll heißen: schlauer als zuvor, nicht schlauer als Du :)

Och, in Sachen CSS bist Du sicher "schlauer" als ich; ich bin gerade nicht "im Training" - und was hätte ich vom Forum, wenn nicht lauter partiell schlauere Leute hier wären?

Gruesse,

(viele, liebe, ich will ja nicht knausern... *g* )

Bio

[Kai Lahmann]

hi

Aber vielleicht ist das ja kein Bug, sondern ein Feature! Der erste Browser, der die Gedanken des Seitenbastlers lesen kann ;)

so sieht es auch MS wohl - nervt aber, wenn man dann mal was abgedrehteres vor hat und der IE eben nicht weiß, was man von ihm will.

Grüße aus Bleckede

Kai

[Der Dicki]

Hallihallo!

[...] wenn man dann mal was abgedrehteres vor hat und der IE eben nicht weiß, was man von ihm will.

Was könnte abgedrehter sein, als Bilder mit "text-align" positionieren zu wollen ;) ?

Viele liebe Grüße,
Der Dicki