Shihan: IE verbiegt die Seitenhöhe

SELF-Forum

IE verbiegt die Seitenhöhe

Shihan Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo zusammen

Ich bin auf ein Problem gestossen dass mich nun schon seit einigen Stunden beschäftigt.

Folgende Seite:
http://www.shihan-online.ch/projects/effi/

Im Firefox: Sieht alles iO aus, auch bei Unterschiedlichen Auflösungen, maximiertem oder verkleinertem Fenster.
Im IE 6.0: Bei 1280x1024 Auflösung = iO. Es sei denn man vermindert die Fenstergrösse so dass es Scrollbalken hat. Bei Auflösung 1024x768 z.B. kommt der Fehler auch vor.. nämlich folgender: unterhalb des eigentlichen Designs, kann man mit dem Scrollbalken auf einmal runterscrollen in einen leeren Bereich, dieser ist immer genausohoch wie die Höhe des korrekten Teils.

Irgendwie ist es also oben 100% Höhe, wenn es aber Scrollbalken hat dann hat es unten nochmal die selbe Höhe zum Runterscrollen, einfach ohne Inhalt.

Hier die relevante source:
body onload="MM_preloadImages('graphics/effi_garage.jpg','graphics/effi_tuning.jpg')">

<div style='float: left; height: 100%; width: 19%; background-color: #FFF;'>
  &nbsp;
 </div>

<div style='float: left; height: 100%; width: 1%; background-color: #3F6081;'>
  &nbsp;
 </div>

<div style='float: left; background-color: transparent; width: 60%; text-align: center;'>

<div style='background-color: transparent; margin-top: 30px; margin-left: auto; margin-right: auto; width: 600px; height: 450px; background-image:url(graphics/bgmain.jpg); background-repeat: no-repeat; text-align: center;'>
   <span style='display: block; height: 30px'>&nbsp;</span>
   <p>
    <a href="index.php?page=garage" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Effi Garage1','','graphics/effi_garage.jpg',1)"><img src="graphics/effi_garage_grey.jpg" alt="Effi Garage" border="0" name="Effi Garage1" id="Effi Garage" /></a>
   </p>
   <span style='display: block; height: 180px'>&nbsp;</span>
   <p>
    <a href="index.php?page=tuning" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Effi Tuning','','graphics/effi_tuning.jpg',1)"><img src="graphics/effi_tuning_grey.jpg" alt="Effi Tuning" name="Effi Tuning" border="0" id="Effi Tuning" /></a>

</p>
  </div>
  <p>
   <b>Willkommen auf der Webseite der Effi Garage und von Effi Tuning!</b>
   <br />
   <span style='font-size: 0.8em;'>Webdesign and Code by <a href="mailto:patric.schielke@gmail.com">Shihan</a></span>
  </p>

</div>

<div style='float: left; height: 100%; width: 1%; background-color: #3F6081;'>
  &nbsp;
 </div>

<div style='float: left; height: 100%; width: 19%; background-color: #FFF;'>
  &nbsp;
 </div>

</body>

--------------------------

  • noch das CSS das z.B. den Body formatiert:
    html {
     height: 100%;
     width: 100%;
    }
    body {
     margin: 0;
     height: 100%;
     width: 100%;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 0.9em;
     font-style: normal;
     line-height: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     color: #000;
     background-color: #FFF;
     background-image: none;
    }
    -----------------------

Liegt das Problem an meinem Code oder ist der IE einfach wiedermal zu dumm? Ich will die Seite extra ohne Tabellen machen und dann passiert sowas, ja da bin ich schon etwas gefrustet.

Was ich auch noch bemerkt habe ist, dass wenn man bei der Grafik die Höhen und Breiten Angaben (im DIV 600px und 450px) wegnimmt, würde das Problem nicht mehr auftauchen, allerdings ist dann die Grafik im Eimer.

Hat jemand ne Idee?

Danke und Gruss, Patric

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. IE verbiegt die Seitenhöhe

    Stefan Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    ich hab das bei mir mal ausprobiert und bin auf folgendes gestoßen:

    Wenn man die fast letzten Zeilen weg nimmt und zwar diese:

    <div style='float: left; height: 100%; width: 19%; background-color: #FFF;'>
      &nbsp;
     </div>

    sieht das noch genauso aus (hab zumindest keinen Unterschied gesehen), aber das Problem ist nicht mehr da. Ich vermute das dieser Bereich irgendwie bei der geringen Auflösung eine Zeile im IE nach unten gerutscht ist. Und da es dann immer noch 100% der Fensterhöhe hat ist die Seite doppelt so hoch.

    Bis denne, Stefan

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. IE verbiegt die Seitenhöhe

      Shihan
      – Informationen zu den Bewertungsregeln

      Hi,

      ich hab das bei mir mal ausprobiert und bin auf folgendes gestoßen:

      Wenn man die fast letzten Zeilen weg nimmt und zwar diese:

      <div style='float: left; height: 100%; width: 19%; background-color: #FFF;'>
        &nbsp;
      </div>

      sieht das noch genauso aus (hab zumindest keinen Unterschied gesehen), aber das Problem ist nicht mehr da. Ich vermute das dieser Bereich irgendwie bei der geringen Auflösung eine Zeile im IE nach unten gerutscht ist. Und da es dann immer noch 100% der Fensterhöhe hat ist die Seite doppelt so hoch.

      Bis denne, Stefan

      Vielen Dank!

      Dies hat wirklich geholfen. Habe allerdings den DIV drin belassen und einfach von 19% auf 18% runtergeschraubt. Gibt jetzt halt eine Seitenbreite von 99% aber das merkt man nicht. Ohne den DIV würde es komische Effekte geben wenn man das Fenster stark verkleinert, dann rutscht das Bild unter dem Farbigen Balken durch :-)

      keine Ahnung warum der IE das so handhabt, aber nochmals Danke, Problem gelöst!

      Gruss, Patric

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln