Detlef G.: pixellayout mit fixierten Bereichen

Beitrag lesen

Hallo Melanu

die dritte Version gefällt mir sehr gut. Besonders der auch bei kleinen Fenstern zentriete Kopfbereich gefällt mir sehr gut.

Dafür benötigt diese auch am meisten zusätzliche Elemente im XHTML.

Ich habe noch eine Frage dazu: Warum ist hier noch eine Sonderbeachtung des IE 5.0 nötig und was erreichts Du mit dem oben zitierten? Bzw. mit folgendem:

Damit bei den alten IEs der #kopf nicht den Scrollbalken verdeckt, wird #kopfbereich um 16 Pixel nach links verschoben und mit overflow:hidden versehen. Das sorgt dafür, dass er immer genau vor dem Scrollbalken abgeschnitten wird. Dadurch verschiebt sich der darin zentrierte #kopf um 8 Pixel nach links, was dann bei margin-left berücksichtigt wird.

Von Zeit zu zeit, aus nicht wirklich nachvollziehbaren Gründen, schneidet der IE 5.0 #kopf dann allerdings nicht 16px vom Seitenrand sondern 16px vom Scrollbalken entfernt ab, was eine hässliche gelben Lücke ergibt. Deshalb wird diese Verschiebung für ihn wieder aufgehoben.

  • html + body #kopfbereich { /* nur IE 5.0 */
    left: 0;
    }
  
Dann darf natürlich auch kein 8px Ausgleich bei margin-left von #kopf durchgeführt werden.  
  

> ~~~css

* html.* #kopf { /* nicht IE 5.0 */  

> margin-left:-487px; }

Grundsätzlich nochmal die Frage zu dem Verwenden von CSS-Hacks und Conditional Comments: Warum bevorzugst Du CSS-Hacks?

Weil ich dann alle zusammengehörigen Regeln auch auf einem Haufen habe. Ich sehe welche Regeln gesetzt sind und welche, für die IEs unpassenden ich wieder aufheben muss, ohne erst ewig scrollen oder zum Fenster mit der anderen CSS-Datei wechseln zu müssen.

Für mich erscheint es erstmal praktischer zu sein Conditional Comments zu benutzen und dann einfach mehrer CSS-Dateinen anzulegen. (Eine für die normalen Browser, eine für die alten IE Versionen . . . ).

Bei dem Beispiel mit Hacks schickt der Browser eine Anfrage zum Server, der schickt ihm dann 1.777 Bytes CSS.
Bei Verwendung von Conditional Comments würde der Browser z.Z. drei Anfragen schicken und bekommt dann 976 + 640 + 80 Bytes = 1696 Bytes. Dafür hat er aber statt einmal, drei mal auf die Serverantwort gewartet und auch zusätzlich dreimal je etwa 1 KB für die reine Kommunikation mit dem Server übertragen.

Und was passiert, wenn dir auffallen sollte, dass der IE 7 auch noch eine kleine Anpassung benötigt, und dann vielleicht an irgendeiner Stelle, der IE 5.5 oder der IE 8?
Willst du dann 6 CSS-Dateien einbinden?
Conditional Comments gibt es nur für IE, wenn da wirklich mal Anpassungen für einen der anderen Browser notwendig sind, dann geht das nur mit Hacks. Dann wärde ein Teil der Anpassungen per Hack im CSS und der andere Teil in separaten Dateien.

Mit CSS-Hacks habe ich doch sogar mehr Schreibarbeit und weniger Übersicht . . .

Finde ich nicht, * html ist schnell getippt.
Alle Eigenschaften für ein Element müsste ich mir an mehreren Orten zusammensuchen. So hat man sie doch auf einen Blick. (Ich habe trotzdem noch ein paar Eigenschaften übersehen und versehentlich doppelt gesetzt.)

Oder sehe ich das ganz falsch? Haben Conditional Comments viel mehr Nachteile, weil sie ja vielleicht nicht immer funktionieren, langsam sind . .  . ?

Conditional Comments können sinnvoll sein, z.B. wenn ausschließlich bestimmte IEs ein JavaScript benötigen, oder wenn wirklich umfangreiche Stylesheets nur für IEs benötigt werden und dort dann auch noch Filter und/oder CSS-Expressions Verwendung finden.

Auf Wiederlesen
Detlef

--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!