Halbtransparente Pixel mit Fireworks und dem PNG-8 Format

Gerade bei Stanislav entdeckt und für sehr lesenswert befunden: Using PNG8 in Fireworks. Der Forenbeitrag beschreibt, wie man mit Hilfe von Fireworks dem PNG-8 Format echte Transparenzen verpasst, die auch noch “graceful degraden”, wie der Fachmann sagen würde (wie übersetzt man das eigentlich ins Deutsche?). Lesebefehl.

Veröffentlicht am 18.09.2007 um 06:57 Uhr
3 Kommentare

Negative Margin-Werte

oder

Lessons learnt from rebooting, Part 2:

Über den Einsatz von negativen Margin-Werten kann man streiten. Ich finde es jedenalls nicht verwerflich sondern sogar sehr praktisch, wenn man z.B. einzelne Elemente aus der umschließenden Layoutbox herausragen lassen möchte. Auf meiner neuen Seite habe ich an diversen Stellen negative Margin-Angaben benutzt, z.B. für die Bilder der Arbeitsproben. Die grauen Ränder sollten aus dem Satzspiegel herausragen, so dass die eigentliche Bildkante bündig am Text ausgerichtet ist. Kein Problem: Einfach den Bildern links einen negativen Margin-Wert von der Stärke des Rands zuweisen, fertig.

img {
    border: 6px solid #E5E6E9;
    margin-left: -6px;
}

Safari rendert richtig

In Safari sieht das auch ganz prima aus. Leider aber nicht in unserem Lieblingsbrowser, dem Internet Explorer. Dort wird alles, was nach links übersteht, einfach abgeschnitten:

Der IE rendert falsch

Erster Lösungsansatz bei einem solchen Problem: Man muss dem überstehenden Element “Layout” geben. In diesem speziellen Fall ist dies allerdings bereits der Fall, da es sich um ein img Element handelt. Will man zum Beispiel einem div oder einem h1 Element “Layout” geben, ist die einfachste Lösung, eine Breitenangabe (width) für das Element festzulegen. (Weitere Möglichkeiten findet ihr hier). Damit das ganze auch im IE6 funktioniert ist zusätzlich noch die Angabe position:relative nötig. In meinem Fall also:

img {
    border: 6px solid #E5E6E9;
    margin-left: -6px;
    position: relative;
}

Für ein Element, dass nicht von Hause aus “Layout” hat:

#herausragend {
    margin-left: -10px;
    width: 100px;
    position: relative;
}

Zum Weiterlesen:

Veröffentlicht am 09.05.2006 um 07:30 Uhr
2 Kommentare

Internet Explorer Beta 2 Update

Sweet fancy Moses—a Bugzilla for IE? There was no mention of this within my earshot at Mix 06, so I’m as surprised as anyone else. Did I fall down a rabbit hole and quaff a bottle labeled “DRINK ME”? If this is a dream, I don’t ever want to wake up.

Eric Meyer zur geplanten öffentlichen(!) Bugtracking Site für den IE.

Ein weiteres Wunder ist geschehen: Internet Explorer 7 unterstützt min-width, min-height, max-width und max-height. Endlich werden Liquid Layouts möglich, ohne dass man durch irgendwelche Hacks oder JavaScripts eine minimale Breite erzwingen muss. Das wars aber auch schon in Sachen frohe Kunde.

Die neue Beta Version (IE7 Beta 2 Preview Release 2, puh!) ist allerdings insofern wichtig, dass die Implementation neuer (Layout-)Features laut IE Entwickler-Team jetzt abgeschlossen ist. Das Rendering steht somit weitesgehend, man kann also so langsam anfangen, seine Seiten zu testen.

Veröffentlicht am 24.03.2006 um 07:03 Uhr
Keine Kommentare

Talk to the IE team

Das IE Entwickler-Team lädt zum Expert Chat über den Internet Explorer. Dürfte sicher eine sehr interessante Veranstaltung werden. Bleibt nur zu hoffen, dass es nicht zu einem kollektiven “endlich kann ich mich mal persönlich beschweren”-Event ausartet.

via: IEBlog

Veröffentlicht am 08.02.2006 um 07:03 Uhr
Keine Kommentare

Aufzählungszeichen verrutschen im Internet Explorer

Heute bin ich auf einen wirklich fast schon witzigen Bug im IE gestoßen. So verschieben sich nämlich Aufzählungspunkte von HTML-Aufzählungen, wenn man dem li-Tag eine feste Breite zuweist. Die Bullets erscheinen an der Unterkante des Aufzählungspunktes ausgerichtet.

