FireFox stellt DIVs mit DISPLAY:INLINE falsch dar.

[flashnfantasy]

Schaut euch mal diesen simplen Code-Schnipsel an:

<div style="border: 1pt solid green;">
<div style="border: 1pt solid red; width:120; display: inline; vertical-align: top;">a</div>
<div style="border: 1pt solid blue; width: 20pt; display: inline;">b<br>c</div>
</div>

Bei Opera und IE wird in einem grünen Rahmen ein
rotes umrandetes a
und ein blau umrandetes b über c dargestellt.
Beide stehen hintereinander und sind nach oben ausgerichtet

Das a hat zudem ein Feld von 120pt Länge.

Das macht Firefox nun daraus:

• es kürzt das Feld vom a auf die minimale Größe
• es bricht das b und c so um, daß das c unter dem a steht

Für jede Idee, wie man das für alle Browser einheitlich aussehen lassen könnte wäre ich dankbar...

[Malleus]

Hallo,
wenn ich mich jetzt nicht ganz täusche, ist es laut W3C nicht möglich, einem inline-Element eine Breite zu geben. Aus diesem Grund macht das wohl FF "richtig" und die anderen "falsch".

tschau

Frank

[Marc Reichelt]

Hallo Malleus,

wenn ich mich jetzt nicht ganz täusche, ist es laut W3C nicht möglich, einem inline-Element eine Breite zu geben. Aus diesem Grund macht das wohl FF "richtig" und die anderen "falsch".

Außerdem steht da:
width:120;
Was ist es denn nun, sind es Äpfel, Birnen oder Bananen? ;-)

Nichtsdestotrotz wird die Breite wegen "display:inline;" ignoriert, und das ist wie du schon gesagt hast richtig. Lasse ich "display:inline;" bei beiden Elementen weg (also steht dann quasi "display:block;" da), so sieht das dann so aus:

..........
.a       .
..........
.....
.b  .
.c  .
.....

Laut flashnfantasy soll es aber wahrscheinlich eher so aussehen, dass das b rechts neben dem a erscheint - und das c genau unter dem b.

Vielleicht sucht er float?

Bis dann!

Marc Reichelt || http://www.marcreichelt.de/

[flashnfantasy]

Das mit den 120 ist egal, weil dann per default px eingesetzt wird.
Abgesehen davon klappt meine Idee auch mit Angaben nicht.

So wie @Marc es schon richtig sagt, ich will folgende Darstellung erreichen:

+++

#a# +b+

+c+

+++

Noch einfacher als float wäre es, eine Table zu nehmen.
Ich hatte aber gehofft, daß man DIVs mit gewählter Länge und beliebigen Inhalt (also auch Zeilenumbrüche) hintereinander schreiben könnte.

Abgesehen davon hilft es mir nichts, wenn ihr mich darauf hinweist, daß IE und Opera das fälschlicherweise korrekt darstellen.
Ich will Lösungen und keine Probleme !!!

[MudGuard]

Hi,

Das mit den 120 ist egal, weil dann per default px eingesetzt wird.

Nein. Korrekte Browser ignorieren (wie im Standard vorgesehen) fehlerhafte Angaben.

Abgesehen davon klappt meine Idee auch mit Angaben nicht.

Logisch, weil display:inline dazu führt, daß width ignoriert werden muß.

So wie @Marc es schon richtig sagt, ich will folgende Darstellung erreichen:

+++

#a# +b+

+c+

+++

Noch einfacher als float wäre es, eine Table zu nehmen.
Ich hatte aber gehofft, daß man DIVs mit gewählter Länge und beliebigen Inhalt (also auch Zeilenumbrüche) hintereinander schreiben könnte.

Dann nimm doch float.

Abgesehen davon hilft es mir nichts, wenn ihr mich darauf hinweist, daß IE und Opera das fälschlicherweise korrekt darstellen.

Sie stellen es fehlerhaft dar, nicht korrekt.

Ich will Lösungen und keine Probleme !!!

Dir wurden Lösungen genannt. Warum ignorierst Du sie?

cu,
Andreas

[flashnfantasy]

Habe das mit Float bereits probiert,
bei so einem einfachen Problem wäre das auch die Lösung -

ich verschachtele aber eine Baumstruktur, innerhalb der Divs sind wieder Divs usw...
Werde es jetzt nochmals damit versuchen. Das Problem ist das clear am Ende, da macht Firefox wieder eine Ausnahme und schreibt Float-Elemente über die umgebende DIV hinaus !

Müsste also alles mit einer DIV und dem Style-Element clear:both beenden. Und irgendwie reagiert FireFox da auch nicht so, wie ich es wollte.

Letztlich hatte ich gehofft, es gäbe eine einfachere Lösung, bei der ich DIVs aneinanderreihen könnte :-(

[MudGuard]

Hi,

ich verschachtele aber eine Baumstruktur, innerhalb der Divs sind wieder Divs usw...
Werde es jetzt nochmals damit versuchen. Das Problem ist das clear am Ende, da macht Firefox wieder eine Ausnahme und schreibt Float-Elemente über die umgebende DIV hinaus !

Logisch. Floatende Elemente beeinflussen die Größe des umgebenden Elements nur dann, wenn das umgebende Element selbst gefloatet ist.

Für Baumstrukturen bieten sich sonst verschachtelte Listen an.

cu,
Andreas

[flashnfantasy]

Hi,

es hat für den Start auch gereicht, DIVs zu schachteln.

ähnlich wie man hier in dem Forum eine Baumstruktur erzeugt.

Was ich versuche sind aber eine Art graphische Baumstruktur reinzubringen.
Und bei einem Feld handelt es sich immer um ziemlich langen Text, weswegen man bei Listen dann sehr schnell die Übersicht über die Tiefe verliert...

cu flash

[wahsaga]

hi,

Und bei einem Feld handelt es sich immer um ziemlich langen Text, weswegen man bei Listen dann sehr schnell die Übersicht über die Tiefe verliert...

und nichtssagende divs sind da übersichtlicher ...?

gruß,
wahsaga

[flashnfantasy]

hi,

sobald du den DIVS ne Border gibst - ja.

Es müssen halt noch Ästchen drangebastelt werden (wieder DIVs mit Border).

Klar könnte man das ganze auch über Grafiken machen...
Aber die haben leider keine dynamische Länge !

Wenn du mal ein Beispiel sehen willst, was ich machen will, dann schau mal das Forum von single.de an.

Da sind alle Beiträge nach einer Baumstruktur geordnet, und lange Linien zeigen an, welcher Beitrag auf welchen referiert.

[Ashura]

Hallo flashnfantasy.

sobald du den DIVS ne Border gibst - ja.

Die kannst du <li> auch verpassen...

Gruß, Ashura

[Marc Reichelt]

Hallo Ashura,

Die kannst du <li> auch verpassen...

Ich denke auch, dass flashnfantasy mit Listen sein Vorhaben am Besten realisieren kann.
Wie Listen mit CSS formatiert aussehen können, sieht man auf vielen Webseiten - so z.B. auch http://www.csszengarden.com/ und sogar auf meiner Webseite.

Bis dann!

Marc Reichelt || http://www.marcreichelt.de/

[wahsaga]

hi,

Wenn du mal ein Beispiel sehen willst, was ich machen will, dann schau mal das Forum von single.de an.

diese seite ist derart unübersichtlich, dass ich dort kein forum entdecken kann.
ja, nicht mal [strg]+[f] gefolgt von "forum" lässt mich auf ein solches stossen.

gruß,
wahsaga

[Marc Reichelt]

Hallo wahsaga,

Wenn du mal ein Beispiel sehen willst, was ich machen will, dann schau mal das Forum von single.de an.

diese seite ist derart unübersichtlich, dass ich dort kein forum entdecken kann.
ja, nicht mal [strg]+[f] gefolgt von "forum" lässt mich auf ein solches stossen.

Das Suchwort heißt "Foren".

*lol*

Marc Reichelt || http://www.marcreichelt.de/

[flashnfantasy]

<div style="border: 1pt solid green;">
<div style="border: 1pt solid red; width: 120pt; vertical-align: top; float:left;">a</div>
<div style="border: 1pt solid blue; width: 30pt; float:left;">b<br>c</div>
<div style="clear:both;"></div>
</div>

funktioniert jetzt auf allen Browsern...
entscheident ist die letzte DIV.

Nun mal sehen, ob ich damit auch nen kompletten Baum aus paarhundert Elementen aufbauen kann ;-)

[Marc Reichelt]

Hallo flashnfantasy,

Nun mal sehen, ob ich damit auch nen kompletten Baum aus paarhundert Elementen aufbauen kann ;-)

Wenn du einen kompletten Baum im Stil des Windows Explorers haben willst kannst du dir eventuell mal die "Lösung" auf der Seite der Hohen Landesschule, meiner ehemaligen Schule ansehen:
http://www.hohe-landesschule.de/index2.html

Im linken Frame werden für genau diese Zwecke spacer verwendet, die in so einem Fall wie du ihn jetzt hast auch denke ich am besten gebraucht werden können.

Das Prinzip stammt von einem JavaScript-Menü, allerdings haben wir im Laufe der Zeit das JavaScript rausgenommen: http://www.rheinbreitbach.net/js-menue/

Bis dann!

Marc Reichelt || http://www.marcreichelt.de/

[flashnfantasy]

Ja, danke,

so ein Menü hatte ich auch mal...

aus folgenden Gründen geht das aber nicht für meinen Fall:

• Wenn die Info aus mehreren Zeilen besteht, dann ist die Linie (meist ja eine kleine Grafik) unterbrochen. In meinem Fall sind das ja meist sogar ganze Artikel.
• zudem will ich die Info ja auch etwas gliedern, und da haben meine grafischen Elemente ihre Positionen so verschoben, daß ein Baum á la Windows-Explorer nicht mehr zu erkennen war.

