Abstand zwischen 2 Divs

Hey peepz,

warum zeigt der IE die Abstände von einem .div zum anderen richtig an und der Firefox nicht?
Ich steh’ wirklich auf’n schlauch!
Wie kann ich dieses Problem beheben?

Hier zwei Grafiken, die das belegen

So zeigt es der IE an…

http://img279.imageshack.us/img279/7711/inernetexty9…

und so sieht es beim Firefox aus

http://img119.imageshack.us/img119/8523/firefoxpl1.jpg

oder überzeugt euch selbst bei http://www.myspace.com/wizzygirl

Mein Code

.div5 {
background-color:black; CC9999:;
border:2px solid; border-color:888888;
width:540px; height:175px; overflow:auto;
position:absolute; left:43%; top:0%;
margin-left:-400px; margin-top:865px; text-align:left;
visibility:visible;}

Zusätzlich habe ich die Frage, wie ich eine .gif Datei in ein .div einfüge, wobei ich die Position bestimmen kann?

Vielen herzlichen Dank im Voraus!
Gruß
wizzy

Hey peepz,

warum zeigt der IE die Abstände von einem .div zum anderen
richtig an

Widerspruch Internet Explorer und richtig

und der Firefox nicht?
Ich steh’ wirklich auf’n schlauch!
Wie kann ich dieses Problem beheben?

Webdesigner arbeiten gerne mit Opera, einer der wenigen Browser, die so ziemlich alles (Css und co) fast fehlerfrei umgesetzt haben

der internet explorer ist für seine eigenwillige interpretation bekannt, entweder du entwickelst für alle(das heisst 100 mal nachfragen welchen browser man benutzt) oder mainstream, als für IE

mfg
matze

Der screenshot belegt es!
Sicherlich kann ich auch die Werte für margin-top ändern, sodasss der Abstand im Firefox normal angezeigt wird, aber dies’ würde im IE den unteren .div überlappen, somit könnte ich das nicht mehr optisch erklären. Na klar, hat der IE seine Macken aber in meinem Fall hat es korrekt angezeigt. Ganz Einfach und nichts da mit Widerspruch!

Im Großen und Ganzen hast du mir nicht weiterhelfen können!
Ich möchte dieses Problem nur für IE und FF beheben (es sind die meisten genutzen Browsern. Von Opera und was es sonst noch gibt will ich garnichts wissen). Ist das denn so unverständlich?

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

Moin.

