Firefox Probleme mit span-Tag?

Internet Browser
1

Hi!

Ich teste gerade ein HTML/PHP-Programm unter verschiedenen Browsern. Beim Firefox ist mir aufgefallen, daß der Browser die Objekte im Body-Bereich nicht sauber positioniert. Ich habe zwei Eingabefelder für ein Login (f1 und f2) sowie zwei links vor den Eingabefeldern befindliche Texte als Labels („Name…“ und „Passwort“). Alle vier Objekte sind durch span-Tags exakt positioniert. Im MS-IE 6.0 werden Texte und Felder korrekt positioniert. Rufe ich das gleiche Programm im Firefox 1.0 auf, steht das zweite Feld fast auf der Höhe des ersten Textes (d.h. das Feld f2 steht hinter „Name“ statt hinter Passwort, während f1 weiter oben ziemlich in der Walachei rumsteht).

Woran liegt das?

Mein Code sieht so aus:

Name…

Passwort…

Grüße
Heinrich

2

Hi,

Ich teste gerade ein HTML/PHP-Programm unter verschiedenen
Browsern. Beim Firefox ist mir aufgefallen, daß der Browser
die Objekte im Body-Bereich nicht sauber positioniert.

merke Dir folgende Faustregel: Wenn ein Mozilla etwas scheinbar falsch macht, liegt der Fehler bei Dir.

Alle vier Objekte sind durch span-Tags exakt positioniert.

Dir ist aber schon klar, dass man z.B. nicht in schachteln kann, oder? Validiere Deine Codes, die Validatoren findest Du unter http://www.w3.org/. Erst wenn dort keine HTML- und CSS-Fehler angezeigt werden, lohnt es sich, Ursachen für Darstellungsfehler zu suchen. Und die findest Du gewöhnlich im IE, nicht im Firefox.

Im MS-IE 6.0 werden Texte und Felder korrekt positioniert.

Irrtum. Nur wie gewünscht, aber nicht korrekt.

Woran liegt das?

In erster Linie an invalidem Code. in ist nicht erlaubt. In zweiter Linie daran, dass sich die Basis-Stylesheets für HTML bei den verschiedenen Browsern voneinander unterscheiden. In dritter Linie an einer Vielzahl IE-Bugs.

Btw: Auf absolute Positionierung solltest Du _unbedingt_ verzichten, solange Du nicht mit dem Brustton der Überzeugung von Dir behaupten kannst, sie verstanden zu haben.

Cheatah

3

Hier werden Sie geholfen:
Ein umfassendes Kompendium, das unter anderem auch die Unterschiede der einzelnen Browser erläutert:
http://selfhtml.org/
Pflichtlektüre für jeden Homepagebastler!

4

Hi!

Ich teste gerade ein HTML/PHP-Programm unter verschiedenen
Browsern. Beim Firefox ist mir aufgefallen, daß der Browser
die Objekte im Body-Bereich nicht sauber positioniert.

merke Dir folgende Faustregel: Wenn ein Mozilla etwas
scheinbar falsch macht, liegt der Fehler bei Dir.

Vermerkt.

Btw: Auf absolute Positionierung solltest Du _unbedingt_
verzichten, solange Du nicht mit dem Brustton der Überzeugung
von Dir behaupten kannst, sie verstanden zu haben.

Nun, ich kann weder mit Brustton noch mit Überzeugung dienen, nur mit einem Problem:

Im Body-Bereich liegt eine recht große Grafik. Die Eingabefelder des form-Tags sollen so positioniert werden, dass sie zum Hintergrund passen (z.B. sollen die beiden Eingabefelder genau auf einer in der Grafik befindlichen Tür stehen und nicht auf der Wand links oder rechts daneben). Wie mache ich so etwas _ohne_ absolute Positionierung?

Grüße
Heinrich

5

Hi,

Im Body-Bereich liegt eine recht große Grafik. Die
Eingabefelder des form-Tags sollen so positioniert werden,
dass sie zum Hintergrund passen (z.B. sollen die beiden
Eingabefelder genau auf einer in der Grafik befindlichen Tür
stehen und nicht auf der Wand links oder rechts daneben).

eieiei … Nimm’s mir bitte nicht übel, aber das klingt nach keinem guten Konzept :smile: Ist die Kombination aus Grafik und Position des Eingabefeldes zum Verständnis wichtig?

Wie mache ich so etwas _ohne_ absolute Positionierung?

