Tag "Internet Explorer"
double-float margin Bug im Internet Explorer
Beim Erstellen einer Webseite ist mir heute ein schon seit Monaten bekannter Fehler passiert, der einiges an kostbarer Zeit gekostet hat: der ‘double-float margin bug’ zu deutsch ‘doppelter Außenabstandsfehler’. Ich entwickle Webseiten bequem im Firefox. Um die Browserkompatibilität zu testen, verwende ich den Internet Explorer 6 und siehe da, eine eigenartige Darstellung bereitet mir Kopfzerbrechen…
Ich platziere ein left float in einem Kontainer und mache ein left margin im float, um es nach rechts, also von der linken Seite des Kontainers, zu entfernen. Man sollte meinen, das wäre ganz einfach. Nein, denn der Internet Explorer verdoppelt den Abstand!
Unten habe ich eine Graphik zur Verdeutlichung eingefügt: ein einfaches div, in dem sich meine left-floated div Box (orange) befindet. Die Box hat einen left margin von “100px”, dh. ein 100px-breiter Spalt ist zwischen linker Kante des Kontainers and der linken Kante meiner float box.
Hier ein Auszug meines verwendeten CSS:
.meinefloatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*Der letzte Wert ist für den 100px left margin Abstand verantwortlich*/
}
Der exakt gleiche Code produziert im Internet Explorer6 einen Abstand von 200px!? Folgend eine Graphik, die die Ausgabe im Internet Explorer zeigt.
Einige Google-Suchanfragen später dämmerte es mir – der IE benötigt unbedingt ein display: inline, um den Abstand korrekt darzustellen!
Und hier des Rätsels Lösung: (das CSS funktioniert im Firefox und Internet Explorer)
.meinefloatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
/*funktioniert im FF und IE*/
}
Laut Aussage von Microsoft soll der double-float margin bug mit dem Internet Explorer 7 behoben sein. Doch wer garantiert uns Entwicklern die fehlerfreie Interpretation von CSS im Internet Explorer 7?
Verwaschene Schrift bei Internet Explorer 7
Eine Ãnderung, die beim Internet Explorer 7 sofort auffällt, ist, dass die Schrift anders dargestellt wird. Der Grund dafür ist die standardmäßig aktivierte “Cleartype”-Einstellung, die den Text nun dreidimensional darstellen soll und angeblich auf Flachbildschirmen für eine bessere Lesbarkeit von Texten sorgen soll. Ich bin nicht dieser Meinung und habe dieses “Feature” deaktiviert.
Die Deaktivierung der “Cleartype”-Eigenschaft funktioniert folgendermaßen: Im Menü “Tools” wählen wir den Menüpunkt “Internet Options” aus. Es erscheint ein kleines Fenster. Dort wählen wir ganz rechts oben den Karteireiter “Advanced” aus. Wir scrollen im Textfenster bis links der Eintrag “Multimedia” erscheint und deaktivieren das Kästchen neben dem Eintrag “Use Clear Type”. Anschliessend klicken wir auf “OK”. Nun muss nur noch der Browser neu gestartet werden und wir können die Texte wieder in gewohnter Art und Weise lesen.
Scrollbalken im Browser zwingend ausblenden
Da die Option scroll="no" nicht HTML konform ist, gibt es ein noch nicht allzu bekanntes Workaround um den Scrollbalken im Browser auszublenden. Dazu fügt man im Body-Tag folgende Eigenschaft hinzu:
<body style="overflow:hidden;">
Die Eigenschaft kann auch gleich im CSS definiert werden:
body { overflow: hidden; }
Getestet im Internet Explorer 6 und Firefox 1.5
- Fliesen Halada: „Es hat alles so perfekt funktioniert! medani webdesign hat sich optimal um meine Anliegen gekümmert und alles in meinem Sinne prompt und verlässlich ...
