nicht angemeldet
Liste, Hintergrundbild, PNG-Transparens
Hallo Forum,
ich habe mir eine Navigation mit Listen und Links zusamengebaut.
Nun möchte ich gerne das der Hintergrund durschscheint, also eine tranaparents.
Locker fröhlich habe ich ein png mit einer 50% transparenz erstellt ...
was aber im IE 6 nicht funktioniert ...
Bei google habe ich folgenden schnipsel gefunden:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/bg_list.png', sizingMethod='scale')
und versuche nun beides zusammen zu bekommen,
klappt aber nicht ;-(
Hat jemand vieleicht eine Idee ?
Danke, Bernd
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
body{margin:0px;height:100%;background-Color:#FF0000;}
body, p, td, ul, a, h1 {font-family:Verdana,arial,sans-serif;color:#4C4C4C;}
#navContainer{
margin-top: 7px;
margin-right: 10px;
background-Image:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/bg_list.png', sizingMethod='scale')
}
#navContainer ul{
list-style-type: none;
padding:0px;
margin:0px;
text-align: left;
}
#navContainer ul li a{
display: block;
width:220px;
font-size: 12px;
margin-top:12px;
margin-bottom:12px;
line-height:24px;
text-decoration: none;
color: #FFFFFF;
background-Images:url(images/bg_list.png)
}
#navContainer a{
padding-left:8px;
}
#navContainer ul li a:hover{
margin-top:12px;
margin-bottom:12px;
line-height:24px;
font-weight:bold;
color: #FFFFFF;
background: transparent url(images/bg_list.png) left center repeat-y;
}
</style>
</head>
<body>
<div id="navContainer">
<ul id="navList">
<li><a href="#">Bernd 1</a></li>
<li><a href="#">Bernd 2</a></li>
<li><a href="#">Bernd 3</a></li>
<li><a href="#">Bernd 4</a></li>
<li><a href="#">Bernd 5</a></li>
<li><a href="#">Bernd 6</a></li>
<li><a href="#">Bernd 7</a></li>
</ul>
</div>
</body>
</html>
-
Hi,
background-Image:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/bg_list.png', sizingMethod='scale')
die IE-proprietäre Eigenschaft heißt "filter", nicht "background-image". Sie füllt hier den _Inhalt_ des Elementes.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Tausend Dank Cheatah,
hatte jetzt solange rumgedockert das ich irgendwann einen Sch...
geschrieben habe.Dann werde ich wohl für den IE den ersten CSS-Hack meines Lebens einsetzen.
Für den 6er werde ich mit dem Filter arbeitenDer scheint mit dem 5.5er nicht zu laufen, die kriegen dann ein 2x2 Pixel gif was abwechselnd transparent und schwarz ist.
Und die "guten" kriegen das "png"
Bernd
PS: So läufts jetzt bei mir im IE 6 SP2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title><style type="text/css">
body{margin:0px;height:100%;background-Color:#FF0000;}body, p, td, ul, a, h1 {font-family:Verdana,arial,sans-serif;color:#4C4C4C;}
#navContainer{
margin-top: 7px;
margin-right: 10px;
}#navContainer ul{
list-style-type: none;
padding:0px;
margin:0px;
text-align: left;
}#navContainer ul li a{
display: block;
width:220px;
font-size: 12px;
margin-top:12px;
margin-bottom:12px;
line-height:24px;
text-decoration: none;
color: #FFFFFF;
}#navContainer a{
padding-left:8px;
}#navContainer ul li a:hover{
margin-top:12px;
margin-bottom:12px;
line-height:24px;
font-weight:bold;
color: #FFFFFF;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/bg_list.png');
/*background: transparent url(images/bg_list.png) left center repeat-y;*/
}
</style>
</head>
<body>
<div id="navContainer">
<ul id="navList">
<li><a href="#">Bernd 1</a></li>
<li><a href="#">Bernd 1</a></li>
<li><a href="#">Bernd 1</a></li>
<li><a href="#">Bernd 1</a></li>
<li><a href="#">Bernd 1</a></li>
<li><a href="#">Bernd 1</a></li>
<li><a href="#">Bernd 1</a></li>
</ul>
</div>
</body>
</html>
-