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 freie 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. Hmm, der IE liest width:420px, andere Browser verstehen das nicht. Also macht der IE auch kleinere Bilder ganz groß. Das ist nicht ganz das, was man mit max-width erreichen möchte 🙂

  2. Das stimmt schon, ich habe nicht soviel Ahnung von Javascript, aber prinzipiell müsste doch diese Anweisung ausreichen (bei mir im IE klappt es):

    width:expression(width > 200? "200px": "auto" );

    Also wenn das Bild größer als 200 Pixel ist, wird es auf 200px verkleinert. Zur Überprüfung könnt ihr die Einträge „Reboot Trends“ und „Webstandards in Germany“ (hier ist die Grafik kleiner als 200px) mit dem IE anschauen.

    Ist das so richtig?

  3. Danke für den Tipp! Ist echt hilfreich! Ich hatte mit dem gleichen Problem zu kämpfen, habe dann jedoch einfach alle Bilder (Der Action in Photoshop sei Dank) verkleinert und neu hochgeladen.

  4. Ja, mit der zusätzlichen Abfrage funktioniert’s 🙂 Zusätzlich muss natürlich auch noch Javascript aktiviert sein, damit es klappt. Irgendeinen Haken gibt’s halt immer bei diesem IE… 😉

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

Kommentare sind geschlossen.