Markup

max-width — Probleme beim Redesign umgehen

Da ich mein Blogdesign gestern komplett erneuert habe, musste ich mich auch einigen Schwierigkeiten stellen. Abgesehen von der farblichen Gestaltung der einzelnen Bereiche, die ich mit einem kleinen „Hack“ in einer WordPress-Code-Datei und CSS gelöst habe, gab es auch ein anderes Problem:

Ich hatte die meisten der Bilder in den Posts auf die Breite des Eintrages optimiert, also etwa 650 Pixel. Diese sind natürlich für das neue Design viel zu breit. Daher habe ich per CSS die Anweisung vergeben, dass alle Bilder innerhalb des Eintrages eine maximale Breite von 420 Pixel (zuzüglich Padding und Rändern) haben.

.entry img {max-width: 420px;}

Ähnlich verhielt es sich mit nach links oder rechts gefloateten Bildern, die im alten Design ebenfalls größer waren und jetzt das Design sprengen würden.

img.left, img.right {max-width: 200px;}

Bis ich also die Bilder auf ihre neue Größe verkleinert und wieder auf den Server geladen habe, bietet mir das CSS einen kleinen Schutz vor einem zerhackten Design. Da max-width aber nicht im Internet Explorer funktioniert, sieht es dort leider noch problematisch aus.

Doch da hilft die IE-spezifische Eigenschaft expression(). Microsoft nennt diese Eigeneschaften Dynamic Properties und ich habe ihre Funktionen nicht einmal angekratzt. Dieser Code in der CSS verkleinert auch die Bilder im IE:

.entry img {width:expression(420 + "px");}
img.left, img.right {width:expression(200 + "px");}

Mehr Informationen zu diesem kleinen „Hack“, der keiner ist, da er reguläre Eigenschaften des Internet Explorers nutzt, bekommt ihr bei Svend Tofte, der sich außerdem mit Bedingungen für solche Verhaltensweisen auseinandersetzt, max-width in Internet Explorer, und webmaster-pro.de, Über die expression-Eigenschaft für den IE.

Trotzdem wird mit expression() das max-width-Verhalten nur nachgeahmt und auch das CSS ist nicht mehr valide. Für kleine Übergangslösungen ist es aber sehr praktisch.

Kategorie: Markup

von

Hallo, ich bin Nadja und arbeite als Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.

5 Kommentare

  1. Pingback: » Tipps&Tricks: max- und min-width im IE — cne _LOG Archiv

Kommentare sind geschlossen.