Stefan Richter: CSS: IE - DIV overflow: hidden Problem

Hallo,

bin gerade wieder einmal auf ein kleines Problem im Zusammenspiel von CSS und dem Internet Explorer gestoßen...

Ich habe ein DIV Element, welchem ich die CSS Eigenschaft overflow: hidden gebe. D.h., wenn das Element bspw. 200px hoch, aber dessen Inhalt größer ist, so wird der Inhalt nach 200px abgeschnitten...

In Firefox, Opera und allen (nicht IE) Browsern funktioniert dies auch einwandfrei... nur im Internet Explorer (6.x und 7.x) wird anscheinend overflow: hidden komplett ignoriert!?

Ich könnte nun bspw. um den DIV einen weiteren legen, mit einer Hintergrundfarbe, und diesem einen höheren z-index verpassen, so dass der darüberliegende Inhalt einfach überdeckt wird... dies ist aber für meine Umsetzung als Kontextmenü nicht erwünscht, da der DIV und dessen Inhalt halbtransparent erscheinen soll... und es daher unbedingt notwendig ist, dass der Inhalt bei Überschreitung der 200px Grenze ausgeblendet wird.

Wäre echt nett, wenn ihr mir einen Tipp geben könntet...

Hier noch die komplette Datei:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
 <HEAD>
 <TITLE></TITLE>

<STYLE type="text/css">
  HTML, BODY {
  }

#cSub {
  width: 160px;
  height: 200px;
  border: solid 1px #000000;
  }

#cSub #main {
  height: 100%;
  overflow: hidden;
  }

UL {
  position: relative;
  top: 0px;
  width: 160px;
  list-style: none;
  margin: 0px;
  padding: 0px;
  }

UL LI {
  border: solid 1px #000000;
  }
 </STYLE>

<SCRIPT type="text/javascript">
  var cMenuTimer = null;

function startScroll(n) {
  if (!cMenuTimer) cMenuTimer = setInterval("scroll(" + (n == 'down' ? true : false) + ")", 50)
  }

function stopScroll() {
  if (cMenuTimer) { clearInterval(cMenuTimer); cMenuTimer = null }
  }

function scroll(n) {
  with (document.getElementById("menu")) {

var iTop = parseInt(style.top);

if (!iTop) iTop = 0;

iTop = iTop + (n ? -5 : 5);

if (iTop > 0) iTop = 0;
   else if (iTop < -offsetHeight + 200) iTop = -offsetHeight + 200;

style.top = iTop + "px"

}
  }
 </SCRIPT>
 </HEAD>

<BODY>
 <P>
  <A href="javascript:void(0)" onmousedown="startScroll('up')" onmouseup="stopScroll()">up</A>
  <A href="javascript:void(0)" onmousedown="startScroll('down')" onmouseup="stopScroll()">down</A>
 </P>

<DIV id=cSub>
  <DIV id=main>

<UL id=menu>
   <LI>Test 1</LI>
   <LI>Test 2</LI>
   <LI>Test 3</LI>
   <LI>Test 4</LI>
   <LI>Test 5</LI>
   <LI>Test 6</LI>
   <LI>Test 7</LI>
   <LI>Test 8</LI>
   <LI>Test 9</LI>
   <LI>Test 10</LI>
   <LI>Test 11</LI>
   <LI>Test 12</LI>
  </UL>

</DIV>
 </DIV>
 </BODY>
</HTML>

