Unterschied in Anzeige zw. Internet Expl. + Firefox
 

Ich habe Internet Explorer 8.0 und Firefox 3.52 deutsch. Ineinander verschachtelte divs werden im Firefox falsch dargestellt:

<div style="width:100%; border:10px solid yellow; ">
<div style="border:thin solid red;float:right; height:320px; width:440px; ">
<div style="border: thin solid rgb(143,143,143); border:thin solid blue; float: right; height:300px; width:440px; color: black !important;" id="Bild">
</div></div>
fsdfsdfsdf dffsdfsdfsdsdf
</div>

Dies wird im IE ordnungsgemäß angezeigt. Im Firefox meint er, dass der Bildschirm wesentlich breiter sei. Er schneidet den gelben Rahmen rechts ab. Der äußerste Div wird nur so hoch dargestellt, wie auch Text vorhanden ist, die beiden anderen Rechtecke gehen wesentlich darüber hinaus und werden auch rechts abschnitten. Wenn ich statt mit borders mit padding arbeite, so rücken die beiden inneren Rechtecke umso weiter nach rechts, je höher der Padding-Wert ist. Die Darstellung im IE erfolgt immer korrekt.

Was tun? Könnt ihr das auch nachvollziehen. Meine Auflösung ist 1600x1200.

lg

Also, mal gleich vorweg

FIREFOX STELLT NICHTS FALSCH DAR!

So, hier die Erklärung:
Firefox, als Browser der das Box Model richtig umsetzt macht folgendes:

Erstes DIV gibst du mit einer Weite von 100% an. Super, Firefox gibt dir genau das, was du willst! Laut gültigem Box Model eine eine Weite von 100% (nicht berücksichtigt sind Browser eigene Styles, denn sowohl IE als auch Firefox fügen ein Margin ein, sodass man dieses am besten durch ein resest-stylesheet entfernt (body bekommt von den Browsern ein margin).

So, Firefox macht also was du sagst, dann sagst du ihm, Junge, mach mir doch glatt einen Rahmen mit 10px. Laut gültigem Box-Model macht Firefox genau das, denn die Gesamtweite deines DIV ist die angegebene Weite ADDIERT um den Rahmen, also 10px je Seite = 100% + 10px + 10px = 100% + 20px.

Firefox macht also genau das, was du sagst. Fairerweise muss man sagen, dass sich der IE8 auch bei diesem Punkt an das box model haltet, und bei mir genau so einen horizontalen Scrollbalken erzeugt, da eben 100% + 20px vorgegeben wird.

So, nächster Fehler, äußeres DIV nur so hoch wie der Text. Klar, denn du verwendest, noch dazu in sich verschachtelte, Floats. Tust du dies nicht, ist dem ursprünglichen DIV völlig egal, wie hoch die gefloateten Block-Elemente sind.

Für was du ein !important setzt, geht mir nicht ein, aber vielleicht auch nur deswegen nicht, weil ich micht nicht damit beschäftigt habe, was du bezwecken willst, denn in deinem DIV mit !important ist kein Text auf dem die schwarze Schriftfarbe hätte angewendet werden können.

Wie schaut das Ganze etwas besser aus? Naja, so:

egal welches programm was falsch macht

zwei programme von unterschiedlichen herstellern mit unterschiedlichem verdienstmodell und und und

da ist es schon verwunderlich, dass die beiden nicht haargenau das gleiche tun :p

und komisch mit jedem neuen patch der beiden wird schon wieder was anders :lol:

das ist lebende IT :aio:

Ahm, das ist grundsätzlich völlig leere Luft. Tut ma echt leid, aber das genau gar nichts mit dem Verdienstmodell zu tun. Microsoft scheißt auf die Web-Standards. Der meiste Aufwand für Webprogrammierer ist es, Sachen die standardkonform sind, für die MS-Schrott Sachen anzupassen.

oha bin ich einem open source verfechter auf den schlips getreten :cool:
gleich so fäkalienausdrücke und das öffentlich im web vor all den unbedarften lesern :p

falsch interpretiert meine aussagen!!!

es geht prinzipiell darum, dass zwei unterschiedliche programme IMMER etwas anderes tun,
die erwähnung der verdienstmodelle war nur um zu zeigen, WIE unterschiedlich die hersteller der programme sind
es geht nicht nur um die winzelnen programmhersteller sondern auch um alle möglichen versionen (auch firefox wurde weiterentwickelt, ;) )
also webseiten für alle möglichen clients gibts nur einzeilig mit text :idee:

