float bug im Opera?
nocheinPoet
float bug im Opera?
nocheinPoet
Der MartinHallo liebe Gemeinde,
ich habe da ein Problem mit dem Opera und auch dem IE, das mit dem Opera ist aber nerviger.
Der Opera reißt das Table DIV mit doppelter Breite auf, im FF und IE liegt das rote X direkt neben dem table DIV.
Nehme ich das "float:left;" aus der class ".table .header" sieht es besser aus, aber ich bekomme unten ein scrollbar im Opera, auch nicht toll, außerdem brauche ich das float eigentlich.
Gebe ich der class ".table" -> "width: 100px;" geht es auch besser, aber dafür bricht der IE das zweite DIV im zweiten Header um.
Habe echt schon eine Menge versucht, mir ist das Verhalten vom Opera nicht klar, warum reißt er das DIV so auf, als ob beide Header nebeneinander liegen würden?
Ich finde bisher nur Lösungen, die mich dann recht einschränken, und nur für den Opera so etwas zu machen, geht mir recht gegen den Strich, bisher dachte ich, der Opera ist dem FF recht nahe und nun wundert mich das doch sehr.
hier mal der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style>
BODY {background: url(../images/Pixelraster/GIF/pixelraster.gif) no-repeat; margin-top: 10px; margin-left: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
.scrollpane /*position: relative;*/
{
width: 600px; height: 120px; overflow: auto; float: left; background-color: #ADD8E6;
}
/* width: 600px; height: 120px; position: relative; overflow: auto; background-color: #ADD8E6; */
.table /*width: 400px;*/
{
background-color: #FFDEAD; float:left; font-family: Arial, Helvetica, sans-serif; font-size: 11px;
}
.table .header /*position: relative;float: none;display: block;*/
{
background-color: #CDFFAC; float: left; clear: both;
}
.table .header DIV /*position: relative;*/
{
background-color: #CDFFAC; float: left; border: 1px solid;
overflow: hidden;
}
.table .body /*position: relative;*/
{
background-color: #ACF6FF; float: left; clear: both;
}
.table .panel /**/
{
background-color: #E6D7AE; float: left; overflow: hidden;
}
.table .body .panel .row DIV /*position: relative;*/
{
background-color: #CDFFAC; float: left; border: 1px solid;
}
.row { background-color: #FF6347; }
.col_01 {width: 30px;}
.col_02 {width: 30px;}
</style>
</head>
<body>
<!-- SCCROLLPANE -->
<div class="scrollpane">
<!-- TABLE -->
<div class="table">
<!-- HEADER -->
<div class="header">
<div class="col_01" style="">col_01</div>
<div class="col_02" style="">col_02</div>
</div>
<div class="header">
<div class="col_01" style="">col_01</div>
<div class="col_02" style="">col_02</div>
</div>
</div>
<!-- END TABLE -->
<div style="background-color: Red; float: left; width: 50px;">x</div>
</div>
<!-- SCCROLLPANE -->
</body>
</html>
-
Hallo nocheinPoet.
Der Opera reißt das Table DIV …
Stop! Was soll ein „Table DIV“ sein? Eine Tabelle mit div-Elementen nachzubauen ist absolut sinnentleert. Wenn du eine Tabelle brauchst, dann nutze eine Tabelle. Mangels sinnvollem Inhalt in deinem Beispiel kannst aber nur du diese Entscheidung fällen.
Einen schönen Sonntag noch.
Gruß, Mathias
--
ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)
debian/rules-
Sei gegrüßt Mathias,
"Stop! Was soll ein „Table DIV“ sein?
Eine Tabelle mit div-Elementen nachzubauen ist absolut sinnentleert. Wenn du eine Tabelle brauchst, dann nutze eine Tabelle. Mangels sinnvollem Inhalt in deinem Beispiel kannst aber nur du diese Entscheidung fällen."
Nein, es mag Deine Meinung sein, aber es macht sehr viel Sinn, auf ein DIV-Layout umzusteigen. Mit JQuery und anderen JS Bibliotheken kann man den DOM-Baum so sehr gut manipulieren.
Ich habe schon einige Tabellen so umgestellt und spare mir reichlich Markup und bekomme viele Vorteile, muss ich nun aber nicht alle aufzählen. Nur kurz angemerkt ich mache das beruflich und professionell, weiß also wovon ich rede.
Im Grunde baue ich Komponenten auf, welche über eine sehr sauberes CSS erstellt werden, und später kommen diese dann in eine TAG-LIB, um so serverseitig Layout zu generieren. Clientseitig wird dann daran noch Ajax geklebt. Ziel ist es ein sehr flexibles Layout zu erhalten, was möglichst Browserunabhängig ist.
Eine Meinung ist keine Wahrheit, nur weil man den Sinn nicht erkennen kann, heißt es nicht, das auch keiner vorhanden ist.
Dir auch einen schönen Sonntag noch.
Gruß, Manuel
-
Hallo nocheinPoet,
Nein, es mag Deine Meinung sein, aber es macht sehr viel Sinn, auf ein DIV-Layout umzusteigen.
Mathias spricht nicht von div Layout (sowas existiert auch nicht, wohl aber sinnvoll strukturierter Quellcode), sondern davon, dass wenn tabellarische Daten vorliegen, auch eine Tabelle genutzt werden soll. Die allgemeine Kritik am Tabellenlayout richtet sich gegen Tabellen, die fuer nicht tabellarische Daten sondern zur Gestaltung genutzt werden.
Mit JQuery und anderen JS Bibliotheken kann man den DOM-Baum so sehr gut manipulieren.
Tabellen ebenso
Nur kurz angemerkt ich mache das beruflich und professionell, weiß also wovon ich rede.
Das weiss Mathias mit Sicherheit auch
Gruß,
Dieter
-
Lieber Dieter,
wie dem auch sei, ich mag nicht über Tabellen philosophieren, es hat schon einen Grund, auf Tabellen völlig zu verzichten.
Ihr könnt ja gerne so Seiten erstellen wie Ihr wollt, meine Frage war auch nicht die ob es sinnvoll ist oder nicht.
Das Problem tritt bei geschachtelten DIV's mit floats im Opera auf, unabängig davon ob ich damit eine Tabelle ersetzen will oder nicht.
Wenn Ihr dazu Antworten habt, dann lasst sie hören, wenn Ihr über den Sinn von Tabellen zur anzeige von Daten im Gegensatz zu DIV's diskutieren wollt macht doch einen Thread dazu auf, den das hat hier im Grunde nichts zu suchen.
Wie bereits gesagt, für mich macht das sehr viel Sinn, sonst würde ich es nicht tun, und meine Zeit ist echt recht kanpp um mich nun dazu auf eine Grundsatzdiskussion einzulassen.
Das ist nicht böse gemeint, aber ich habe eben zu arbeiten.
Lieben Gruß
Manuel
-
-
Hallo,
Stop! Was soll ein „Table DIV“ sein?
Eine Tabelle mit div-Elementen nachzubauen ist absolut sinnentleert. Wenn du eine Tabelle brauchst, dann nutze eine Tabelle. Mangels sinnvollem Inhalt in deinem Beispiel kannst aber nur du diese Entscheidung fällen."
Nein, es mag Deine Meinung sein, aber es macht sehr viel Sinn, auf ein DIV-Layout umzusteigen.
Moment, wieso jetzt auf einmal "Layout"? Eben ging es um die Behauptung, dass es nicht sinnvoll sei, eine Tabelle mit div-Elementen nachzubauen. Das würde ich ohne Einschränkung unterstreichen, denn eine Tabelle hat nichts mit dem Layout zu tun (oder sollte es zumindest nicht), sondern sie dient der Strukturierung von tabellenartigen Daten. Dafür sollte sie dann auch verwendet und nicht durch etwas anderes ersetzt werden.
Ich habe schon einige Tabellen so umgestellt und spare mir reichlich Markup und bekomme viele Vorteile, muss ich nun aber nicht alle aufzählen. Nur kurz angemerkt ich mache das beruflich und professionell, weiß also wovon ich rede.
Mag ja sein - wenn du aber nur "von Tabellen auf divs" umstellst, lässt das deine Professionalität eher arm dastehen. Denn ein Layout nur oder überwiegend mit nichtssagenden div-Elementen aufzubauen, ist ebensowenig sinnvoll; in den meisten Fällen, wo divs verwendet werden, wären andere Elemente wesentlich besser geeignet.
Eine Meinung ist keine Wahrheit, nur weil man den Sinn nicht erkennen kann, heißt es nicht, das auch keiner vorhanden ist.
ACK. Trotzdem schwillt mir immer der Kamm, wenn von einem "div-basierten Layout" die Rede ist. Natürlich ist es _möglich_, ein Layout stark auf div-Elemente zu stützen - nur sinnvoll ist es in der Regel nicht. Viel sinnvoller ist ein Markup, bei dem der Inhalt möglichst passend auf die verfügbaren HTML-Elemente abgebildet wird, und das nur dann und wann mal ein div-Element zur Gruppierung einsetzt.
So long,
Martin--
Idealismus wächst mit der Entfernung zum Problem.
-
-
Hallo Mathias.
Der Opera reißt das Table DIV …
Stop! Was soll ein „Table DIV“ sein? Eine Tabelle mit div-Elementen nachzubauen ist absolut sinnentleert. Wenn du eine Tabelle brauchst, dann nutze eine Tabelle.
Stop! ;)
Auch ich möchte dir hier widersprechen. Eine CSS-Tabelle als Layout-Tabelle für das Screenlayout macht heutzutage durchaus Sinn. Sie erfüllt in meinen Augen auch die Trennung von Inhalt und Design und ermöglicht im Gegensatz zu HTML-Tabellen, auch ein flexibles Layout für unterschiedliche Ausgabemedien.Ihr größter "Nachteil" ist das völlige Nichtfunktionieren in den IEs, die deshalb ein separates Stylesheet erfordern (aber tun IEs das eigentlich nicht immer, zumindest in weiten Teilen!?).
Aber nochmal zurück zur Layout-Tabelle. Nach meinem Verständnis ist ein mehrspaltiges (Screen-) Layout ja eine Tabelle. Nur halt nicht im inhaltlichen (semantischen) Sinne, weshalb ja auch keine HTML-Tabelle verwendet wird.
Und wenn man sich mal die ganzen Probleme & Schwierigkeiten von mehrspaltigen CSS-Layouts in der Praxis anguckt, dann ist die CSS Layout-Tabelle auch nicht besser oder schlechter.
Von daher kann ich mich deiner (auch eher etwas sehr dokmatisch klingenden) Meinung nicht anschließen.
Gruß Gunther
-
-
Nachtrag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
muss es natürlich sein.
-
Hallo,
Nehme ich das "float:left;" aus der class ".table .header" sieht es besser aus, aber ich bekomme unten ein scrollbar im Opera, auch nicht toll, außerdem brauche ich das float eigentlich.
Deine abenteuerliche float-Konstruktion löst einen Opera-Bug aus, anders lässt sich das nicht erklären. Nach dem clear bei .header wird nicht die Breite des darüberliegenden divs nicht neu berechnet, sondern es wird die Breite angenommen, die es ohne clear einnehmen würde. Wenn ich das richtig sehe, brauchst du den float bei .header gar nicht bzw. du nutzt float dort nur, um einen Block Formatting Context auszulösen, damit das .header-div, das nur floatende Kindelemente hat, diese einschließt. Das einzige, was du machen könntest, ist auf eine andere Methode auszuweichen, die ebenfalls einen Block Formatting Context auslöst, aber kein float - das wäre etwa overflow:hidden.
Im Allgemeinen kann man echt nur sagen: Bei solchen fragwürdigen Tabellen-Nachbau-Konstruktionen mit mehrfach verschachtelten floats bzw. Block Formatting Contexts ganz ohne regulären Elementfluss sind Browserfehler vorprogrammiert. Dass float-Boxen überhaupt ohne width-Angabe verwendet werden können und sich ihre Breite nach den Inhalten richtet, ist relativ neu, erst CSS 2.1 wird das als fest definierte Regel einführen. Das hat Opera wohl noch nicht mit allen Eventualitäten eingeführt - das scheint mir auch schwierig in einen Algorithmus zu bringen, weil sich alle floats gegenseitig determinieren.
Mathias
-
Hallo Mathias,
danke für Deine Mühe, aber das mit dem overflow: hidden klappt leider auch nicht ganz, den das Layout ist noch ein wenig komplexer, ich habe es nur für den Bug reduziert um das Markup nicht unnötig komplex zu machen.
Im Grunde geht es um eine Table die immer einen Border hat und automatisch einen Scrollbar bekommt, wenn der Inhalt die Höhe überschreiten, und der Header soll dabei nicht mit srcollen.
Ich habe also anstelle des zweiten Header DIV dort einen Body der selber noch ein Panel hat, was auf overflow: auto ist, so wie noch einen Border DIV links, oben und unten. Der linke ist absolut (relativ), die anderen Beiden relativ positioniert.
Die Table selber brauch nur eine Höhe und eine Breite und die entsprechenden Breiten für die Spalten, alles andere geht automatisch.
Und das soll dann selber in einer Scrollpanel liegen können und auch vollständig im IE scrollen, das heißt die Table's können selber wiederum in einem Container floaten.
Das funktioniert im übrigen im FF, IE6, IE7 wie beschrieben. In den Styles stecken einige Wochen arbeit....
Nur der Opera wollte nicht, aber da er nicht ganz so wichtig ist, ich bin halt ein Perfektionist und wollte es auch über CSS lösen, und es offensichtlich ein BUG im Opera ist, hole ich mir die Breite des Body DIV's mit JQuery (super Bibliothek im übrigen) und gebe diese dem Table DIV, mache ich natürlich nur, wenn es sich um den Opera handelt, frage ich also im Vorfeld ab.
So klappt es dann auch mit dem Opera.
-