Wenn es ein gutes Beispiel für mein Ziel gibt, dann schaut mal das Forum von Single.de an.

[Marc Reichelt]

Hallo flashnfantasy,

Wenn es ein gutes Beispiel für mein Ziel gibt, dann schaut mal das Forum von Single.de an.

*uahhh* - wo ist da ein _gutes_ Beispiel?

Bis dann!

Marc Reichelt || http://www.marcreichelt.de/

[Cheatah]

Hi,

So wie @Marc es schon richtig sagt, ich will folgende Darstellung erreichen:

+++

#a# +b+

+c+

+++

also, ich würde mich doch schon sehr wundern, wenn bei dem hier von
      mir geschriebenen Fließtext beim Erreichen des rechten
      Zeilenendes nicht wieder ganz links begonnen würde, und das
      nur, weil irgendwo mittendrin ein Komma steht.

Abgesehen davon hilft es mir nichts, wenn ihr mich darauf hinweist, daß IE und Opera das fälschlicherweise korrekt darstellen.

Stimmt ja auch nicht, sie stellen es fälschlicherweise falsch dar.

Cheatah

[Candid Dauth]

Hallo du da draußen,

width:120;
Was ist es denn nun, sind es Äpfel, Birnen oder Bananen? ;-)

Mathematisch gesehen sind das genau 12000 %. Und da kann flashnfantasy von Glück reden, dass das CSS-technisch ungültig ist… ;-)

Grüße von hier drinnen, aus Biberach an der Riss,
Candid Dauth (Dogfish)

[daniel84]

Hallo Candid,

width:120;
Was ist es denn nun, sind es Äpfel, Birnen oder Bananen? ;-)

Mathematisch gesehen sind das genau 12000 %.

Das halte ich für ein Gerücht.

Gruss aus Luzern,
Daniel

[Alexander Brock]

Hallo daniel84,

Mathematisch gesehen sind das genau 12000 %.

Das halte ich für ein Gerücht.

Ist es aber nicht. Überlege dir doch mal, was Prozent auf deutsch heißt.

Gruß
Alexander Brock

[daniel84]

Hallo Alexander Brock,

Mathematisch gesehen sind das genau 12000 %.

Das halte ich für ein Gerücht.

Ist es aber nicht. Überlege dir doch mal, was Prozent auf deutsch heißt.

Schei**e! Ich hatte es mir extra noch überlegt... Ich stelle mich jetzt in die Ecke und schäme mich - sorry an Candid!

Gruss aus Luzern,
Daniel

[Malleus]

Hallo Marc, Hallo Flashfantasy,
ich hab' ein bißchen rumgespielt:

Das müßte mit allen drei Browsern (MSIE, FF, O7) gehen:

<div style="border: 1pt solid green;height:40pt">
<div style="border: 1pt solid red; width:120pt; float:left; vertical-align: top;">a</div>
<div style="border: 1pt solid blue; width: 20pt;float:left">b<br>c</div>
</div>

Beachte aber, daß Du dem aüßeren DIV eine Höhe angibst:

Zu dem Punkt mit "width:120". Meiner Erfahrung nach wird da immer als Default "px" genommen, 120 Prozent sind "width:120%"

Tschau

Malleus

[MudGuard]

Hi,

Zu dem Punkt mit "width:120". Meiner Erfahrung nach wird da immer als Default "px" genommen,

Nur in dummen Browsern bzw. im Dumpfbackenmodus.

Sonst wird korrekt die Angabe ignoriert.

cu,
Andreas

[MudGuard]

Hi,

<div style="border: 1pt solid green;">
<div style="border: 1pt solid red; width:120; display: inline; vertical-align: top;">a</div>

width:120; ist an sich schon mal unsinnig. Meinst Du 120 Elefantenrüsseldurchmesser?
display:inline impliziert, daß width und height ignoriert werden _müssen_.

<div style="border: 1pt solid blue; width: 20pt; display: inline;">b<br>c</div>

Hier ist zwar die width-Angabe in sich korrekt, muß aber ebenso ignoriert werden.

Bei Opera und IE wird in einem grünen Rahmen ein
rotes umrandetes a
und ein blau umrandetes b über c dargestellt.
Beide stehen hintereinander und sind nach oben ausgerichtet
Das a hat zudem ein Feld von 120pt Länge.

Diese Browser machen es also falsch.

Das macht Firefox nun daraus:

• es kürzt das Feld vom a auf die minimale Größe

Also so wie im Standard vorgeschrieben.

• es bricht das b und c so um, daß das c unter dem a steht

Logisch, Da ist ja auch ein Zeilenumbruch vor dem c.

Für jede Idee, wie man das für alle Browser einheitlich aussehen lassen könnte wäre ich dankbar...

Hm. Es könnte ggf. helfen, IE und Opera in den Standardsmode zu versetzen.

cu,
Andreas