ach ja es gibt mehr als genug leute, die mit ie7 und firefox 2 herumsurfen,.....

ausserdem hätt ich den thread nicht ins internet forum sondern ins programmierung oder vielleicht auch ins software forum gegeben

So ein Unsinn! Überleg dir einmal, was herauskäme, wenn die Software zweier WLAN-Access-Points unterschiedlicher Firmen nicht das gleiche machten. Gerade dafür hat man technische Standards geschaffen, die von den Anwendern eingehalten werden müssen, damit man Produkte unterschiedlicher Hersteller miteinander kombinieren kann.

Und auch für die Anzeige einer Webseite gibt es einen eindeutig definierten Standard, an den sich Firefox hält, und an den sich Microsoft erst langsam annähert, nachdem sie lange so taten, als könnten sie ihre eigenen Standards formulieren und durchsetzen. Daraus wurde aber nichts und Microsoft sieht sich jetzt im Dilemma, neue IE-Versionen immer besser standardkonform hinzukriegen, und dabei die notwendige Rückwertskompatibilität zu ihren eigenen Sünden zu wahren.

:hallo:

Hi,

danke für deine Version. Sollte mal bringen, was ich möchte.

Ich möchte einen Textrahmen haben, mit einem (dunkel)grauen Hintergrund. In diesem soll ein Text mit etwas Abstand beginnen und rechtzeitig vor dem Bildrahmen (Abstand!) eine neue Zeile beginnen. Die Rahmen selber habe ich nur zur Veranschaulichung gewählt, einzig ein Rahmen um das Bild soll vorhanden sein. Der Rahmen um das eigentliche Bild soll auf weißem Hintergrund eine schwarzen Bildtext unterhalb des Bildes ermöglichen. Das Bild samt Rahmen soll natürlich auch vom rechten Bildschirmrand den gleichen Abstand haben.

Hier
- geht der äußerste Rahmen nicht bis zum jeweiligen Bildschirmrand
- der Text lässt weder einen Abstand links noch rechts zum Bild
- Die Bildunterschrift befindet sich nicht unterhalb des Bildes.

Jetzt ist gelöst,
- dass der gesamte Bereich innerhalb des Bildschirmes ist
- der Textblock ganz den äußersten Bildrahmen umfasst

Leider bin ich nicht so tief in CSS drinnen.

lg

vergleichen wir nicht äpfel mit birnen..
wlan accesspoints verschiedener hersteller syncen mit clients anderer hersteller mit den unterschiedlichsten geschwindigkeiten usw, usw...
grundstandard wird eingehalten...der text wird ja auch von allen dargestellt ..nur immer halt in eigener interpretation (die pöse MS macht s natürlich so wie sie will)

Ist leider in vielen Fällen so. Es ist fast ein Grundprinzip in der Microsoft-Geschichte, dass sie immer versuchen, ihr eigenes Süppchen auf Kosten anderer durchzusetzen. Manchmal hat es sich letztlich als Segen für die Computerwelt erwiesen, aber sehr oft war es einfach nur ärgerlich. Bei den W3C-Standards (die für das Internet!) haben sie sich glücklicherweise die Zähne ausgebissen und haben noch immer Aufholbedarf. Aber die armen Programmierer müssen sich weiterhin mit Alpträumen wie den IE6 herumschlagen...

