Schenkeli Thomas: Vertikaler Scrollbalken im IE erscheint immer

Hallo,

ich habe beim Erstellen eines Seitengrundgerüstes mit DIVs ein Problem: egal was ich tue, am rechten Bildschirmrand wird immer eine Scrollbar angezeigt. Falls der Inhalt nicht zu lang ist zwar deaktiviert, aber sie wird angezeigt. Da ich nun nur einen DIV-Bereich haben möchte der Scrollbar ist, stört mich der zusätzliche Scrollbalken ein wenig, da mehr Inhalt zwei nebeneinander angezeigt werden: ein aktiver und ein inaktiver.

Hier mein Code:

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>   <meta http-equiv="content-type" content="text/html;charset=utf-8" />   <meta name="generator" content="Adromir" />   <title>Spalten</title>   <style type="text/css" media="screen"><!--

  • { margin: 0; padding: 0; } html, body { height: 100%; display: block; } #top { background-color: #ff8400; position: relative; height: 10%; width: 100%; display: block; } #left { background-color: #051cb5; position: relative; height: 80%; width: 20%; float: left; display: block; } #middle { background-color: #17ab01; position: relative; height: 80%; width: 20%; float: left; display: block; } #right { background-color: #d30000; position: relative; height: 80%; width: 60%; overflow:auto; float: left; display: Block; } #bottom { background-color: #00d1c0; position: relative; height: 10%; width: 100%; clear: left; display: block; } /Dieser Hack ist für Opera/ @media all and (min-width: 0px){ #bottom { margin-top: 0;} #left{margin-bottom: 0;} #right{margin-bottom: 0;} #middle{margin-bottom: 0; margin-right: 0%; margin-left: 0%} } --></style>

<!-- Dies ist der Hack für den IE -->  <!--[if IE]>   <style type="text/css" media="screen">  body {width: 99.5%; margin-bottom: 0.1%;} #left {margin-bottom: 0%; } #middle {margin-bottom: 0%;} #right { margin-bottom: 0%; margin-right: 0%} #bottom { height: 9.99%; } </style>    <![endif]-->

</head>

<body>   <div id="top">Dies ist der Header</div>   <div id="left">Dies ist die Linke Spalte</div>   <div id="middle">Dies ist die Mittlere Spalte</div>   <div id="right">    1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />    11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />    21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />    31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />    41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br />    51<br />52<br />53<br />54<br />55<br />56<br />57<br />58<br />59<br />60<br />   </div>   <div id="bottom">Dies ist die untere Spalte</div>  </body>

</html>

Im Firefox funktioniert es so wie es soll: der DIV-Bereich "right" mit der Eigenschaft "overflow:auto;" ist der einzige der sich scrollen lässt. Nur der IE spielt verrückt.

Wenn ich mir nun andere Seiten wie zB www.google.com ansehe dann ist es da genauso: im IE erscheint immer ein (deaktivierter) Scrollbalken, im Firefox sieht alles gut aus. Auf Seiten die aber mit "bösen" Frames gemacht sind wie zB "http://www.validome.org/doc/HTML_ge/html/frames/anzeige/frames.htm" funktioniert es so wie es soll: Scrollbalken erscheinen nur wenn sie es sollen.

Handelt es sich also um ein allgemeines IE-Problem das nur bei Frames nicht besteht oder gibt es auch für Seiten die auf DIVs basieren einen "Hack"?

Danke für eure Hilfe lg Thomas

  1. Hallo,

    #bottom { background-color: #00d1c0; position: relative; height: 10%; width: 100%; clear: left; display: block; }
    body {width: 99.5%; margin-bottom: 0.1%;}
    #bottom { height: 9.99%; }

    mathematisch betrachtet ist hier ein Fehler!
    9,99 + 0,1 = 10,09 != 10

    bydey

    --
    -- bydey ist die Signatur und Verabschiedung, nicht der Nick --
    -- Navigate all your PHP web projects with  PHP Project Browser--
    1. Hallo,

      #bottom { background-color: #00d1c0; position: relative; height: 10%; width: 100%; clear: left; display: block; } body {width: 99.5%; margin-bottom: 0.1%;} #bottom { height: 9.99%; } mathematisch betrachtet ist hier ein Fehler! 9,99 + 0,1 = 10,09 != 10

      Also ich habe diesen "Hack" nur von wo anders kopiert, logisch müsste es natürlich heißen: margin-bottom: 0.01%, Wenn ich das so umstelle erhalte ich aber wieder eine aktivierte Scrollbar die sich ungefähr einen Pixel nach unten scrollen lässt, obwohl dann rein mathematisch 100% vorliegen ... dürfte also einen IE spezifischen Grund haben warum dort 0.1% steht.

      Der Grund warum eine deaktivierte Scrollbar angezeigt wird, dürfte also ein anderer sein.

      bydey

      lg Thomas

      1. Hallo,

        du hast auf Sand gebaut:

        • alle deine Additionen ergeben 100%
        • ohne Scrollbar
        • und die Scrollbar fügt x% hinzu
        • das ergibt >100%
        • und das fängt IE wiederum mit einer Scrollbar ab

        ich gabe deinen Code mal beo mir eingesetzt und dein div right wurde nicht gefloatet. Dann habe ich dies auf 50% reduziert und alles sieht aus wie gewollt, bis auf die Lücke neben div right.
        Ich bin nicht sicher, ob die breite der Scrolleiste variable, % breit oder px breit ist. Ich denke du mußt rechts oder links vom Gesamtkontrukt eine variable Lücke lassen in die sich die Scrollbar einnisten kann.

        bydey

        --
        -- bydey ist die Signatur und Verabschiedung, nicht der Nick --
        -- Navigate all your PHP web projects with  PHP Project Browser--
        1. Hallo,

          du hast auf Sand gebaut:

          • alle deine Additionen ergeben 100%
          • ohne Scrollbar
          • und die Scrollbar fügt x% hinzu
          • das ergibt >100%
          • und das fängt IE wiederum mit einer Scrollbar ab

          ich gabe deinen Code mal beo mir eingesetzt und dein div right wurde nicht gefloatet. Dann habe ich dies auf 50% reduziert und alles sieht aus wie gewollt, bis auf die Lücke neben div right.
          Ich bin nicht sicher, ob die breite der Scrolleiste variable, % breit oder px breit ist. Ich denke du mußt rechts oder links vom Gesamtkontrukt eine variable Lücke lassen in die sich die Scrollbar einnisten kann.

          Klingt logisch ABER: das würde ja nur erklären warum eine vertikale Scrollbar eine ungewollte horizontale Scrollbar verursacht oder umgekehrt. Aber ich habe eine inaktive vertikale Scrollbar die immer da ist (selbst eine html-Datei die nur den Inhalt "text" hat zeigt im IE eine inaktive vertiale Scrollbar an).

          Durch mein DIV mit "overflow:auto;" erscheint nun neben dieser einen inaktiven vertikalen Scrollbar eine zeite aktive vertikale Scrollbar die aber natürlich nur so hoch ist wie das dazugehörende DIV.

          Die Ursprüngliche Scrollbar ist also schon immer da, glaube nciht dass das mit zuviel Breite zu tun hat, vor allem da sie ja inaktiv ist

          bydey

          lg
          Thomas