73%
22%
19%
11%
6%
Sonntag, 10. April 2005, 13:46
Fakt ist aber das wenn ich z. B den Kopfbalken mit 100 px angebe Firefox ihn mit 116 anzeigt und der IE mit 100 wie es sein soll.
Hier der IE
und hier Firefox
und das ist der Code
< div style="position: absolute; width: 900; height: 100px; z-index: 1; left: 0px; top: 10px; right: 10px; border-right: 6px solid #ECE8FA; border-top: 6px solid #ECE8FA; border-bottom: 6px solid #ECE8FA; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #FD0D09" id="Schrift_Rahmen">
Wie man sieht height: 100px
Hier der IE
und hier Firefox
und das ist der Code
< div style="position: absolute; width: 900; height: 100px; z-index: 1; left: 0px; top: 10px; right: 10px; border-right: 6px solid #ECE8FA; border-top: 6px solid #ECE8FA; border-bottom: 6px solid #ECE8FA; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #FD0D09" id="Schrift_Rahmen">
Wie man sieht height: 100px
Sonntag, 10. April 2005, 14:00
Zitat
Original von Reiner
und das ist der Code
< div style="position: absolute; width: 900; height: 100px; z-index: 1; left: 0px; top: 10px; right: 10px; border-right: 6px solid #ECE8FA; border-top: 6px solid #ECE8FA; border-bottom: 6px solid #ECE8FA; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #FD0D09" id="Schrift_Rahmen">
Wie man sieht height: 100px
Ja + 2x Padding je 1 Px + 6x Border je 6 px = 114 Pixel.
Und bei meinem Screenshot, mit Gimp Pixel gemessen, ist die Leiste genau 114 Px hoch.
Ja, der IE und der Firefox interpretieren die Angaben eben anders, damit wirst du sich abfinden müssen.
Oder du schreibst einen IE-Bugfix. Das ist aber leider nur über CSS in einer externen Datei oder im Head möglich, nicht innerhalb von style="".
mfg Gimli
PS: Design schonmal mit Opera betrachtet, setzt der das um wie der IE oder wie der Firefox?
PPS: Mit relativer Positionierung hättest du die probleme wahrscheinlich nicht.
"Linux is evolution, not intelligent design." - Linus Torvalds
Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Gimli« (10. April 2005, 14:06)
Sonntag, 10. April 2005, 15:27
Ok, das ist eigentlich ganz einfach.
Hier haben wir normalen CSS-Code welcher von allen interpretiert wird:
Jetzt kann man Code schreiben, welcher nur vom IE interpretiert wird. Das läuft wie folgt:
Weshalb funktioniert es? Im 1. Codebeispiel, gilt der Abschnitt für alle Elemente mit class="class_so_und_so". Man könnte das beschränken, indem man zB im Css-text schreibt:
div .class_so_und_so { inhalt .. }
Dann wird das nur für divs mit der Klasse "class_so_und_so" benutzt.
So, jetzt zu * html <element>
* steht für alles
html steht für die Dokumentwurzel, html
<lement> für das element
Die Dokumentwurzel müsste ja logischweise das höchste sein. Weiter zurück geht nicht. Nicht beim IE. Der Denkt doch wirklich, html sei ein Kindelement von "allem". Deshalb funktioniert das nur im Internet-Explorer.
Ich hoffe, meine Erklärung war verständlich. Hier ein Beispielcode für dich:
[ . ist für class, # für id, eine id muss einmalig sein im Dokument(W3C-Definition)]
Bei IE-Bugfix wurde nur die Höhe geändert. Mehr ist nicht nötig, weil der Rest identisch ist.
Der IE-Bugfix muss unter dem normalen CSS-Code stehen, weil er sonst wieder überschrieben werden würde. Daher den IE-Bugfix oder die IE-Bugfixes immer am Schluss aufschreiben.
mfg Gimli
Hier haben wir normalen CSS-Code welcher von allen interpretiert wird:
|
Quellcode |
1 2 3 4 |
.class_so_und_so {
blub; quarck;
muh: 5;
}
|
Jetzt kann man Code schreiben, welcher nur vom IE interpretiert wird. Das läuft wie folgt:
|
|
Quellcode |
1 2 3 4 |
* html .class_so_und_so {
blub; blubber;
muh: 2;
}
|
Weshalb funktioniert es? Im 1. Codebeispiel, gilt der Abschnitt für alle Elemente mit class="class_so_und_so". Man könnte das beschränken, indem man zB im Css-text schreibt:
div .class_so_und_so { inhalt .. }
Dann wird das nur für divs mit der Klasse "class_so_und_so" benutzt.
So, jetzt zu * html <element>
* steht für alles
html steht für die Dokumentwurzel, html
<lement> für das element
Die Dokumentwurzel müsste ja logischweise das höchste sein. Weiter zurück geht nicht. Nicht beim IE. Der Denkt doch wirklich, html sei ein Kindelement von "allem". Deshalb funktioniert das nur im Internet-Explorer.
Ich hoffe, meine Erklärung war verständlich. Hier ein Beispielcode für dich:
[ . ist für class, # für id, eine id muss einmalig sein im Dokument(W3C-Definition)]
|
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 |
#header {
height: 86px
border-top: 6px solid #000000;
border-bottom: 6px solid #000000;
padding-top: 1px;
padding-bottom: 1px;
}
* html #header {
height: 100px;
}
|
Bei IE-Bugfix wurde nur die Höhe geändert. Mehr ist nicht nötig, weil der Rest identisch ist.
Der IE-Bugfix muss unter dem normalen CSS-Code stehen, weil er sonst wieder überschrieben werden würde. Daher den IE-Bugfix oder die IE-Bugfixes immer am Schluss aufschreiben.
mfg Gimli
"Linux is evolution, not intelligent design." - Linus Torvalds
Sonntag, 10. April 2005, 15:52
Original von Reiner
Na ja.. so einfach ist es für einen Anfänger nicht
Aber super erklärt...
Werde mal schauen wie weit ich komme..
Danke
CSS-Anfänger sollten erstmal das hier durchlesen:
http://www.css4you.de/wscss/index.html
Dann solltest du ein gute Wissen haben. Denn CSS beherrscht du ja an sich schon, nur hast du es bisher in sytle="" gepackt. Das ist keine grosse Sache, zu verstehen wie man eine CSS-Datei aufbaut.
Und sonst gibt es ja immer noch Google, Forensuche und kompetente Forenbenutzer
[man beachte die Reihenfolge ] mfg Gimli
"Linux is evolution, not intelligent design." - Linus Torvalds