nicht angemeldet
Hallo,
ich habe mir da wa gebastelt was auch soweit ganz gut funktioniert, aber natürlich macht der IE8 ärger.
Der Übergang der Bilder ist ruckelhaft.
Wisst Ihr woran das liegen kann?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Beispiel</title>
<link rel="stylesheet" type="text/css" href="av.css" />
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./av.js"></script>
</head>
<body>
<div id="ebene1">
<div id="bilderstapel">
<img id="bild" src="./img/schwarz.JPG" class="oben" alt="" />
<img id="bildhome" src="./img/schwarz.JPG" alt="" />
<img id="bildreise" src="./img/rot.JPG" alt="" />
<img id="bildtest" src="./img/weiss.JPG" alt="" />
</div>
</div>
<div id="ebene2">
<div id="menueebene">
<div id="menue">
<ul>
<li class="lihome"><a href="index.html" >
<img src="./img/menue1.gif" width="96" height="44" border="0" alt=""></a>
</li>
<li class="lireise"><a href="reise.html" >
<img src="./img/menue2.gif" width="96" height="44" border="0" alt=""></a>
</li>
<li class="litest"><a href="test.html" >
<img src="./img/menue3.gif" width="96" height="44" border="0" class="imgFade" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background-color: #ffffff;
}
#ebene1 {
background-color: #3c3c3c;
/*opacity:0.8; /*firefox*/
/*filter:alpha(opacity=80);/*IE*/
width: 100%;
height: 1000px;
}
#menueebene {
position:absolute; top: 10px; left:200px;
width: 100px;
height: 43px;
}
#menue {
background-image: url(./img/menuebg.gif);
background-repeat: repeat-x;
position:absolute; top:0px; left: 0px;
list-style: none;
width: 760px;
height: 360px;
}
#menue ul {
}
#menue li {
float:left;
list-style: none;
position: relative; top: 0px; left: 100px;
}
#menue a {
color: #98D7DA;
text-decoration: none;
display: block;
height: 43px;
width: 96px;
}
.lihome {
background-image: url(./img/menue1.gif);
background-repeat: no-repeat;
}
.lireise {
background-image: url(./img/menue2.gif);
background-repeat: no-repeat;
}
.litest {
background-image: url(./img/menue3.gif);
background-repeat: no-repeat;
}
.imgFade {
left:100px;
filter:alpha(opacity=0);
opacity:0.0;
-moz-opacity:0.0;
-khtml-opacity:0.0;
}
#bild {
border: 1px solid #a5a5a5;
padding: 2px;
position: absolute; top: 60px; left: 200px;
height: 250px;
width: 500px;
}
#bildhome {
border: 1px solid #a5a5a5;
opacity: 0;
filter:alpha(opacity=0);
padding: 2px;
position: absolute; top: 60px; left: 200px;
height: 250px;
width: 500px;
}
#bildreise {
border: 1px solid #a5a5a5;
opacity: 0;
filter:alpha(opacity=0);
padding: 2px;
position: absolute; top: 60px; left: 200px;
height: 250px;
width: 500px;
}
#bildtest {
border: 1px solid #a5a5a5;
opacity: 0;
filter:alpha(opacity=0);
padding: 2px;
position: absolute; top: 60px; left: 200px;
height: 250px;
width: 500px;
}
.oben {
opacity: 1;
filter:alpha(opacity=100);
z-index: 5;
}
.unten{
z-index: 1;
}