Chris: Mozilla missachtet absolute Position "Teil 2"

Beitrag lesen

Hallo zusammen,

wie ich gestern bereits angedroht habe das ich meine Seite Validatorfähig mache und diese falls dann noch immer Probleme im Mozilla auftreten sollten diese hier zu Posten, tue ich dies nun ;)

Ich hatte gestern Probleme mit der Darstellung der Seite im Mozilla 1.2 und der Beta (positionierung bleibt relative), im Opera wird die Seite fast richtig dargestellt und im IE klappt alles, oder wie ihr sagen würdet er macht alles falsch ;)
Ich habe die Seite gestern durch den Validator laufen lassen und es sinde keine Fehler drin...

Anbei hängt der Quellcode, ich habe diesen um die Navigation verkürzt um das Forum nicht vollzu müllen...

Ich danke für eure Hilfe

Viele Grüsse

Chris

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="robots" content="index,follow" />
<meta name="description" content=" " />
<meta name="revisit-after" content="30 days" />

<script src="js/menu.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/menu.css" type="text/css" title="menu"/>
<link rel="stylesheet" href="css/standart.css" type="text/css" title="standart"/>

</head>

<body onload="startNavi()">

<!-- begin site imgs -->
<div class="middle">
<img id="navDivEnd" src="img/navi_rechts.jpg" width="38" height="100" alt="" />
<img id="highlight-1" src="img/highlight_left.gif" width="25" height="150" alt="" />
<img id="highlight-2" src="img/highlight_right.gif" width="25" height="150" alt="" />
</div>
<!-- ende -->

<div class="top">
<img src="img/navi_left.jpg" width="200" height="100" alt="" />
<img src="img/bg-1.jpg" width="100%" height="26" alt="" />
</div>

<div class="middle">
<img src="img/pic.jpg" width="480" height="359" alt="" />
<span id="highlight"></span>
</div>

<div>
<img src="img/line_bottom.gif" width="100%" height="12" alt="" />
<div id="bg-fuss"></div>
<img src="img/line_bottom_1.gif" width="100%" height="20" alt="" />
</div>

</body>
</html>

CSS ::

body {background-color:#eaeaea;margin:0px;}
img {border:0px;margin:0px;}
div.top {background-color:#eaeaea;background-image:url("../img/bg_nav_line.gif");}
div.middle {background-image:url("../img/gitter.gif");}
img {display: block;}

#navDivEnd {
          position:absolute;
          top:0px;
          left:680px;
          width:39px;
          height:100px;
          clip:rect(0px 39px 100px 0px);}

#highlight-1 {
          position:absolute;
          top:126px;
          left:454px;
          width:25px;
          height:150px;
          clip:rect(0px 25px 150px 0px);
          z-index:100;}

#highlight {background-color: #eaeaea;
            background-image:url("../img/highlight_bg.gif");
            position:absolute;
            top:126px;
            left:478px;
            width:258px;
            height:359px;
            clip:rect(0px 359px 359px 0px);
            z-index:99;}

#highlight-2 {
          position:absolute;
          top:335px;
          left:735px;
          width:25px;
          height:150px;
          clip:rect(0px 25px 150px 0px);
          z-index:100;}

#bg-fuss {
            background-color: #eaeaea;
            background-image:url("../img/bg_fuss.gif");
            width:100%;
            height:100px;
            z-index:99;}

#bg-fuss-1 {
            background-color: #eaeaea;
            width:100%;
            height:20px;
            z-index:150;}