Wo lebst du eigentlich? Es gibt keinen "Grundstandard" für die Anzeige einer Webseite, sondern einen klar und eindeutig definierten Standard. Dieser Standard wird von Browsern mehr oder weniger vollständig implementiert, von MS eben weniger als von den andern...


:hallo:

ich leb am mond und ich kann die meisten seiten trotzdem lesen

"grundstandard" bezog sich auf dein WLAN beispiel, und der ist verbindung bekommens alle --> nur wie schnell ist halt eine frage der hw und sw



die meisten mit gimmicks überladenen seiten schliess ich eh wieder,
ich les halt meistens nur text und brauch keine ausgefeilten webseiten :engel:
ein bischen mehr schlichtheit würd den meisten seiten guttun
egal mit welchem browser sie dargestellt werden

[quote=zigeina;2379385
ein bischen mehr schlichtheit würd den meisten seiten guttun
egal mit welchem browser sie dargestellt werden[/quote]

kann ich mich nur anschließen, gibt nix schlimmeres als so seiten wo einem gleich mal ein intro entgegenkommt und dann so weitergeht

Auch mit schlichten Seiten hat man oft genug Scherereien mit dem bescheidenen Internet Explorer ;)

Hi,

wäre nett, wenn ihr mir Tipps geben könnte, wie ich mein CSS-Anforderung am besten löse!

lg

OK, falsch interpretiert. Aber auch bei WLAN liegst du falsch. Die Standards "a", "b", "g" und "n" z.B. sind eindeutig definiert, und auch wie sich die Clients innerhalb der Standards bei problematischen Verhältnissen verhalten sollen. Ausnahmen sind nur proprietäre Erweiterungen, wie 22Mb/s bei "b" und 108Mb/s bei "g", welche in der Regel nur bei Geräten gleicher Hersteller funktionieren.

Aber auch WLAN-Geräte, die Funktionen bieten, die über den jeweiligen Standard hinausgehen, halten den spezifizierten Standard natürlich exakt ein. Und genau das ist der springende Punkt, den MS bei seinen IE-Versionen verletzt! MS hat im Laufe der Zeit einerseits viele Erweiterungen eingebaut, aber die bestehenden Standards bei weitem nicht vollständig erfüllt. Ein Faktum, das heute noch die Programmierer nervt - die Anwender merken es ja ohnehin nur in Ausnahmefällen.

:hallo:

hast vollkommen und in allem total recht

bist wohl im normen ausschuss für alle standards die es so gibt :eek:

nur grad beim wlan war die meiste hardware schon am markt BEVOR die standards überhaupt festgelegt waren
aber das ist ja natürlich auch ein problem der hersteller, hätten sie sich an den nicht vorhandenen standard gehalten

der thread ist sowas schon weg vom thema, damit beschließ ichs

Nicht so tief drinnen ist gut gesagt. Du hast keine Ahnung und möchtest, dass jemand die Arbeit für dich macht.

- geht der äußerste Rahmen nicht bis zum jeweiligen Bildschirmrand
Verwende ein Reset-Stylesheet, dies behebt von vornherein gleich mal einige Differenzen zwischen den Browser-Stylesheets. Ansonsten kannst ja mal das margin vom Body entfernen.

- der Text lässt weder einen Abstand links noch rechts zum Bild
Du hast auch keinen definiert. Der Linke Abstand ist Sache des umgebenden DIVs und der Abstand vom Text zum Div, welcher als Bildrahmen fungiert, wird von letzterem gesteuert, sprich vom gefloatetem Div. Dein Stichwort: padding

- Die Bildunterschrift befindet sich nicht unterhalb des Bildes.
Wie soll sie sich auch unterhalb befinden, wenn du sie oberhalb des Bildes im Quelltext setzt?


http://css-tricks.com/the-css-box-model/