Auch wenn es vielleicht möglich wäre: Wahrscheinlich gar nicht. Trotzdem, wenn Du Dir nicht wirklich _sicher_ bist, dass Du die absolute Positionierung verstanden hast, solltest Du auf sie verzichten. Nimm als Beispiel folgende Frage: Nach welchem Element richtet sich ein mit position:absolute ausgerichtetes Element?

Cheatah

6

Hi!

eieiei … Nimm’s mir bitte nicht übel, aber das klingt nach
keinem guten Konzept :smile: Ist die Kombination aus Grafik und
Position des Eingabefeldes zum Verständnis wichtig?

Stell dir folgendes vor: eine Grafik stellt ein halbes Fußballfeld dar. Unten die Torauslinie, der Fünfmeterraum, der Strafraum. Dann das Spielfeld bis zur Mittellinie. Soweit alles klar?
Jetzt willst du deine Mannschaft aufstellen. Ein Eingabefeld steht im Fünfmeterraum und repräsentiert den Torwart. Davor stehen die Eingabefelder für die Verteidiger, davor jene für die Mittelfeldspieler. Und unterhalb der Mittellinie die Eingabefelder für die Stürmer. Die Felder korrespondieren von ihrem Inhalt her direkt zur Grafik.
Klar kann man das anders darstellen - wär aber wohl optisch ziemlich öde.

Im vorliegenden Fall geht es um einen Login-Dialog, wo Name und Passwort eingegeben werden müssen. Diese Eingabefelder sollen so in einer Grafik erscheinen, dass sie auf einer Tür zu sehen sind (als wären sie ein Namensschild auf der Tür). Sicher geht das auch hier anders, aber der User soll ja ein gewisses Feeling bereits bei seinem Login haben.

Wie mache ich so etwas _ohne_ absolute Positionierung?

Auch wenn es vielleicht möglich wäre: Wahrscheinlich gar
nicht. Trotzdem, wenn Du Dir nicht wirklich _sicher_ bist,
dass Du die absolute Positionierung verstanden hast, solltest
Du auf sie verzichten. Nimm als Beispiel folgende Frage: Nach
welchem Element richtet sich ein mit position:absolute
ausgerichtetes Element?

Antwort: die „position:absolute“ gilt in Relation zum Parent.
Oberste Ebene, also oberstes Parent, ist der Body-Bereich. In den Body kann ich mittels Container positionieren. Dieser Container ist ein child des parent . In einen Container wiederum kann ich weitere Container bzw. grafische Elemente legen. Damit wird das child des zum parent eines oder anderen Elementes. Die 0/0-Koordinate ist die linke obere Ecke des jeweiligen Containers. Richtig beantwortet?

Grüße
Heinrich

7

Hi,

Stell dir folgendes vor: eine Grafik stellt ein halbes
Fußballfeld dar. […]

okay. Wenn ich das richtig sehe, gibt es also keinen Informationsverlust, wenn die Elemente falsch positioniert sind oder die Grafik nicht angezeigt wird. Das ist gut, denn alles andere wäre kritisch.

Nach welchem Element richtet sich ein mit position:absolute
ausgerichtetes Element?

Antwort: die „position:absolute“ gilt in Relation zum Parent.

Falsch. Es richtet sich nach dem innersten Vorfahrenelement, welches eine von static unterschiedliche position-Angabe besitzt, bzw. bei Nichtvorhandensein eines solchen nach dem Viewport.

Dies ist ein sehr grundlegendes Konzept der absoluten Positionierung. Dass Du es nicht kennst zeigt, dass bei Dir noch Nachholbedarf herrscht, welchen Du unbedingt erfüllen solltest, bevor Du _wichtige_ Formatierungen mit position:absolute durchführst. Bis dahin solltest Du Dich also auf einfache Dinge beschränken, bei denen „nicht viel schief gehen kann“. Achte beim Erlernen der Technik insbesondere auf die Auswirkungen auf display, width:auto und margin:auto, Floating, enthaltene Elemente, Elemente außerhalb des absolut positionierten, sowie das Konzept der Collapsing Margins. Die Kapitel 9.8, 10.3 und 10.6 des CSS/2.1-Standards beim W3C solltest Du unbedingt verstanden haben.

In den Body kann ich mittels Container positionieren.

CSS unterscheidet nicht zwischen HTML-Elementen. Was mit geht, geht auch mit
, , , und . Das einzige, was man schwerlich beeinflussen kann ist, ob es sich um ein Replaced oder Non-Replaced Element handelt, _alles_ andere hat man unter Kontrolle. Natürlich vorbehaltlich Browser-Bugs, die da einige Ausnahmen bewirken, welche einem zugegebenermaßen das Leben ziemlich schwer machen können :smile:

Cheatah