Vorteil dieser Variante ist, dass es im IE genau wie in den anderen
Browsern aussieht. Der Nachteil ist, dass wir dem Container für das Hintergrundbild
eine Höhe geben müssen die dem Menü entspricht. Da die Schriftgröße des
Menüs flexibel ist wissen wir nicht genau inwieweit sich das Menü ausdehnt.
Ich empfehle deshalb eine Angabe in em.
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 repeat fixed;
margin:0;
padding:0;
}
html>body .transparent{
background:url(trans1.png);
}
.menu{
height:200px;
left:30px;
position:absolute;
top:30px;
width:300px;
}
.menu a:link,.menu a:visited{
background:transparent;
color:#0000FF;
display:block;
font:bold 110% Arial,Helvetica,sans-serif;
margin:8px;
text-align:center;
width:284px;
}
.menu a:hover{
background:#EEEEEE;
color:#0000FF;
}
.transparent{
display:inline;
float:left;
height:20em;
margin:0 0 0 30px;
width:300px;
}
-->
/*]]>*/
</style>
<!--[if lt IE 7]>
<style type="text/css">
.transparent{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='trans1.png',sizingMethod='scale');
margin-top:30px;
}
</style>
<![endif]-->
</head>
<body>
<div class="transparent">
</div>
<div class="menu">
<a href="http://olaf-bosch.de/experimentelles/transparente-png-auch-im-internet-explorer/#demo5">Zurück zum Tutorial</a> <a
href="#">Dummy</a> <a
href="#">Dummy</a> <a
href="#">Dummy</a> <a
href="#">Dummy</a> <a
href="#">Dummy</a> <a
href="#">Dummy</a> <a
href="#">Dummy</a> <a
href="#">Dummy</a>
</div>
</body>
</html>
Zurück zum Tutorial | body.gif | trans1.png
