Firefox und float

G

Guest

Guest
Hallo,

Nachdem Firefox im DOM-Tree-Klettern versagt, werden Elemente, die mit float positioniert werden, auch nicht mehr richtig gerendert.

Das stört besonders bei inputs und links, die dann nicht funktionieren.

Hat jemand dazu einen guten workaround oder muss man wirklich wieder tables schreiben ? Version 1.5 war echt besser.
 
QUOTE
werden Elemente, die mit float positioniert werden, auch nicht mehr richtig gerendert.



Es gibt doch Millionen Websites welche mit Float arbeiten, kann mir kaum vorstellen dass Firefox bei so einem Basis-Attribut Probleme macht. Vielleicht postest du mal den Code und das erwartete Resultat bzw. den Firefox-Fehler als Screenshot.
 
wir benutzen hier sehr oft layer basierende design umsetzungen - float hat im firefox noch nie wirkliche probleme gemacht. vielleicht solltest du den fehler erstmal bei dir suchen, und nicht einfach davon ausgehen, dass ein oft genutzter, beliebter browser (der nicht von ms ist) ein css grundelement nicht richtig umsetzt.
 
okay einen Augenblick
dry.gif
 
CODE
<div class=leftbutton style="float:right;padding-right:2em">
<A HREF="#" onClick="cp.select(document.send.forcolor,'pick');return false;" NAME="pick" ID="pick"><?php print $mehrFarben ?></A><br />
<input id=fg7 onclick="reset_color(this)" style="display:inline;position:relative;text-align:center;margin-right:2em;color:<?php print $_POST['forcolor'] ?>;background-color:<?php print $_POST['backcolor'] ?>" type="text" name=forcolor maxlength=7 value="<?php print $_POST['forcolor'] ?>">
</div>



<div class=leftdiv>
<div class=leftbutton><input onclick="reset_color(this)" id=fg0 type="radio" value="#FFFFFF" name=forgroundcolor <?php if($_POST['forgroundcolor']=='#FFFFFF')print 'checked'; ?>><span style="color:white;"><?php print $col[1] ?></span></div>
<div class=leftbutton><input onclick="reset_color(this)" id=fg1 type="radio" value="#0000FF" name=forgroundcolor <?php if($_POST['forgroundcolor']=='#0000FF')print 'checked'; ?>><span style="color:blue"><?php print $col[2] ?></span></div>
<div class=leftbutton><input onclick="reset_color(this)" id=fg2 type="radio" value="#FF0000" name=forgroundcolor <?php if($_POST['forgroundcolor']=='#FF0000')print 'checked'; ?>><span style="color:red"><?php print $col[3] ?></span></div>
<div class=leftbutton><input onclick="reset_color(this)" id=fg3 type="radio" value="#FFFF00" name=forgroundcolor <?php if($_POST['forgroundcolor']=='#FFFF00')print 'checked'; ?>><span style="color:yellow;"><?php print $col[4] ?></span></div>
<div class=leftbutton><input onclick="reset_color(this)" id=fg4 type="radio" value="#CC6600" name=forgroundcolor <?php if($_POST['forgroundcolor']=='#CC6600')print 'checked'; ?>><span style="color:salmon"><?php print $col[5] ?></span></div>
<div class=leftbutton><input onclick="reset_color(this)" id=fg5 type="radio" value="#00FF00" name=forgroundcolor <?php if($_POST['forgroundcolor']=='#00FF00')print 'checked'; ?>><span style="color:green"><?php print $col[6] ?></span></div>
<div class=leftbutton><input onclick="reset_color(this)" id=fg6 type="radio" value="#000000" name=forgroundcolor <?php if($_POST['forgroundcolor']=='#FF0000' || $_POST['forgroundcolor']=='')print 'checked'; ?>><span style="color:black"><?php print $col[7] ?></span></div>
</div>






Das 1. Div mit einem text und einem text-input hat nun einen float:right. Normalerweise kommt dieser container links ( float:left) neben die radio-buttons, aber im ff keine Chance.

Bei ie und opera kein prob.

Nur für ff : Also float:right und vor die anderen Container mit dem Ergebnis das der anchor text aus dem a-tag fliegt.

Ergebnis: Der hover und click event liegen als schmale Linie über dem text.
Diese unerreichbare Linie kriegt man auch beim besten Willen nicht breiter.


In den nächsten containern sind radio-buttons. Ohne div nur mit span wird der Text beim Ändern der Seitengrösse über die Buttons gelegt. ( millionenfach gesehen)

Lass ich das div floaten funktionieren die Buttons nur im ff nicht mehr.