Grüße

  1. Hi,

    Ich habe ein DIV Element, welchem ich die CSS Eigenschaft overflow: hidden gebe. D.h., wenn das Element bspw. 200px hoch, aber dessen Inhalt größer ist, so wird der Inhalt nach 200px abgeschnitten...

    richtig.

    In Firefox, Opera und allen (nicht IE) Browsern funktioniert dies auch einwandfrei... nur im Internet Explorer (6.x und 7.x) wird anscheinend overflow: hidden komplett ignoriert!?

    Sicher? Du hast recht treffend erklärt, was der overflow-Fall ist: Er hängt von der Größe des Elements ab. Wie groß ist aber das Element?

    Hier noch die komplette Datei:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

    Die Seite befindet sich im Quirks-Mode. Verlasse diesen unbedingt.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Sicher? Du hast recht treffend erklärt, was der overflow-Fall ist: Er hängt von der Größe des Elements ab. Wie groß ist aber das Element?

      Das Element ist 200px hoch:

      #cSub {

      width: 160px;
      -->>  height: 200px;
        border: solid 1px #000000;

      }

      Die Seite befindet sich im Quirks-Mode. Verlasse diesen unbedingt.

      Habe es gerade bemerkt... wenn ich den DocType weglassen, dann funktioniert es auch im IE... warum? Wenn ich aber nun den DocType weglasse wird der Rest der Seite im IE nicht mehr korrekt dargestellt, weil er ja dann macht was er will...

      Grüße

      1. Hi,

        Das Element ist 200px hoch:

        nicht raten. Prüfen.

        #cSub {
          width: 160px;
        -->>  height: 200px;
          border: solid 1px #000000;
          }

        Dieses Element ist außerdem uninteressant, hat es doch overflow:visible gesetzt.

        Die Seite befindet sich im Quirks-Mode. Verlasse diesen unbedingt.
        Habe es gerade bemerkt... wenn ich den DocType weglassen, dann funktioniert es auch im IE... warum?

        Keine Ahnung. Dadurch sollte er ebenfalls im Quirks-Mode sein. Oder habe ich die DOCTYPEs gerade falsch im Kopf und er war vorher Standards-Compliant (bzw. das, was Microsoft dafür hält)?

        Wenn ich aber nun den DocType weglasse wird der Rest der Seite im IE nicht mehr korrekt dargestellt, weil er ja dann macht was er will...

        Richtig. Also zurück zum Anfang:

        Nicht raten. Prüfen.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. nicht raten. Prüfen.

          Das Element ist 200px hoch!! So habe ich es jedenfalls angegeben... und es wird ja auch so angezeigt.

          Dieses Element ist außerdem uninteressant, hat es doch overflow:visible gesetzt.

          Ja genau, das Element "main" ist ja interessant und dieses ist auf overflow: hidden gesetzt und ebenfalls 200px hoch, da dieses das Element "cSub" komplett ausfüllt...

          Keine Ahnung. Dadurch sollte er ebenfalls im Quirks-Mode sein. Oder habe ich die DOCTYPEs gerade falsch im Kopf und er war vorher Standards-Compliant (bzw. das, was Microsoft dafür hält)?

          So wie ich es als erstes gepostet habe, befindet sich der Browser im Standard Mode, also wo er sich halt nach den W3C Angaben richten soll... ohne DocType befindet sich der Browser dann im Quirks-Mode, wo es dann auch korrekt dargestellt wird.
          Mein Problem ist aber leider: Lasse ich den DocType weg, macht der IE was er will und stellt den Rest der Seite falsch dar...

          Daher meine Frage, gibt es einen CSS-Hack oder ähnliches, um den selben Effekt zu erzielen, so dass es dann auch mit dem IE klappt?

          1. Nachtrag:

            Sobald ich das Listenelement UL (kann auch ein Div sein) auf position: relative setze, wird overflow: hidden im IE komplett ignoriert!

            1. Nachtrag:

              Problem hat sich gelöst... und zwar muss im "main" DIV ebenfalls position: relative stehen, dann klappts auch mit dem IE... obwohl es eigentlich unlogisch erscheint.

              Trotzdem vielen Dank für die Hilfe.

              Grüße

              1. Nachtrag:

                Problem hat sich gelöst... und zwar muss im "main" DIV ebenfalls position: relative stehen, dann klappts auch mit dem IE... obwohl es eigentlich unlogisch erscheint.

                Hi,
                Auch wenn sich dein Problem mittlerweile gelöst hat, finde ich deinen Code nicht optimal.
                Du hast da nicht die Ursachen des Problems beseitigt, sondern nur an den Symptomen herumgedoktert. ;-)

                Sehr wahrscheinlich brauchst du in der UL kein
                UL {
                  position: relative;
                  top: 0px; }
                (Das ist der Default-Wert)

                Ich würde auch eher dem Element 'overflow:hidden' geben, dem du auch 'height: 200px' zugeordnet hast.

                IMO wäre UL dafür das geeignete Element. Die umgebenden Container brauchen keine height-Angabe, da die UL diese schon auf eine Höhe von 200px ausdehnt.

                Die Box #main kannst du dann auch weglassen.

                #cSub {
                  width: 160px;
                   /*  height: 200px;  */
                  border: solid 3px blue;
                  }

                UL {
                  width: 160px;
                  height: 200px;
                  overflow: hidden;
                  list-style: none;
                  margin: 0px;
                  padding: 0px;
                  }

                UL LI {
                  border: solid 1px #000000;
                  }

                So ist es kürzer und funktioniert trotzden. ;-)

                Grüße
                gaby

                1. Vielen Dank für den Hinweis, ich werde es ausprobieren... jedenfalls funktioniert mein scrollbares Menü jetzt erstmal in allen gängigen Browsern (auch dem IE ;-) ).

                  Sehr wahrscheinlich brauchst du in der UL kein
                  UL {
                    position: relative;
                    top: 0px; }
                  (Das ist der Default-Wert)

                  Ja, theoretisch schon... wenn ich aber kein position:relative setze, klappt das mit dem Scrollen nicht!

                  Nochmals danke...

                  Grüße

                  1. Sehr wahrscheinlich brauchst du in der UL kein
                    UL {
                      position: relative;
                      top: 0px; }
                    (Das ist der Default-Wert)

                    Ja, theoretisch schon... wenn ich aber kein position:relative setze, klappt das mit dem Scrollen nicht!

                    Du bist dir aber schon darüber im Klaren, daß User ohne JS im Browser _nicht_ scrollen können? IMO sollte man solche elementaren Browserfunktionen nicht von JavaScript abhängig machen.

                    Guck mal hier:
                    http://gaby77.ga.funpic.de/forum/demo/stefan-scroll_in_ul/stefan-1.html

                    Grüße
                    gaby

                    1. Du bist dir aber schon darüber im Klaren, daß User ohne JS im Browser _nicht_ scrollen können? IMO sollte man solche elementaren Browserfunktionen nicht von JavaScript abhängig machen.

                      Ja, darüber bin ich mir schon im Klaren... aber die komplette Seite ist auf JavaScript aufgebaut... wer halt meint es zu deaktivieren, kommt da nicht drauf... da nehme ich aber auch keine Rücksicht darauf, da es sich  bei der Seite um ein Browsergame handelt und das soll nicht 0815 HTML Design beinhalten ;-)

                      Grüße

    2. Hallo,

      Hier noch die komplette Datei:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

      Die Seite befindet sich im Quirks-Mode.

      Nö, das ist der Doctype für HTML 4.01-Strict, bei welchem kein Browser den in den Quirksmode schaltet.

      mfg. Daniel