Hi driver,
kommt etwas spät aber trotzdem,
schöne Seite, Design finde ich gelungen.
CSS ist leider nicht valide.
Schau mal hier
Hier noch zwei Links die in der Webdesignerszene gerne genutzt werden:
Webseitenqualität testen
und
Einzelseite
Imho sehr hilfreich beim testen. 
Hi,
Zitat von driver:
sicher, wenn du padding und
margin auf 0 setzt, dann macht ers richtig. ABER DAS IST JA DAS PROBLEM.
padding soll nicht 0 sein.
an deinem posting sehe ich imho das du was in den falschen Hals kriegts, weil ich das zu schlecht erkläre.
Sorry
Nein, padding soll nicht null sein, das geht ja aus dem Codeschnipsel eindeutig hervor.
ich meinte padding und margin wird ganz oben in der CSS auf null gesetzt um erst mal gleiche Bedingungen zu schaffen.
Danach wird padding und margin weiter unten in der CSS für jedes Element nach Wunsch deklariert, d.h.
Erst mal schafft man gleiche Bedingungen in allen Browser, dann setzt man die Abstände einzeln fest und guckt immer wieder, ob das noch immer in allen Browser paßt.
So hat man es später viel leichter Fehler zu lokalisieren und zu beheben, ich denke das weißt du genauso gut wie ich.
Bei einer CSS-Datei mit 500-700 Codezeilen steht man ja sonst wie ein Ochs vorm Berg.
Man will sich ja nicht mehr Arbeit machen als unbedingt notwendig.
Hoffe das ist jetzt besser rübergekommen.:)
Zitat von driver:
....bis jetzt kam ja noch
nix produktives von dir in diese richtung...
Stimmt, aber ohne das komplette Markup + Css-Datei gleicht die Fehlersuche bei so einem Codeschnipsel Kaffesatzleserei.
Die Ursache liegt ja oft nicht direkt am Codeschnipsel sondern an einer falschen oder fehlenden Deklaration eines anderen Elements, was dann Auswirkungen auf den Codeschnipsel hat
Wäre bei dem ersten Posting direkt Markup + CSS-Datei dabei gewesen, wäre die Diskussion gar nicht erst entstanden.
Das Problem wäre längst keins mehr!
Gruß nach Franken
koslowski
Hi,
Zitat von driver:
dann bitte eine erklärung hierfür:
http://www.devil-driver.de/1.html
das ist ja nicht schwierig.
Wenn ich den Code so übernehme, dann geht der IE durch die fehlende Doctype-deklaration sofort in den Quirksmodus und da versteht er das Boxmodell nicht mehr.
Deshalb schauts da dann auch anders aus als im FF, Opera oder Netscape.
Definiere ich den korrekten Doctype oben, setzt der IE7 und der IE6 den #inner exakt in die Mitte von #test.
FF, Opera und Netscape schieben #inner ein Stückchen nach unten sodaß #inner nicht mehr exakt in der Mitte von #test steht.
Der Grund dafür ist doch offensichtlich:
Die unterschiedlichen browserinternen Vorformatierungen.
Hätte man einen vernünftigen CSS-Prolog mit u.a. * {padding:0;
margin:0; } (zum korrekten Prolog fehlen natürlich noch ein paar Deklarationen) hätte man gleiche Ausgangsbedingungen geschaffen und mit den späteren korrekten Formatierungen hätte es in allen Browsern gleich ausgeschaut (Kaskade!!).
Zitat von jojo87:
Der ie macht es ganz einfach falsch. Darum, wie ich oben schon beschrieben habe, lieber möglichst wenig padding und dafür mehr margin (evtl. dann halt hier und da einen extra div) einsetzen, dass spart im Vergleich zu conditional comments ne Menge Code und ist nicht wirklich schwierig.
Natürlich mach der IE vieles falsch, aber ob man padding oder margin nimmt ist Jacke wie Hose.
Bei margin hat er sogar noch mehr Bugs. (z.B. double-float-margin-bug, der bekannteste von allen)
Der Grund für diese Bugs liegt ja i.d.R. am HasLayout-System des IE.
Deshalb schaue ich mir meinen Code immer erst im FF an, weil der nämlich die Webstandards richtig umsetzt (und wegen der vielen nützlichen Tools z.B. Web-developer, Firebug, HTML-tidy, CSS-Validator).
Dann gucke ich im IE und schreibe ein paar Korrekturen in die Cond. Comm., fast immer nicht mehr als 5-6 Stück.
In der Regel fehlt dem betroffenen Element Layout und das bekommt es dann zugewiesen (* html Element { height:1%;
z.B. ).
Zitat von jojo87:
Und damit es nicht ganz offtopic wird:
@Mary Jane: poste doch bitte mal deinen GANZEN Code, dann werden wir das schon irgendwie hinbiegen
Ganz meine Meinung, schließlich ist der Fred ja da, um MaryJanes Problem zu lösen. 
Hi driver,
Zitat von driver:
das problem is das hier:
Code:
padding-left: 20px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
sorry, ich denke mit diesem Codeschnipsel können wir das Problem nur sehr schlecht verifizieren.
Das geht meistens nur mit dem kompletten Markup und der kompletten CSS-Datei.
Zitat von driver:
ie zählt des padding zum width hinzu, beim ff beinhaltet width bereits das padding.
ich zitiere einfach mal aus einem Grundlagenbuch für CSS (Little Boxes von Peter Müller):
Die Gesamtbreite einer box setzt sich aus width, padding, border und margin zusammen.
Das heißt: Gesamtbreite der Box=
width + padding-left + padding-right + border-right-width
+ border-left-width + margin-left + margin-right
Das war ein Beispiel aus einem Buch in anderen steht genau das Gleiche.
Das gilt für alle Browser.
Der IE macht sogar die allermeisten Fehler in Bezug auf das BOxmodell.
Ich nehme mal an, du hast mich nicht verstanden oder wir reden aneinander vorbei.
Denn diese Definition von der Gesamtbreite einer Box ist fakt und keine bloße Behauptung von mir.
Ach ja, das hier:
14. ich bin direkt ! wenn du mit kritik nicht umgehen kannst, meide mich.
ich hab gelernt das es nix bringt leuten honig ums maul zu schmieren
oder ewig um den "heißen brei" zu reden....
gilt auch von meiner Seite aus. 
Hi,
Zitat von jojo87:
Der ie behandelt padding Angaben generell anders als der ff/opera. Das hatmit dem Boxmodell und nicht mit Browservoreinstellungen zu tun.
Richtig.
Aber nur wegen der vielen Fehler des IE.
Um die zu beheben gibt es ja die Conditionell Comments.
Zitat von MaryJane:
mit * {padding:0; margin:0; } bekomme ich aber im jeden Browser nen Abstand ... ich möchte aber überhaupt keinen Abstand.
Sorry, falsch.
Damit setzt du alle Abstände auf null. * ist der Universalselektor.
Das ist die erste Zeile in deiner CSS.
Davon ausgehend definiert du weiter unten alle Abstände.
Das erleichtert die Fehlersuche ungemein.
Der Sinn davon ist ja vor allen Dingen gleiche Ausgangsbedingungen für alle Browser zu schaffen sonst suchst dir doch nen Wolf bei Fehlern.
hi,
Zitat von driver:
liegt am padding. ie, ff und opera interpretieren des unterschiedlich....
aber nur wenn man keinen vernünftigen CSS-Prolog definiert hat,
u.a. mit * {padding:0; margin:0; }.
Damit werden alle Abstände auf null gesetzt und die unterschiedlichen browserinternen Vorformatierungen die Abstände betreffend eingeebnet.
[/quote]