Also display inline: Hier hab ich Glück gehabt, da der Text neben den Buttons steht.
Wäre ein Zeilenumbruch zwischen buttons und Text könnte ich extra für ff einen table mit Zellen für jeden Radio-Button und jeden Buttontext schreiben.


2. Meine Startseite habe ich umgeschrieben.
Beim hovern über einige links wird ein Div-Container gezeigt.
Der a-tag ist als block-Element definert, sodass eigentlich keine Probleme auftauchen sollten. In IE und Opera tauchen auch keine Probleme auf, nur im ff bricht die Seite bei Einfügen eines p-tag vollkommen zusammen und es wird tatsächlich nichts mehr gerendert.
Der p-tag sollte aber durchaus in Block-Elemente eingefügt werden können.


3. DOM

Mach mal
obj.parentNode.parentNode.lastChild.firstChild
oder
obj.parentNode.parentNode.childNodes[x].lastChild

Im Ie kein Problem. Mit ff kann man nur aufwärts oder abwärts navigieren, beides geht nicht.

4. DOM

ein inzwischen reparierter Bug für mit dem generierte DOM Forms:

Mit jedem anderen Browser sieht das so aus:

CODE <FORM><INPUT TYPE='TEXT'></FORM>

in ff kommt das dabei raus:

CODE <FORM></FORM><INPUT TYPE='TEXT'>


Die Form-Tags hatten die anderen Element nicht eingeklammert.
Wie kann man denn so einen Mist als downlaod anbieten.
Diese Probs gab es bei 1.5 nicht.


 
Fakt ist

CODE
<div style="float:left"><input type="text"></div>



und der input funktioniert im ff nicht

auch nicht, wenn man wie so häufig extra für ff position:relative setzt.
 
Entweder habe ich die beschriebene Problematik noch nicht ganz verstanden, oder dein Code ist noch nicht vollständig, um Anzeigefehler zu demonstrieren. Das hier kann ich z.B. nicht nachvollziehen:

QUOTE Das 1. Div mit einem text und einem text-input hat nun einen float:right. Normalerweise kommt dieser container links ( float:left) neben die radio-buttons, aber im ff keine Chance.

Bei ie und opera kein prob.


In Opera 9.2, Firefox 2.0 und IE 6 erkenne ich keine Unterschiede, wenn ich die beiden divs vertausche und das vormals zweite div mit einem float:left versehe

Edit: auch ein float:left für das div mit dem input Element funktioniert


QUOTE Nur für ff : Also float:right und vor die anderen Container mit dem Ergebnis das der anchor text aus dem a-tag fliegt.

Ergebnis: Der hover und click event liegen als schmale Linie über dem text.
Diese unerreichbare Linie kriegt man auch beim besten Willen nicht breiter.


Der Link zeigt bei mir in voller Höhe und Breite des Linktextes den Hover-Effekt

Sicher, dass nicht irgendeine Extension diese Probleme verursacht?
 
Die Form ist hier ziemlich weit unten auf der Seite

Die Radio-Buttons sind nun in einem DivContainer mit display:inline und der Link für mehr Farben in einem DivContainer float:right.
Wenn die radio-buttons nicht in einen Container kommen, gibt's das Problem, dass der Text nebendran bei verschiedenen Auflösungen über dem Button liegt oder ganz nach links verschoben wird.

Wenn ich alle DIVs mit float:left positioniere, kann ich üblicherweise ein Div mit dem Text und Zeilenumbruch und text-input rechts neben die Radio buttons anhängen.
Bei firefox funktionieren dann aber weder die Radios-Buttons in einem Container mit float:left noch der text-input. In opera übrigens auch nicht.

Nun sind die DIV-Contiâiner mit display:inline und der Text-input mit float:right positioniert.

Wenn du jetzt auf den Link für mehr Farben klickst, siehst du, was ich meine.


Sonst probier das mal aus:
CODE <div style="float:left"><input type="radio" name=group1> text1</div>
<div style="float:left"><input type="radio" name=group1> text2</div>
<div style="float:left"><input type="radio" name=group1> text3</div>
<div><input type="radio" name=group1> text3</div>



Überaschenerweise funktioniert hier bei mir der letzte Button ohne gefloateten Container, obwohl die Vererbung weitergegeben wurde, alle anderen jedoch nicht

Bei meinem jetzigen Problem legen sich die Container einfach übereinander, wenn ich den float beende ohne Zeilenumbruch.
Nun habe ich für ff mal wieder einen Table geschrieben, aber auch nur für ff.



 
QUOTE Wenn du jetzt auf den Link für mehr Farben klickst, siehst du, was ich meine.