ul {
    padding-left: 15px;
}

li {
    padding: 5px 0;
    width: 300px;
}

Und so sieht das ganze im Internet Explorer 6 aus:

IE mit verrutschten Bulletpoints

Zur Lösung des Problems kann man einfach die Breite statt dem li-Tag dem umschließenden ul-Tag zuweisen.

ul {
    padding-left: 15px;
    width: 300px;
}

li {
    padding: 5px 0;
}

Ist dies nicht möglich, muss man sich mit margin bzw. padding behelfen.

Wieder alles in Ordnung

Veröffentlicht am 28.01.2006 um 20:28 Uhr
1 Kommentar

AlphaImageLoader und relative Pfadangaben

Ihr kennt sicher alle die Möglichkeit über das CSS-Attribut AlphaImageLoader im IE transparente PNGs anzeigen zu lassen. Prima. Zu diesem Thema ist mir was interessantes aufgefallen, nachdem ich zuvor fast eine halbe Stunde einen Fehler gesucht habe, der gar nicht existiert hat. Bei einem aktuellen Projekt von mir existieren verschiedene Verzeichnistiefen in der URL, so in der Art: ”www.seite.de/”, “www.seite.de/portfolio/”, “www.seite.de/portfolio/kategorie/” und so weiter. Auf jeder Seite ist irgendwo das Firmenlogo positioniert, dass über eine mit Conditional Comments eingebunde separate Stylesheet-Datei definiert wird. Das sah zunächst ungefähr so aus:

#logo {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../img/logo.png’, sizingMethod=’crop’);
}

Auf der Startseite hat das auch wunderbar funktioniert, nur auf den Folgeseiten wurde das Bild nicht angezeigt. Nach langem Suchen dachte ich, es könnte vielleicht an der Verzeichnistiefe der Seite liegen. Und genau so war es.

Komischerweise nimmt der Befehl AlphaImageLoader die HTML-Seite als Ausgangsbasis für die Pfade und nicht wie gewöhnlich die Stylesheet-Datei in der der Befehl steht. Wieder einmal unverständliche Logik aus dem Hause Microsoft.

Veröffentlicht am 01.01.2006 um 18:56 Uhr
3 Kommentare

WaSP Microsoft Taskforce Update

Neuigkeiten zum Internet Explorer Update, XAML und Quartz sowie Microsofts Einstellung zum Acid2 Test.

Veröffentlicht am 03.11.2005 um 07:32 Uhr
Keine Kommentare

Why do you cling to IE5/Mac?

John Oxton wettert über Leute, die immer noch den IE5/Mac benutzen. Sogar unter OS X. Sehr amüsant. Unbedingt auch die Kommentare lesen!

Veröffentlicht am 23.10.2005 um 13:01 Uhr
Keine Kommentare

Neuigkeiten zum Internet Explorer 7

Wie Sitepoint soeben berichtet, hat Microsoft offiziell bekanntgegeben, dass XMLHTTPRequest als natives Javascript-Object implementiert sein wird. Das ist natürlich schonmal frohe Kunde und macht den Weg frei für (noch) mehr AJAX-basierte Webapplikationen.

Once IE7 is widely adopted, this will help to eliminate a lot of cumbersome browser detection code that is currently required to implement AJAX across all popular browsers.

Ein weiteres Problem, das behoben werden soll, hat mit Select-Feldern zu tun. Momentan ist es im IE nicht möglich (bzw. nur mit Bauchschmerzen bereitenden Hacks), diese Felder von anderen überlappen zu lassen, wie zum Beispiel Pulldownmenues oder ähnliches. Diese schmerzliche Erfahrung musste ich erst letzte Woche wieder machen und musste schießlich ein Script einbinden, dass beim Aufklappen der Pulldowns dynamisch die darunter liegenden Select-Felder per Javascript ausblendet. Dieses Verhalten soll jedenfalls auch korrigiert sein.

Außerdem soll es, wie bereits seit langem in Firefox enthalten, eine Web-Developer Toolbar geben, die auch als Addon für den IE6 veröffentlicht werden soll.

Hört sich alles prima an, läßt allerdings nicht über die greußlichen Screenshots des neuen UI von Office 12 hinweg täuschen. Aber das nur nebenbei.

via: Sitepoint

Veröffentlicht am 14.09.2005 um 06:34 Uhr
Keine Kommentare