Zurück-Button des IE's verschiebt Divs

S

SomeDude1232

Huhu alle miteinander,

ich habe zur Zeit ein merkwürdiges Problem. Und zwar verschiebt der IE Divs sobald ich über den Zurück-Button des Browsers wieder auf die vorherige Seite gehe, die er zuvor noch korrekt dargestellt hat. Eine Aktualisierung behebt das Problem auch prompt wieder, nur kann und soll das Für den User ja keine lösung sein. Ich hoffe, hier kann mir eventuell jemand weiterhelfen. Ich bin mehr oder weniger mit meinem Latein am Ende.

Hier also erstmal der Quellcode:

HTML:
<!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" xml:lang="de" lang="de">

<head>

    <title></title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly" />

    <link href="style.css" type="text/css" media="screen" rel="stylesheet" />

    <link rel="stylesheet" href="stylesheets/design.css" type="text/css" media="screen"/>

</head>


 <body id="main">


   <table id="wrapper" summary="0" cellspacing="0" cellpadding="0"
    border="0" align="center">


     <tr>


       <td><img src="bilder/h1.gif" width="100" height="160"
        border="0" alt="" name="h1" align="right" id="h1" /></td>

      <td id="spalte_mitte">


     <div id="div1">


       <div id="div2">

             <img src="bilder/logo.gif" width="500" height="318"
             border="0" alt="" name="logo" align="right" id="logo" />
       </div>


       <div id="div3">

            <a href="de/index_de.html"
              onMouseOver="but_de.src='bilder/but_de_over.gif';"
              onMouseOut="but_de.src='bilder/but_de.gif';">

             <img src="bilder/but_de.gif" width="120" height="25"
              border="0" alt="" name="but_de" align="right" id="but_de" />

            </a>

       </div>


       <div id="div4">


            <a href="nl/index_nl.html"
              onMouseOver="but_nl.src='bilder/but_nl_over.gif';"
              onMouseOut="but_nl.src='bilder/but_nl.gif';">

             <img src="bilder/but_nl.gif" width="120" height="25"
              border="0" alt="" name="but_nl" align="right" id="but_nl" />

            </a>

       </div>


       </div>

       </td>

           <td><img src="bilder/logo_1.gif" width="100" height="160"
              border="0" alt="" name="logo_1" align="right" id="logo_1" /></td>

     </tr>


   </table>

 </body>

</html>

Und die dazu passende CSS-Datei:

HTML:
html, body, {
   margin:0;
   padding:0;
   height:100%;
   border:none;
   }

#wrapper {
   margin:0 auto;
   margin-top:60px;
   margin-bottom:60px;
   text-align:left;
   vertical-align:middle;
   width:750px;
   height:440px;
   }


img {
  display:block;
  display:inline;
  }

#main{
  background:url(../bilder/background.gif) repeat center top;
  text-align:center;
  }


#spalte_mitte{
  background:url(../bilder/background_mid2.gif) repeat center top;
  width:750px;
  text-align:center;
  }

#spalte_mitte1{
  background:url(../bilder/background_mid2.gif) repeat center top;
  width:750px;
  text-align:center;
  }

#spalte_links{
  width:50%;
  }

#spalte_rechts{
  width:50%;
  text-align:center;
  }

#logo{
  margin-bottom:0px;
  }

#logo_1{
  margin-top:92px;
  }

#but_de{
  margin-top:0px;
  margin-left:0px;
  }

#but_nl{
  margin-top:0px;
  margin-left:0px;
  }

#div1 {
  position: relative;
  height:440px;
  }

#div2 {
  position: absolute;
  top:49px;
  left:50px;
  }

#div3 {
  position: absolute;
  top:340px;
  left:140px;
  }

#div4 {
  position: absolute;
  top:370px;
  left:140px;
  }

Ich weiß, es ist nicht die sauberste Lösung, aber so kann ich die Seite auf eine Tr beschränken, was zum Einen notwenig ist, weil ich den Hintergrund der mittleren Td als kleines Gif durch repeat darstellen möchte und nicht durch ein riesiges Jpg und zum Anderen, weil ich somit dazu verdammt bin in dieser Td mehrer Bilder exakt zu positionieren. Auf diesem Weg etwas wirren Weg funktioniert es im IE, sowie auch im FF. Allerdings mit der Ausnahme von dem von mir oben geschilderten Problem.

Wäre nett, wenn jemand einen weisen Rat für mich hätte. Bin mit meinem Latein am Ende.

Gruß
SomeDude
 
M

Maik

Moin,

dieses Phänomen kann ich mit dem Code in keiner IE-Version (6 bis 8) reproduzieren.

Kannst du daher zur Gegenkontrolle den Link zu deiner Seite nennen?

Im ersten CSS-Selektor ist dir zumindest mit dem Komma nach body ein Syntax-Fehler unterlaufen, der dazu führt, dass IE8 und die anderen standardkonformen Browser diesen Regelblock überhaupt nicht interpretieren:
Code:
html, body, {
   margin:0;
   padding:0;
   height:100%;
   border:none;
   }


mfg Maik
 
S

SomeDude1232

Moin,

das war mir schonmal eine sehr große Hilfe. Auch wenn du mir nicht die direkte Lösung verraten konntest, hat es doch indirekt dazu geführt. Das dass nämlich Ganze ohne den Bilderordner funktioniert, ist mir so gar nicht aufgefallen. Es lag also tatsächlich an den Gif's bzw. den in der CSS-Datei fehlenden Größenangaben für eben diese. Jetzt funktionierts auch im IE...juhu. :)

Danke vielmals für deine Hilfe!

Gruß
SomeDude