Unterschied in Anzeige zw. Internet Expl. + Firefox

[nbauer]

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

[xpla]

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:

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

<!--Jetzt sollten wir mal die Floats aufheben-->
<div style="clear: both;"></div>

    <!--Rahmen DIV--></div>
<!--/umgebendes DIV--></div>

[zigeina]

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

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

das ist lebende IT

[xpla]

Zitat von zigeina

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

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

das ist lebende IT

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.

[zigeina]

Zitat von xpla

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
gleich so fäkalienausdrücke und das öffentlich im web vor all den unbedarften lesern

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

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

[FranzK]

Zitat von zigeina

...
es geht prinzipiell darum, dass zwei unterschiedliche programme IMMER etwas anderes tun,
...

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.

[nbauer]

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.

<div style="width:100%; background-color:grey; color:white;"><!--umgebendes DIV-->
    <div style="border: thin solid yellow;"><!--Rahmen DIV-->
        <div style="background-color: white; color: black; border:10px solid red; float:right; height:320px; width:440px;vertical-align: bottom;">Bildunterschrift<!--umgebendes Bild-Div-->
            <div style="border:thin solid blue; float: right; height:300px; width:440px; color: black !important;" id="Bild"><!--Bild DIV--></div>
        <!--umgebendes Bild-DIV--></div>
fsdfsdfsdf dffsdfsdfsdsdf fsddf fd fdfd fddfs dfdf df df sdffsd fd fsd fsd fd f fd fd f f ff dfd fd fd fsd fsd fsd fsd dffsd fd fd fd fd fsd df fd dff df sdfsd fsd fsd dfs 
fddf f fsd fsd fd df sdf fsd fsdf sdf sddf fsd fd fd fsd fsd df    er tret t te t  tz t zzui ui ui ui io oi o o p p poo ppo 
<!--Jetzt sollten wir mal die Floats aufheben-->
<div style="clear: both;"></div>

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

[zigeina]

Zitat von FranzK

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.

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)

[FranzK]

Zitat von zigeina

..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...

grundstandard wird eingehalten...der text wird ja auch von allen dargestellt ..nur immer halt in eigener interpretation

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...

[zigeina]

Zitat von FranzK

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...

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
ein bischen mehr schlichtheit würd den meisten seiten guttun
egal mit welchem browser sie dargestellt werden