OK, das kann ich nachvollziehen
wink.gif
da dein oberer verkürzter Code dieses Problem nicht reproduzieren konnte, wird die Ursache im weiteren Kontext zu suchen sein. Wenn du mal den Validator bemühst, wirsst du sehen, dass auf der Seite einige Tags nicht korrekt geschlossen oder verschachtelt sind - ich würde es nicht ausschließen, dass dies Firefox an der Stelle aus dem Tritt bringt. Können aber natürlich auch andere Trigger eine Rolle spielen, die hier in der Tat einen FF-Bug zum Vorschein bringen. Aber bei einer Fehleranalyse würde ich zuerst immer Fehler im Code bereinigen, um eine Ursache dort auszuschließen


QUOTE Sonst probier das mal aus:

CODE <div style="float:left"><input type="radio" name=group1> text1</div>
<div style="float:left"><input type="radio" name=group1> text2</div>
<div style="float:left"><input type="radio" name=group1> text3</div>
<div><input type="radio" name=group1> text3</div>



Überaschenerweise funktioniert hier bei mir der letzte Button ohne gefloateten Container, obwohl die Vererbung weitergegeben wurde, alle anderen jedoch nicht


Also ich habe den Code in ein HTML-Grundgerüst eingefügt und bei mir funktionieren alle Buttons im Firefox 2.0 - in dem Sinne, dass ich diese markieren kann?
 
Also ich habe den Code in ein HTML-Grundgerüst eingefügt und bei mir funktionieren alle Buttons im Firefox 2.0 - in dem Sinne, dass ich diese markieren kann?
Dann muss das Problem am Bildschirm liegen.
Bei mir funktionieren die Buttons im ff nicht.

Ich probier jetzt mal einen anderen Bildschirm.
Zum Vergrößern anklicken....
Zum Vergrößern anklicken....
 
Im Rohformat geht's bei mir auch.
In der Seite an der ich gerade arbeite aber wieder nicht, auch wenn ich die radiobuttons gleich unter den body -tag einfüge.


Eventuell hast du recht, dass es an den tags liegt.
QUOTE
Wenn du mal den Validator bemühst, wirsst du sehen, dass auf der Seite einige Tags nicht korrekt geschlossen oder verschachtelt sind - ich würde es nicht ausschließen, dass dies Firefox an der Stelle aus dem Tritt bringt.



Das mach ich heute nacht und poste dann, ob's geht.
 
Jetzt kann ich alle DIVs in span display:block umwandeln, bloss damit das w3x zufrieden ist.
sad.gif


Jedenfalls kannst auf der oben angegebenen Seite sehen, dass der Linktext " klick für mehr Farben" sich nicht mehr im anchor-tag befindet.

Der text gibt nur noch den hover-event zurück, kann aber nicht angeklickt werden. Aktiv ist ein leeres Feld über dem Text, das ein bisschen padding gekriegt hat.
 
solved

Ein transparentes Element liegt über der Buttonleiste.

Die z-index Eigenschaften beziehen sich in IE auf den jeweiligen Container,
während in FF z-index global ist.
 
Das Problem ist wahrscheinlich, weil ein Element über dem Button liegt und somit die Buttons nicht Klickbar sind. Besorg dir Firebug, lern etwas damit umzugehen, mit der Inspect-Funktion kannst du solche Probleme meistens in 30 Sekunden lokalisieren.

1. Klick auf Inspect.
2. Hover über das Element das Probleme macht. Und anklicken.
3. Bei Style siehst du die Element-Attribute ...


 
ich war schneller,
biggrin.gif
danke für den Tip.

Aber warum das beim floaten Unterschiede macht, ist mir noch nicht ganz klar. Die Position ändert sich dadurch eigenlich nicht.
 
FF hat jetzt doch einen Table bekommen.

Wenn man

CODE
<a href="#" style="float:left">text
<span style="position:absolute;">hover_text </span>
</a>



geht der Zeilenumbruch verloren.
D.h. die nächste Zeile wird so gesetzt, als wäre der ganze a-tag absolute.
 
Die oben genannten Seite ist jetzt html4 konform.

Es liegt weder über den links noch über den inputs etwas.
Beide hatte ich zwischenzeitlich in verschiedenen Variationen auf z-index:100 gesetzt, was im FF funktionieren sollte.

Es liegt also doch am float.
Der untere Text-Input funktioniert merkwürdigerweise.

Dann müssen FF-Benutzer halt ein bisschen fummeln, um den Link zu treffen.

Mir ist das jetzt egal.
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben