Transparente PNG auch im InternetExplorer ab 5.0

Wir können auch was reinschreiben!
Zurück zum Tutorial,
im IE leider nicht benutzbar.

Vorteil dieser Variante ist, dass es im IE genau wie in den anderen Browsern aussieht. Der Nachteil ist, dass eingefügte Links nicht zu benutzen sind. Also sollte darauf verzichtet werden. Zurück zum Tutorial


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Language" content="de" />
    <title>
      olaf-bosch.de - Transparente PNG auch im InternetExplorer
    </title>
    <style type="text/css">
    /*<![CDATA[*/
    <!--
    body{
    background:url(body.gif) #CCCC99 fixed;
    margin:0;
    padding:0;
    }
    html>body .transparent{
    background:url(trans1.png);
    }
    .transparent{
    height:200px;
    margin : 50px 0 0 100px;
    width:300px;
    }
    -->
    /*]]>*/
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    .transparent{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
    (src='trans1.png');
    }
    </style>
    <![endif]-->
  </head>
  <body>
    <div class="transparent">
    </div>
    <div class="transparent">
      Wir können auch was reinschreiben!
    </div>
  </body>
</html>

Zurück zum Tutorial | body.gif | trans1.png

Valid XHTML 1.0? | Valid CSS 2.0? | © Olaf Bosch