Blogix

Transparente PNG-Dateien werden im Internet Explorer 6 bzw. 5.5 standardmäßig nicht unterstützt. Anstelle der Transparenz wird eine graue Fläche angezeigt. Trotzdem möchte man sehr oft transparente PNG-Bilder benutzen, denn transparente GIFs erlauben keine Halbtransparenz (z.B. bei Schlagschatten) bzw. Ränder von Rundungen werden pixelig dargestellt. Damit transparente PNGs auch im Internet Explorer 6 bzw. 5.5. korrekt dargestellt werden, kann man einen PNGfix (z.B. von http://homepage.ntlworld.com/bobosola/) als JavaScript in die HTML-Seite integrieren:

<script defer type="text/javascript" src="js/pngfix.js"></script>

Das bringt jedoch den großen Nachteil, dass Hyperlinks auf bzw. um PNG-Bilder nicht mehr klickbar sind. Abhilfe schafft jedoch folgender CSS-Code in der Datei lt-ie7.css, der den Hyperlink wieder in der Vordergrund bringt (kann mit zusätzlichen Tags erweitert werden):

a {
  position: relative;
  z-index: 9999;
}

Dieser Code wird wie folgt in die HTML-Seite integriert:

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/lt-ie7.css" />
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->

Hintergrundgrafiken im CSS können für Internet Explorer 6 bzw. 5.5. (in der Datei lt-ie7.css) ohnehin recht einfach transparent gemacht werden, ein Fix ist somit hierfür nicht notwendig:

div#content {
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/content-bg.png', sizingMethod='crop');
}

Zuerst wird das bereits für andere Browser vorhandene Hintergrundbild entfernt und dieses mit “filter” für den IE kompatibel wieder eingefügt.

Im Internet Explorer wird standardmäßig eine vertikale Scrollbar angezeigt, selbst wenn der Inhalt der Webseite nicht länger als das Browserfenster ist. Das hat den Vorteil, dass eine zentrierte Webseite nicht “springt”, wenn der Inhalt je Seite länger/kürzer als die Höhe des Browserfenster ist. Manche Kunden, vor allem aber Grafiker stört das “springen” der Seite, aber es gibt einen einfache Workaround um das zu verhindern.

Lösung für den Firefox:

Hierfür fügt man im Stylesheet folgenden Code ein:

html {
  overflow: -moz-scrollbars-vertical;
}

Leider funktioniert diese Lösung nur im Firefox und wird von allen anderen Browsern ignoriert.

Die Allround-Lösung:

Im Stylesheet setzt man die Höhe von html auf 100% und fügt einen Außenabstand von 1px ein:

html {
  height: 100%;
  margin-bottom: 1px;
}

Diese Lösung funktioniert in allen gängigen Browsern, allerdings entsteht dadurch ein Scrollbereich von 1px. Auch das kann als gleich störend empfunden werden, wie das “Springen” der Seite selbst.

Die CSS3-Lösung:

Auch diese Lösung kann man als “Allround-Lösung” bezeichnen. Obwohl die overflow-y-Eigenschaft erst in CSS3 enthalten sein wird, wird sie von den gängigsten Browsern (Firefox 1.5+, Safari 1.0+, Konqueror 3.3+,…) bereits unterstützt:

html {
  overflow-y: scroll;
}

In diesem Fall wird die Scrollleiste deaktiviert dargestellt, wenn der Inhalt der Seite kürzer als die Höhe des Browserfenster ist, andernfalls wie gewohnt eine Scrollleiste dargestellt.

Opera interpretiert diese Eigenschaft leider (noch) nicht, weshalb man in diesem Fall die “Allround-Lösung” als Workaround für Opera in die Seite integrieren muss. Hierfür fügt man diesen in opera.css ein und integriert ihn wie folgt in die Seite:

<link rel="stylesheet" href="opera.css" type="text/x-opera-css" />

Wie berichtet besteht nun auch der Internet Explorer in der Version 8 als letzter der weitverbreiteten Browser den Acid2 Browser-Test. Deshalb war es an der Zeit einen neuen Test zu entwerfen, um die Fähigkeiten der Browser zu überprüfen. Acid3 möchte nun mehr als nur ein per CSS erzeugtes Lächeln von den Browsern sehen. Weiterlesen »

Die sich noch in der Entwicklung befindlichen Browser Internet Explorer 8 und Firefox 3 bestehen den Acid2 Browser-Test. Bei diesem Test geht es darum CSS 2.1 korrekt zu interpretieren und ein Smiley samt Text, wie im nachstehenden Bild gezeigt, korrekt darzustellen. Weiterlesen »

Immer wieder interessant ist es, die Seite Market Share zu besuchen, um die aktuellen Marktanteile der verschiedenen Applikationen zu erfahren. Bei den Betriebssystemen führt derzeit Windows klar mit 91,79%, gefolgt von Mac OS (inkl. iPhone) mit 7,43% und Linux mit nur noch 0,63%. Windows verlor dabei minimal Boden an Mac OS, etwas weniger an Linux. Internet Explorer ist bei den Browsern mit satten 76,04% weiterhin Marktführer vor Firefox (16,80%) und Safari (5,59%). Zu erkennen ist, dass Microsofts Internet Explorer deutlich Marktanteile insbesondere an Firefox und Safari verloren hat. Beliebteste Suchmaschine ist weiterhin Google mit 77,04%, vor Yahoo (12,76%) und MSN (inkl. Live Search) mit 5,90%. Der Marktanteil blieb auf diesem Sektor praktisch unverändert.