Ich vermisse den Doctype (http://de.selfhtml.org/html/allgemein/grundgeruest.h…).

Daran erkennen die Browserm, wie sie die Tags zu deuten haben. Wäre so mein erster Tipp.

Schöne Grüße

Leo

Hallo wizzy!

„wizzy“ schrieb:

warum zeigt der IE die Abstände von einem .div zum anderen
richtig an und der Firefox nicht?
Ich steh’ wirklich auf’n schlauch!
Wie kann ich dieses Problem beheben?

Dein Quelltext ist etwas unübersichtlich. :wink:

Hier zwei Grafiken, die das belegen

So zeigt es der IE an…

http://img279.imageshack.us/img279/7711/inernetexty9…

und so sieht es beim Firefox aus

http://img119.imageshack.us/img119/8523/firefoxpl1.jpg

oder überzeugt euch selbst bei
http://www.myspace.com/wizzygirl

Mein Code

.div5 {
background-color:black; CC9999:;
border:2px solid; border-color:888888;
width:540px; height:175px; overflow:auto;
position:absolute; left:43%; top:0%;
margin-left:-400px; margin-top:865px; text-align:left;
visibility:visible;}

Das liegt vermutlich am fehlerhaften Verhalten des Internet Explorer
in Bezug auf das Boxmodell:

http://www.perun.net/2004/07/04/fehlverhalten-von-ie…
Fehlverhalten von IE im Boxmodell

Verwende einen korrekten Doctype, da der Internet Explorer 6 sonst
in den Quirks Mode schaltet und verwende den „Tanteks Hack“:

http://jendryschik.de/wsdev/einfuehrung/css/browser-…
Browser-Kompatibilität

http://www.heise.de/ix/artikel/2004/03/136/
Doctype-Switching: Wie Browser über die Darstellung von (X)HTML entscheiden

http://www.carsten-protsch.de/zwischennetz/doctype/
Der »DOCTYPE-Switch« und seine Auswirkungen

Eventuell in diesem Zusammenhang auch hilfreich:

Validiere Deine Seiten:
http://validator.w3.org/check?uri=http://www.myspace…
476 Fehler

http://jigsaw.w3.org/css-validator/validator?uri=htt…
7 Fehler

Du missbrauchst Tabellen zu Layoutzwecken.
Verwende korrektes XHTML und CSS.

Oh je, da muss ich mich wohl durcharbeiten!
Darf ich frage, was an meinem Code unübersichtlich ist?
Das ist der Code zum .div Container, der bei Firefox so einen großen Abstand anzeigt!

http://www.perun.net/2004/07/04/fehlverhalten-von-ie…
Fehlverhalten von IE im Boxmodell

Habe diesen diesen Artikel durchgelesen und weil ich von HTML absolut nichts verstehe, möchte ich dich gerne fragen, wwelcher Doctype für mich korrekt wäre?

Ich habe einfach den erst besten genommen, was sicherlich nicht grad schlau von mir gewesen ist! Nämlich diesen hier…

HTML 4.01:

Woran sehe ich denn, welches der korrekte Doctype für meine Seite ist?!
Ebenso ist dieser Zusatz „Die DTDs müssen in folgender Form sein:“ mit vermerkt. Wie genau darf ich das auffassen?
Soll ich etwa all diese Doctypes auf meiner Seite verwenden oder nur eins von denen?

HTML 4.01:

XHTML 1.0:

XHTML 1.1:

Sowie ich es auf der Seite http://de.selfhtml.org/html/allgemein/grundgeruest.h…, welches vom Vorposter angebeben ist (vielen herzlichen Dank an dieser Stelle) gelesen habe, soll ich nur eins der mir zugesprochenen Doctype verwenden.

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

Eventuell in diesem Zusammenhang auch hilfreich:

Validiere Deine Seiten:
http://validator.w3.org/check?uri=http://www.myspace…
476 Fehler

http://jigsaw.w3.org/css-validator/validator?uri=htt…
7 Fehler

WAS BEDEUTEN DIESE FEHLER? WAS GENAU SAGEN SIE AUS?
DAS IST ECHT EINE NR. GROSS FÜR MICH!

Du missbrauchst Tabellen zu Layoutzwecken.
Verwende korrektes XHTML und CSS.

WIE DARF ICH DAS VERSTEHEN? HABE 2 Tabellen auf meiner Seite mit HTML CODES.

Der screenshot belegt es!
Sicherlich kann ich auch die Werte für margin-top ändern,
sodasss der Abstand im Firefox normal angezeigt wird, aber
dies’ würde im IE den unteren .div überlappen, somit könnte
ich das nicht mehr optisch erklären. Na klar, hat der IE seine
Macken aber in meinem Fall hat es korrekt angezeigt. Ganz
Einfach und nichts da mit Widerspruch!

Im Großen und Ganzen hast du mir nicht weiterhelfen können!
Ich möchte dieses Problem nur für IE und FF beheben (es sind
die meisten genutzen Browsern. Von Opera und was es sonst noch
gibt will ich garnichts wissen). Ist das denn so
unverständlich?

man kann dieses Forum benutzen, um fehler zu beseitigen ,

a la das ist mein Code, nu schreibt den mal um das es funktioniert,
oder man kann nach der Ursache des fehlers fragen, denn die Ursache kann auch einiges zur Fehlervermeidung beitragen

aber noch mal für dich, das du es auch verstehst

wenn es auf beiden broswern laufen soll, musst du 2 styles machen, einen für IE, einen für FF,

matze

P.S.: wäre die erste Seite, die nur auf dem IE korrekt angezeigt wird

man kann dieses Forum benutzen, um fehler zu beseitigen ,

a la das ist mein Code, nu schreibt den mal um das es
funktioniert,
oder man kann nach der Ursache des fehlers fragen, denn die
Ursache kann auch einiges zur Fehlervermeidung beitragen

aber noch mal für dich, das du es auch verstehst

wenn es auf beiden broswern laufen soll, musst du 2 styles
machen, einen für IE, einen für FF,

matze

P.S.: wäre die erste Seite, die nur auf dem IE korrekt
angezeigt wird

Sag mal, ist das denn wirklich so unverständlich?
Weil ich sicherlich nicht zu den HTML und CSS Experten gehöre, bin ich grad aus diesem Grund hier in diesem Forum. Und ja, zum Teufel - das ist mein .div Code und wie ich meine Frage zu stellen habe geht dich überhaupt nichts an! Hauptsache ich werde verstanden! Und ich wurde verstanden!

P.S.: wäre die erste Seite, die nur auf dem IE korrekt
angezeigt wird

Um Gottes Willen bist du penible! Dazu habe ich mich bereits geäussert! Und um diese unangebrachte Konversation hier zu beenden mache ich hier mal einen fetten PUNKT.

Gruß
wizzy

Hallo wizzy!

„wizzy“ schrieb:

Eventuell in diesem Zusammenhang auch hilfreich:

Validiere Deine Seiten:
http://validator.w3.org/check?uri=http://www.myspace…
476 Fehler

http://jigsaw.w3.org/css-validator/validator?uri=htt…
7 Fehler

WAS BEDEUTEN DIESE FEHLER? WAS GENAU SAGEN SIE AUS?
DAS IST ECHT EINE NR. GROSS FÜR MICH!

Das bedeutet, das der HTML-Code Deiner Seiten nicht valide ist.

Lies dazu bitte auch:
http://www.hessendscher.de/benefits/index05.htm

Und mit 476 Fehlern ist die Wahrscheinlichkeit sehr hoch, daß nicht
alle Browser Deinen HTML-Code korrekt interpretieren werden (können).

Du missbrauchst Tabellen zu Layoutzwecken.
Verwende korrektes XHTML und CSS.

WIE DARF ICH DAS VERSTEHEN? HABE 2 Tabellen auf meiner Seite

Ich zähle da wesentlich mehr. :wink:

Mein Rat an Dich, auch wenn dies mit hohem Aufwand verbunden ist:
Abreissen und neu machen.

Bei Erstellung Deiner Seite solltest Du den Inhalt vom Layout
trennen.

Hierbei sollte ein konsequenter Einsatz von (X)HTML
(für den Inhalt) und Style Sheets = CSS (für das Layout)
erfolgen.

Lies zunächst intensiv:
http://www.hessendscher.de/benefits/
http://jendryschik.de/wsdev/einfuehrung/
http://aktuell.de.selfhtml.org/

speziell:
http://aktuell.de.selfhtml.org/weblog/css-spaltenlay…
Grundlagen für Spaltenlayout mit CSS

mit HTML CODES.

Sorry, aber Dein HTML-Code ist ein Sammelsurium aus Tabellen, divs,
iframes, styles…

Der Zeilenumbruch br wird mal gross, mal klein geschrieben.
Deine Stylesheets sind mit vielen Fehlern behaftet:

z.B.
td, .text, div, input {color: CCCCCC;}
ist eigentlich:
td, .text, div, input {color: #CCC;}

Gib mal Deine Stylesheets in das Textfeld ein, und es werden
Dir alle Fehler angezeigt:
http://jigsaw.w3.org/css-validator/validator-text.html

Beschäftige Dich intensiv mit CSS:
http://www.resrc.de/index.php?hs=1&kategorie=2&unter…
http://www.zufaulfuercss.com/links.htm
http://www.ndesign-studio.com/resources/links/

Noch ein paar interessante Links hierzu:

http://www.vorsprungdurchwebstandards.de/theory/ein-…
Ein Herz für Tabellen

http://www.stopdesign.com/articles/throwing_tables/ bzw.
http://yatil.de/Webentwicklung/tabellen-aus-dem-fens…
Tabellen aus dem Fenster werfen

http://seybold.jan-andresen.de/
Warum Layout mit Tabellen dumm ist

http://www.netzkritik.de/art/152.shtml
Bloggt das Webdesign?

http://www.cominweb.de/content/wissen.html
Webdesign

http://wiki.paland.net/index.php?WebDesignTNG
Keine Layout-Tabellen benutzen

http://www.einfach-fuer-alle.de/artikel/linearisierung/
Linearisierung – und alles wird gut

http://www.einfach-fuer-alle.de/artikel/gruenerpunkt/
Der Grüne Punkt für Websites?

http://barrierefrei.e-workers.de/p_table.php
Table vs. No-Table

http://barrierefrei.e-workers.de/workshops/workshop1…
CSS-Workshop

PS: Postings, die nur in Großbuchstaben geschrieben sind, werden
als Schreien interpretiert und sind daher nicht gern gesehen :wink:

Gruss Oliver

Hallo wizzy!

„wizzy“ schrieb:

Eventuell in diesem Zusammenhang auch hilfreich:

Validiere Deine Seiten:
http://validator.w3.org/check?uri=http://www.myspace…
476 Fehler

http://jigsaw.w3.org/css-validator/validator?uri=htt…
7 Fehler

WAS BEDEUTEN DIESE FEHLER? WAS GENAU SAGEN SIE AUS?
DAS IST ECHT EINE NR. GROSS FÜR MICH!

Das bedeutet, das der HTML-Code Deiner Seiten nicht valide
ist.

Lies dazu bitte auch:
http://www.hessendscher.de/benefits/index05.htm

Und mit 476 Fehlern ist die Wahrscheinlichkeit sehr hoch, daß
nicht
alle Browser Deinen HTML-Code korrekt interpretieren werden
(können).

Du missbrauchst Tabellen zu Layoutzwecken.
Verwende korrektes XHTML und CSS.

WIE DARF ICH DAS VERSTEHEN? HABE 2 Tabellen auf meiner Seite

Ich zähle da wesentlich mehr. :wink:

Mein Rat an Dich, auch wenn dies mit hohem Aufwand verbunden
ist:
Abreissen und neu machen.

Ja, aber ob das wieder was wird? Die Seite www.myspace.com hat alleine schon 264 Fehlern, wie kann denn meine dann noch unter 264 liegen?!
Zudem wollte ich dich fragen, welches der korrekte Doctype für meine Seite wäre. Es ist ja keine normale Homepage, die ich da mache sondern es ist einfach ne Seite, die myspace.com verwaltet und es allen Usern anbietet. Ich habe bis jetzt sämtliche links von anderen Usern auf ihre Validation geprüft und keine zeigt mir mit unter 200 Fehlern an. Liegt es vielleicht auch daran, dass die Startseite also myspace.com alleine schon soviele Fehler aufweist?

Bei Erstellung Deiner Seite solltest Du den Inhalt vom Layout
trennen.

Den inhalt vom Layout trennen? Ich meine das gemacht zu haben aber irgendwie scheint es doch nicht so zu sein. Mein Layout besteht insgesamt aus 6 Divs und einem Guestbook. Ich habe diesen Code bei (…weiss die Seite nicht mehr…), generieren lassen. Und dort zeigte er mir an, wo ich was einzufügen habe. Und in diesen .div Container habe ich regelrecht mein Inhalt eingefügt. Bis dahin lief es auch wunderbar aber nun? Mein einziges Problem ist ja wirklich nur, dass die Abstände zwischen 2 Divs in IE nicht korrekt angezeigt wird. Eigentlich wollte ich mich nicht intensiv mit HTML und CSS beschäftigen, weil ich dafür recht wenig Zeit habe und vom Fach ohnehin schon nicht verstehe geschweige denn all die Fachbegriffe, die mich verzweifeln machen.

Hierbei sollte ein konsequenter Einsatz von (X)HTML
(für den Inhalt) und Style Sheets = CSS (für das Layout)
erfolgen.

Lies zunächst intensiv:
http://www.hessendscher.de/benefits/
http://jendryschik.de/wsdev/einfuehrung/
http://aktuell.de.selfhtml.org/

speziell:
http://aktuell.de.selfhtml.org/weblog/css-spaltenlay…
Grundlagen für Spaltenlayout mit CSS

mit HTML CODES.

Sorry, aber Dein HTML-Code ist ein Sammelsurium aus Tabellen,
divs,
iframes, styles…

Der Zeilenumbruch br wird mal gross, mal klein geschrieben.
Deine Stylesheets sind mit vielen Fehlern behaftet:

z.B.
td, .text, div, input {color: CCCCCC;}
ist eigentlich:
td, .text, div, input {color: #CCC;}

Gib mal Deine Stylesheets in das Textfeld ein, und es werden
Dir alle Fehler angezeigt:
http://jigsaw.w3.org/css-validator/validator-text.html

Beschäftige Dich intensiv mit CSS:
http://www.resrc.de/index.php?hs=1&kategorie=2&unter…
http://www.zufaulfuercss.com/links.htm
http://www.ndesign-studio.com/resources/links/

Noch ein paar interessante Links hierzu:

http://www.vorsprungdurchwebstandards.de/theory/ein-…
Ein Herz für Tabellen

http://www.stopdesign.com/articles/throwing_tables/ bzw.
http://yatil.de/Webentwicklung/tabellen-aus-dem-fens…
Tabellen aus dem Fenster werfen

http://seybold.jan-andresen.de/
Warum Layout mit Tabellen dumm ist

http://www.netzkritik.de/art/152.shtml
Bloggt das Webdesign?

http://www.cominweb.de/content/wissen.html
Webdesign

http://wiki.paland.net/index.php?WebDesignTNG
Keine Layout-Tabellen benutzen

http://www.einfach-fuer-alle.de/artikel/linearisierung/
Linearisierung – und alles wird gut

http://www.einfach-fuer-alle.de/artikel/gruenerpunkt/
Der Grüne Punkt für Websites?

http://barrierefrei.e-workers.de/p_table.php
Table vs. No-Table

http://barrierefrei.e-workers.de/workshops/workshop1…
CSS-Workshop

PS: Postings, die nur in Großbuchstaben geschrieben sind,
werden
als Schreien interpretiert und sind daher nicht gern gesehen
:wink:

Gruss Oliver

Ich danke dir für deine Hilfe!
Ich habe so einiges noch vor mir - all die vielen für mich unverständnlichen Texte mit seinen Fachbegriffen :0)

HERZLICHEN DANK!!!
P.S. Wer hätte gedacht, dass ich für so ein kl. Problem so viel Aufwand treiben muss?

Hallo wizzy!

„wizzy“ schrieb:

Ja, aber ob das wieder was wird? Die Seite www.myspace.com hat
alleine schon 264 Fehlern, wie kann denn meine dann noch unter
264 liegen?!

Richtig!

Zudem wollte ich dich fragen, welches der korrekte Doctype für
meine Seite wäre.

Angesichts der beschriebenen Fehler ergibt die Verwendung
eines Doctypes hier meiner Meinung nach keinen Sinn.

Siehe auch:
http://artikel.fabrice-pascal.de/dtd/
http://www.mediaevent.de/xhtml/doctype.html
http://www.carsten-protsch.de/zwischennetz/doctype/i…
http://puredesign.ch/lounge/artikel/doctype.shtml

Es ist ja keine normale Homepage, die ich da
mache sondern es ist einfach ne Seite, die myspace.com
verwaltet und es allen Usern anbietet. Ich habe bis jetzt
sämtliche links von anderen Usern auf ihre Validation geprüft
und keine zeigt mir mit unter 200 Fehlern an. Liegt es
vielleicht auch daran, dass die Startseite also myspace.com
alleine schon soviele Fehler aufweist?

Ja, genau daran liegt es.

Den inhalt vom Layout trennen? Ich meine das gemacht zu haben

Lies bitte die Links in meinem Beitrag weiter oben.

aber irgendwie scheint es doch nicht so zu sein. Mein Layout
besteht insgesamt aus 6 Divs und einem Guestbook. Ich habe
diesen Code bei (…weiss die Seite nicht mehr…), generieren
lassen.

Solche …Seiten… produzieren meist „HTML-Schrott“ :wink:

Und dort zeigte er mir an, wo ich was einzufügen habe.
Und in diesen .div Container habe ich regelrecht mein Inhalt
eingefügt. Bis dahin lief es auch wunderbar aber nun? Mein
einziges Problem ist ja wirklich nur, dass die Abstände
zwischen 2 Divs in IE nicht korrekt angezeigt wird.

Wenn es Dir nur darum geht:

Verwende einen CSS-Hack für den IE 5, IE5.5 und IE6
(im IE 7 sollte das Problem nicht auftreten):
http://www.lipfert-malik.de/webdesign/tutorial/css.h…
bzw.
http://www.lipfert-malik.de/webdesign/tutorial/bsp/c…

Die eigentlichen Probleme im HTML-Code werden hiermit aber nicht beseitigt.

Eigentlich
wollte ich mich nicht intensiv mit HTML und CSS beschäftigen,
weil ich dafür recht wenig Zeit habe und vom Fach ohnehin
schon nicht verstehe geschweige denn all die Fachbegriffe, die
mich verzweifeln machen.

Dann lass es halt, es zwingt Dich keiner dazu. :wink:

Oder:
Lerne HTML zu verstehen und dann umzusetzen.
Schau Dir den Quelltext von validen (X)HTML-Seiten an.

Eine mit einfachem, sauberen Code geschriebene Seite:
http://www.hessendscher.de/benefits/sample03.htm
sieht mit CSS so aus:
http://www.hessendscher.de/benefits/sample04.htm

Dein HTML-Code könnte also von _2721 Zeilen_ auf höchstens
200 Zeilen schrumpfen.
Auch die dazu gehörige Stylesheet-Datei wäre dann wesentlich
kleiner. Von dem vorgefertigten, unübersichtlichen Code und
der von Dir genutzten Domain mußt Du Dich dann allerdings
verabschieden.

Ich danke dir für deine Hilfe!

Bitte, gern geschehen.

Ich habe so einiges noch vor mir - all die vielen für mich
unverständnlichen Texte mit seinen Fachbegriffen :0)

HERZLICHEN DANK!!!
P.S. Wer hätte gedacht, dass ich für so ein kl. Problem so
viel Aufwand treiben muss?

Machst Du nun die kleine Änderung oder den Rundumschlag? :wink:

Gruss Oliver

Zudem wollte ich dich fragen, welches der korrekte Doctype für
meine Seite wäre.

Angesichts der beschriebenen Fehler ergibt die Verwendung
eines Doctypes hier meiner Meinung nach keinen Sinn.

Und welches ist nun der korrekte Doctype?

Hallo wizzy!

„wizzy“ schrieb:

Zudem wollte ich dich fragen, welches der korrekte Doctype für
meine Seite wäre.

Angesichts der beschriebenen Fehler ergibt die Verwendung
eines Doctypes hier meiner Meinung nach keinen Sinn.

Und welches ist nun der korrekte Doctype?

Verwende HTML4.01 transitional und gib keine url an:

Dann wird Deine Seite von den meisten Browsern im Quirks-Modus angezeigt.
Dies ist deshalb nötig, da Dein HTML invalid ist und Du veraltete Techniken benutzt (Tabellen-Layout).

Gruss Oliver