Jürgen: Fixer Bereich IE

Beitrag lesen

Hallo zusammen,

ich habe mit Hilfe der Erklärung hier bei SelfHtml den Woraround für den fixen Bereich beim IE eingerichtet. Im Inhalts ist eine Flsh-Diashow und ein Bespieltext hinterlegt. Beim Scrollen legt sich nun die Flash Animation über den fixierten Bereich und der Beispieltext wird wie gewünscht unterhalb des fixen Bereichs gescrollt. Das Problem tritt mit Firefox nicht auf, aber mit Opera. Kann mir irgendjemand dabei helfen. Vielen Dank im Voraus, anbei beim bisheriger Code, ansehen kann man sich das ganze auch unter www.beezenpower-schweich.de/index2.shtml.

Gruss Jürgen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="expires" content="Thu, 22 Feb 2007 20:00:00 GMT" />
<title>BEEZENPOWER-SCHWEICH</title>
<link href="styles2.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="./favion.ico"/>

<!--[if lt IE 7]><style type="text/css">
  @media screen {
    html, body {
      height: 100%; overflow-y: hidden;
    }
    #scrollbereich {
      height: 100%; width: 100%; overflow: auto;
    }
    #content {
      position: static;
    }
  }
</style><![endif]-->

</head>
<body>

<div id="banner" style="z-index:4">

<table border=0  cellspacing==0  cellpadding=0 width="100%" bgcolor="#000000">
  <tr align=center>
  <td align="left" width="80" style="padding-top:5px; padding-left:5px">
     <img src="LOGO-JSG_blauschwarz.jpg"  alt="LOGO JSG"border=0 height=79 width=80 />
  </td>
  <td width="100%" align="center">
     <img src="schriftzug.jpg" alt="Beezenpower" "width="730" height="80" />
   </td>
   <td align="right" width="80" style="padding-top:5px; padding-right:5px">
   <img src="Tus-Wappen.jpg" height=80 width=64 alt="Tus Wappen" />

</td>
   </tr>
</table>
<div id="menue">
     <table style="width:100%" border="0" cellpadding="0" cellspacing="0">
  <tr bgcolor="#0e1c8e">
    <td height="19">
      <div align="center"><a class="menue" href="/index.shtml">Home</a></div>
 </td>
    <td>
      <div align="center"><a class="menue" href="/mannschaft.shtml">Mannschaft</a></div>

</td>
    <td>
      <div align="center"><a class="menue" href="/statistik.shtml">Spielplan</a></div>
 </td>
    <td>
      <div align="center"><a class="menue" href="/spielberichte.shtml">Spielberichte</a></div>
 </td>
    <td>
      <div align="center"><a class="menue" href="/history.shtml">History</a></div>

</td>
    <td>
      <div align="center"><a class="menue" href="/bilder.shtml">Fotos</a></div>
 </td>
    <td>
      <div align="center"><a class="menue" href="/sportplatz.shtml">Spielst&auml;tte</a></div>
 </td>

<td>
      <div align="center"><a class="menue" href="/hymne.shtml">Hymne</font></a></div>

</td>
    <td>
      <div align="center"><a class="menue" href="/nachrichten.shtml">Sportnachrichten</a></div>
 </td>
 <td>
      <div align="center"><a class="menue" href="/gbuch.shtml">G&auml;stebuch</a></div>
 </td>
 <td>
      <div align="center"><a class="menue" href="/index.shtml">Kontakt</a></div>

</td>
  </tr>
</table>
   </div>
</div>

<div id="scrollbereich" style="z-index:1">

<div id="content" style="z-index:1">
   <div align="center">
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="640" height="400" title="diashow">
       <param name="movie" value="diashow.swf" />

<param name="quality" value="high" />
       <embed src="diashow.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="640" height="400"></embed>
     </object>
  </div>

<div style="padding-top:50px; color:#FFFFFF">Beispieltext</div>
</dic>
</div>
</div>

</body>

</html>

Styledatei:

html {
background-color:#000000;
    padding: 0;
  }
body {
  background-color:#000000;
    margin: 0; padding: 0;
  }

#banner {
    position: absolute;

}

html>body #banner{  /* nur fuer moderne Browser! */
    position: fixed;
  }

.menue {
    color: #FFFFFF;
 text-decoration: none;
 font-family: "Comic Sans MS";
 font-size: 14px;
 font-style: oblique;
 font-variant: small-caps;
 }

#content {
     padding-top:150px;

}