nicht angemeldet
Float-right IE5/WIN-bug durchbricht DIV-Bereiche
Hallo Leute
Habe viel gesucht und probiert um diesen "float-right"-Bug mit CSS in den Griff zu kriegen, aber den geeigneten Hack nirgends gefunden. Vielleicht habe ich aber dabei auch etwas noch nicht kapiert oder übersehen - jedenfalls durchbricht im IE5/WIN der Link sobald dieser nach rechts gefloatet wird den ihn umgebenden DIV-Bereich oberhalb und erstreckt sich bis hin zum rechten Seitenrand. Dabei wird zwar noch die richtige Hintergrundfarbe angezeigt, nicht aber das Hintergrundbild, welches diese überlagert.
Ich habe den betreffenden Teil validiert und soweit wie möglich vereinfacht, und - einmal mit und einmal ohne "float-right" - hier verlinkt. Würde sich bitte jemand von euch den Quellcode mal ansehen und mir auf die Sprünge helfen? Im Mozilla/Firebird funktioniert alles einwandfrei, soweit ich das beurteilen kann.
Herzlichen Dank & Gruss
fred
-
Hi,
Im Mozilla/Firebird funktioniert alles einwandfrei, soweit ich das beurteilen kann.
aber nur dort. Der IE (auch der 6er) zeigt das so an und wenn Du Dir das Ganze mal im Opera anschaust, siehst Du, wie es m.E. richtig aussehen sollte.
Wozu packst Du auch die Links völlig überflüssig in divs? Da diese keine Breite haben, sollten sie untereinander angezeigt werden.freundliche Grüße
Ingo-
Hi Ingo, danke für deine Antwort.
Vielleicht habe ich mich noch unklar ausgedrückt:
Ich habe den Opera tatsächlich noch nicht bemüht, aber es geht mir in erster Linie um Standard-konformes CSS - wozu der IE5 bekanntlich nicht über alle Zweifel erhaben ist, und ich diesen trotzdem dazu "überlisten" möchte.Die Links im Beispiel sollen sich auch aneinander reihen - nur bis an die Grenze des DIV "navCont" und eben nicht darüber hinaus - sonst hätte ich dazu eine clear-Regel verwenden können (zB. auch in den - bis auf die float-Regel - noch überflüssigen DIVs, alles ist absichtlich vereinfacht hier, eine Breite anzugeben ist eine Möglichkeit).
Ich bin also noch nicht am Ziel angelangt...
Gruss
fred-
Hi,
Ich habe den Opera tatsächlich noch nicht bemüht, aber es geht mir in erster Linie um Standard-konformes CSS
und gerade dieses dürfte Dir hier der Opera zeigen. Und damit auch, daß es so nicht geht.
Daß der IE das DIV in dieser Art ausdehnt, ist natürlich ebenso verkehrt. Nur ist diese Darstellung möglicherweise eine Folge Deiner unpassenden Definitionen.freundliche Grüße
Ingo-
Ingo, danke für deine Ausdauer.
Tja im Opera wird alles untereinander angeordnet, hast du recht, aber ist das wirklich richtig? Denn wenn ich den DIV "navCont" auch ganz weglasse floaten die Links nicht wie gewünscht, sondern überlappen gegenseitig, während im Firebird weiterhin alles funktioniert und im IE eben nicht.
Hast du eine Idee was ich ändern müsste um die Links auf die Reihe zu kriegen? Wäre sehr dankbar dafür!Grüsse
fred-
Hi,
Hast du eine Idee was ich ändern müsste um die Links auf die Reihe zu kriegen? Wäre sehr dankbar dafür!
nachdem ich mir Deinen Quelltext mal genauer angesehen habe, sind mir zwei überflüssige Dinge aufgefallen:
1. Die divs um die Links sind unnötig, das float kannst Du im Style für die Links mit aufnehmen
2. .navCont sollte nicht floaten. Dies ist auch das Hauptproblem.Folgende Änderungen (hier mal im HTML-Teil zusammengefaßt) bringt das gewünschte Ergebnis - auch im Opera:
<div class="navCont" style="float:none;">
<a class="nav" style="float:left;" href="#.html">float-left</a>
<a class="nav" style="float:left;" href="#.html">float-left</a>
<a class="nav" style="float:left;" href="#.html">float-left</a>
<a class="nav" style="float:right;" href="#.html">float-right</a>
<div style="clear:both;"></div>
</div>Sinnvoller wäre hier aber eine css-formatierte Liste zu verwenden.
freundliche Grüße
Ingo-
Hallo Ingo,
Herzlichen Dank für deine Bemühungen, das sieht jetzt auch im Opera eher so aus wie ich mir das vorgestellt habe - ausser dass die ersten zwei Links sich noch überlappen. Die DIVs um die Links kann ich schon weglassen und zwei Klassen "a.nav" für "float-links/ -rechts" verwenden, aber es kommen in der Endphase noch spezifische Regeln für Design und Breadcrumb-Trail da hinein - deshalb liess ich sie dauernd so stehen.
Die IE5/6 bringen aber auch jetzt noch eine fehlerhafte Anzeige, so muss ich weiterhin nach einem Hack Ausschau halten, oder aber - was ich für eine sehr gute Idee von dir halte - eine Alternative mit einer (horizontalen) Liste anwenden.Ich melde mich, wenn ich soweit bin - danke nochmals für deine konstruktive Hilfe!
Viele Grüsse
fred-
Hi,
keiner Deiner Versuche funktioniert im Opera. Vor allem frage ich mich, warum Du meinen Tip nicht einfach beherzigst und .navCont nicht floaten läßt. Dann ist die Anzeige in allen Browsern gleich - lediglich der Abstand zur Überschrift variiert wegen der unterschiedlichen Voreinstellungen; das läßt sich aber natürlich leicht egalisieren.
Damit Du's siehst, habe ich den von mir oben geposteten Code mal in deine Konstruktion eingesetzt: http://www.isis.de/members/~iturski/tests/hokyarc.htmlfreundliche Grüße
Ingo-
hi,
Damit Du's siehst, habe ich den von mir oben geposteten Code mal in deine Konstruktion eingesetzt: http://www.isis.de/members/~iturski/tests/hokyarc.html
wobei hier aber der opera (7.23) bei allen beispielen ausser dem ersten kompletten mist macht, in dem er die gefloateten bereiche jeweils _untereinander_ anzeigt.
gruss,
wahsaga-
hallo wahsaga
Die verschiedenen Navigations-Header unterscheiden sich im Code für
(siehe Header 4 http://homepage.hispeed.ch/hokyarc/):1. Mozilla und Geckos
2. IE5 und IE6
3. Mozillas und IEs
4. Mozillas und Opera, evtl. IE6 (nach Ingo Turski)(ganz unten sind alles nur "float-left")
Das grösste Problem stellt also der IE5 dar, für welchen bis jetzt nur der Header 2 geeignet ist. Wie können also die diversen Browser bedient werden, ohne verschiedene Style-Sheets laden zu müssen?
Alternativ versuche ich z.Z. die Navigation mit einer Liste (UL) zu realisieren, aber auch da hat es Stolpersteine, z.B. wenn die DIVs mit Margin/Padding-Angaben versehen werden sollen...
Gruss
fred
-
-
Ingo,
Danke vielmals für deine Opera-Demo! Richtig ist, dass ich für die Lösungen bis jetzt den Opera noch nicht berücksichtigt habe, wie ich aber im 2.Posting vom 13.12.2003 feststellte ist dein Tip durchwegs beherzigt worden (komischerweise überlappten sich damals noch die ersten zwei "left-flaoted"-Links), nur hat sich meine Suche vorerst auf die IEs und Mozillas beschränkt. Deine Lösung ist nun also in der Demo (siehe Header 4 http://homepage.hispeed.ch/hokyarc/) integriert und funktioniert einwandfrei, auch für Mozilla/Firebird, nicht aber für die IEs. Auf die richtige Anzeige der Randabstände kann ich vorläufig verzichten, nicht aber auf konsistente DIVs, welche wichtig sind für die Verwendung von Hintergrundbildern
Es bleiben somit noch folgende Fragen:
-
IE5 und IE6 benötigen eine Angabe für "header-width", Mozilla und alle Geckos am besten aber gar keine Angabe zu "header-width". Wie lässt sich dies bewerkstelligen? (zB. SBMH, siehe Header 3, wo eben für Standard-konforme Browser eine (unbefriedigende, weil relativ bei Window-Resizing) "header-width" von 95% spezifiziert ist - besser wäre keine Angabe, führt aber zu Fehlanzeige im Mozilla).
-
Opera benötigt eine Angabe "navCont-float"= none, hat aber den Nachteil, dass in den IEs (v.a. im IE5, aber besser im IE6) die Links den "navCont" durchbrechen und - wie im ursprünglichen Posting beschrieben - sogar oberhalb vom Header erscheinen. Wie können die zwei Browser bedient werden (also IEs mit "navCont-float"= left und Opera mit "navCont-float"= none)?
-
Noch gar nicht die Rede war von Netscape - ein erster Blick mit NS6.2 zeigt deine Lösung (Header 4) als einzig brauchbare überhaupt! Von älteren Versionen ist wahrscheinlich nicht viel zu erwarten ....
Ich danke dir für deine fortgesetzte Unterstützung!
Der IE scheint das grösste Problem zu bleiben - dies müsste noch in den Griff zu kriegen sein - hoffentlich!Grüsse
fred-
Hi,
Deine Lösung ist nun also in der Demo (siehe Header 4 http://homepage.hispeed.ch/hokyarc/) integriert und funktioniert einwandfrei, auch für Mozilla/Firebird, nicht aber für die IEs.
wie Wahsaga schon anmerkte ist das auch die einzige Lösung für den Opera. Und der IE macht doch auch keine Probleme hier!? Sowohl der IE6 als auch der IE5.5 stellen das wie gewünscht dar. Lediglich der IE5.0 macht Murks. Ich würde eher den IE 5.0 als den Opera vernachlässigen.
freundliche Grüße
Ingo-
Hallo
Ja, der IE5 baut den grössten Mist, auch mit dem Opera-Header 4, leider. Im Moment spinnt der IE5 bei mir (alles auf NT4) sowieso total: jedesmal wenn die Maus einen Link berührt rutscht der "header" oder der "navCont" nach unten weg - sowas habe ich bis jetzt noch gar nie gesehen ...
Ich weiss nicht so recht, den IE5 praktisch ganz zu vernachlässigen, der hat doch immer noch über 30% Anteil Webzugriffe. Aber mühsam ist das natürlich schon!
Danke & Gruss
fred-
Hi,
Ja, der IE5 baut den grössten Mist, auch mit dem Opera-Header 4, leider. Im Moment spinnt der IE5 bei mir (alles auf NT4) sowieso total: jedesmal wenn die Maus einen Link berührt rutscht der "header" oder der "navCont" nach unten weg - sowas habe ich bis jetzt noch gar nie gesehen ...
diesen Effekt kann ich mit meiner "Standalone"-Version zwar nicht nachvollziehen, aber ich habe mal genauer nachgesehen, _was_ der IE 5.0 überhaupt falsch macht: lediglich die Höhe von .navCont wird bis zum umgebenden div vergrößert. Abhilfe ist da aber sehr einfach:
<div class="navCont" style="float:none; height:41px;">
habe ich auf meiner Testseite erweitert und jetzt sieht das auch im IE5.0 so wie in den übrigen Browsern aus.freundliche Grüße
Ingo-
Ingo,
Stimmt genau! Im IE5 sieht's mit "navCont-height"= 41px absolut gut aus, auch beim Zeilenumbruch, wenn sich also der "float-right"-Link unter die anderen Links schiebt wird der "navCont"-DIV trotz Höhenangabe so hoch wie nötig erweitert.
Lediglich im Firebird findet die Erweiterung nicht statt, der H1-"header" wird aber trotzdem richtig nach unten geschoben, und nichts überlappt. Dass der "float-right" aus dem "navCont" rutscht ist ggf. tolerierbar. Siehe dazu den unteren Screenshot auf http://homepage.hispeed.ch/hokyarc/page_02.html. Die Frage ist: Welches Verhalten ist Standard-CSS?Der Link-Flipper-Effekt ist (logischerweise, ich habe nachgesehen, er ist auch in Backups welche schon ein paar Tage alt sind vorhanden - dazumals war aber alles ok) weiterhin zu sehen, ich meine es ist IE5 und IE6 spezifisch. Keine Ahnung wie so was möglich ist...
Dazu der untere Screenshot - der Effekt tritt genau ab dem Moment des Umbruchs durch den "float-right"-Link auf, wenn danach - egal welcher - ein Link berührt wird, für jede Behrührung flippt der "navCont" eine Zeile nach unten.Danke für die Tips!
Gruss
fred-
Hi,
Die Frage ist: Welches Verhalten ist Standard-CSS?
richtig sollte sein, daß sich der Browser an die Höhenangabe hält. Meines Wissens erweitert nur der IE Boxen trotzdem um sie passend zu machen.
Der Link-Flipper-Effekt ist weiterhin zu sehen, ich meine es ist IE5 und IE6 spezifisch.
Sorry, aber jetzt verstehe ich erst das Problem... Ich habe dieses aber nur im IE 5.0 und IE 5.5, der IE 6 (SP 1/Win XP) hat diese Macke nicht.
Ich schätze, die einzige Möglichkeit wäre ein spezielles CSS für IE (<6) über conditional comments.freundliche Grüße
Ingo-
Hallo
Ja, sehr eigenwillige Ansichten der IEs betr. Höhenangaben für DIVs. Richtig, der IE6 hat die Flipper-Macke gar nicht. Kann auch sein, dass ich irgendwo ein Zeichen zuviel/zuwenig habe nach all dem editieren, werde mich diesbezüglich noch vergewissern - ich bin jetzt ca. eine Woche weg und werde mich dann um ein conditional-CSS bemühen. Mittlerweile sollte ich dank deinem grosszügigen Engagement über ein genügend grosses "Instrumentarium" verfügen um eine befriedigende Lösung zu realisieren - ich danke dir sehr dafür!
Ich melde mich und wünsche schon mal frohe Weihnachten...
Grüsse aus der Schweiz
fred
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Hallo Manfred,
http://homepage.hispeed.ch/hokyarc/
Ich habe den betreffenden Teil validiert und soweit wie möglich vereinfacht, und - einmal mit und einmal ohne "float-right" - hier verlinkt. Würde sich bitte jemand von euch den Quellcode mal ansehen und mir auf die Sprünge helfen? Im Mozilla/Firebird funktioniert alles einwandfrei, soweit ich das beurteilen kann.
Ich habe hier unter Linux auch nur Mozilla 1.5 und Konqueror 3.1.1
In Mozilla sieht's wohl aus, wie es soll. Der letzte Block oben floatet rechts.
In Konqueror ist der letzte Block auch im oberen Beispiel linksbuendig.Dein HTML:
<div class="float-l">
<a class="nav" href="#.html">float-left</a>
</div><div class="float-r">
<a class="nav" href="#.html">buggy-float-right</a>
</div>Die Klassen
.float-l { float: left; }
.float-r { float: right; }
wendest Du auf die DIVs an, aber fuer die DIVs selbst gibst Du keine Breite an,
sondern nur fuer die A darin.a.nav { display: block;
height: 19px;
width: 130px;
margin: 5px;
padding: 5px;
border: 1px solid #99f;
}Gemaess SelfHTML
[http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float]
muss man bei float immer auch eine width fuer das Element angeben,
das gefloatet wird.Versuch doch mal, float und width in die gleiche Definition reinzuschreiben:
div.float-l { float:left; width:140px; }
div.float-r { float:right; width:140px; }
oder so.Fuer gute Browser wuerde ich sagen, dass der DIV ueberfluessig
ist, weil man ja A selbst zum Block-Level-Element machen kann
(was Du auch tust) und somit floaten kann.
Kann aber sein, dass der DIV fuer gewisse veraltete Browser
noch notwendig ist.Die korrekte logische Auszeichnung fuer eine Navigationsleiste
waere uebrigens eine Liste (UL), die dann mit CSS gestaltet wird:
Folgende Seiten koennten Dir noch ein paar Ideen geben:
http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listamatic/
http://www.subotnik.net/style/list-box-test.html
http://devedge.netscape.com/viewsource/2002/list-indent/Gruesse,
Thomas
-
Salut Thomas
Vielen herzlichen Dank, dass du dir Zeit genommen hast, auch mehr Klarheit in diese Angelegenheit zu bringen. Ich habe mich mal in einer ziemlich langen Versuchsreihe - mit deinen Tips und den Vorschlägen von Ingo Turski - auf die Angaben für die Breiten konzentriert und soweit folgendes zum Funktionieren gebracht:
- Der bisher beste Effekt erzielte eine Angabe in der Klasse "header" width: 100%; damit ist der IE5/6 bedient (siehe Header 2).
- Jetzt erstreckt sich aber der Mozilla/Firebird über den rechten Rahmen hinaus. Um dies zu verhindern habe ich mal den "simplified box model hack" eingesetzt und für die Standard-Browser im "header" width: 95%; spezifiziert (siehe Header 3).
Das ist zwar tatsächlich einfach zu realisieren, aber - weil eine relative Angabe - nicht in allen Bereichen zufriedenstellend (Window-Resizing). Vielleicht hat jemand von euch eine bessere Idee. Ich habe mal die (vorläufig) überflüssigen DIVs um die Links weggelassen, und alle möglichen Kombinationen mit Angaben zur Breite der Klassen "body" "navCont" und "header" getestet.
Ich werde es also, wie du empfiehlst, die Alternative einer horizontalen Liste versuchen, wo ich bei Maxdesign's Listamatic auf die interessante Möglichkeit einer Navigationsleist mit float-left und -right gestossen bin (http://css.maxdesign.com.au/listamatic/horizontal20.htm).
Danke nochmals also, ich melde wenn was zu sehen ist.
Grüsse
fred
-