Hendrik Meyer: IE6: Div über Select Box - iFrame Workaround funktioniert NICHT!

SELF-Forum

IE6: Div über Select Box - iFrame Workaround funktioniert NICHT!

Hendrik Meyer
– Informationen zu den Bewertungsregeln

Hallo ihr da draußen!

Habe bereits http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx gelesen und verstanden. Funktioniert soweit auch alles super, solange man den DIV (der die Select Box enthält) nicht scrollen kann. Erzeuge ich jedoch eine Scrollbar und scrolle ist der Workaround nichtig.

Hat jemand eine Lösung??? (IE6!)

Code:
<html>
<head>
<style type="text/css">

.content {
 overflow:auto;
 width: 200px;
 height: 200px;
 z-index: 1;
}

</style>
</head>
<body>

<iframe style="display: visible; position: absolute; height: 10px; width: 100px; top: 30px; left: 20px; z-index: 998;" src="javascript:false;" frameBorder="0" scrolling="no"></iframe>
<div style="background-color: red; height: 10px; width: 100px; top: 30px; left: 20px; border: 1px solid black; position: absolute; z-index: 999">
 Div should be over the Select Box
</div>

<div class="content">
    <div style="width: 300px; height:500px; padding-top: 100px;">
        <select>
            <option>SELECTBOX</option>
        </select>
    </div>
</div>

</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. BITTE LESEN: Mein eigentliches Problem - einfacher formuliert ;)

    Hendrik Meyer
    – Informationen zu den Bewertungsregeln

    Hallo =)

    Glaub ich hab euch ein bisschen verwirrt mit dem ganzen Code da oben ;)
    Deswegen wollt ich noch mal schreiben was ich eigentlich machen will.

    Habe eine Seite mit Header nach folgender Anleitung gebaut:

    http://aktuell.de.selfhtml.org/artikel/css/footer/index.htm#fixierte_navigation_bsp
    bzw. http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htm

    Nun aber das Problem, dass wenn ich Select Boxen im Content-Bereich (Lorem ipsum dolor...) habe diese im Internet Explorer 6 durch den Header durchscheinen.

    Die iFrame Methode funktioniert hier leider nicht - oder wende ich sie nur falsch an?

    Danke für eure Antworten!!! =)

    Gruß!

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. BITTE LESEN: Mein eigentliches Problem - einfacher formuliert ;)

      suit Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Nun aber das Problem, dass wenn ich Select Boxen im Content-Bereich (Lorem ipsum dolor...) habe diese im Internet Explorer 6 durch den Header durchscheinen.

      Die iFrame Methode funktioniert hier leider nicht - oder wende ich sie nur falsch an?

      der internet explorer sieht afaik formularelemente als "oberstes gesetz" an, die sind immer ganz oben drauf - z-index oder ähnliches hilft da nicht

      die i-frame methode müsste schon funktionieren - bringt aber viele nachteile mitsich

      ggf hilft aber die overflow:auto-methode ansatt fixer navigation

      eventuell zeigst du mal ein beispiel wies jetzt aussieht bzw sagst, wies aussehen soll ;) (am besten online als link)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. BITTE LESEN: Mein eigentliches Problem - einfacher formuliert ;)

        Hendrik Meyer
        – Informationen zu den Bewertungsregeln

        eventuell zeigst du mal ein beispiel wies jetzt aussieht bzw sagst, wies aussehen soll ;) (am besten online als link)

        Also wenn der unten liegende Div (in dem die Selectbox liegt) keine Scrollbar hat funktioniert die Lösung einwandfrei - jedoch nicht mit Scrollbar. Aber genau diese wird ja benötigt...

        Hier noch mal der Code:

        Änderungen zur Originaldatei (http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htm):

        
        <select name="selectmenue">
            <option>option 1</option>
            <option>option 1</option>
        </select>

        und

        
<iframe style="display: visible; position: absolute; height: 3em; width: 100%; top: 0px; left: 0px; right: 0px; z-index: 998;" src="javascript:false;" frameBorder="0" scrolling="no"></iframe>

 <div id="header_container" style="z-index: 999;">
  <h1 id="header">Seite mit Header und Footer (2)</h1>

 </div>

        Vollständiger Code der geänderten Datei (zum ausprobieren: http://tinyurl.com/56u9py):

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Feststehende Kopf- und Fußzeile</title>
 <style type="text/css">
  body
  {
   position:absolute;
   background:#ffffff;
  }
  html, body
  {
   top:0; left:0; right:0;
   min-height:100%;
   margin:0;
   padding:0;
   width:100%;
  }
  #header_container
  {
   position:fixed;
   top:0; left:0; right:0;
   text-align:center;
   margin:0;
   height:3em;
   z-index:3;
  }

  #header
  {
   position:absolute;
   top:0; left:0; right:0; bottom:0;
   height:100%;
   background:#efefef;
   z-index:3;
   margin:0;
   padding:0.2em;
  }
  #menu
  {
   position:fixed;
   top:4em;
   left:.5em;
   width:9em;
   border: 3px dotted #dedede;
   padding:.5em;
  }
  #content
  {
   margin:0;
   padding-top:4.85em;
   padding-left:12em;
   padding-bottom:3em;
   z-index:2;
  }
  #footer_container
  {
   position:fixed;
   bottom:0; left:0; right:0;
   text-align:center;
   margin:0;
   height:2em;
   z-index:3;
  }
  #footer
  {
   position:absolute;
   top:0; left:0; right:0; bottom:0;
   background:#efefef;
   z-index:3;
  }

  /* Nun für den MSIE */
  * html, * html body
  {
   overflow:hidden;
   bottom:0;
   height:100%;
  }
  * html #header_container, * html #footer_container
  {
   position:absolute;
   width:100%;
   padding-right:16px;
  }
  * html #menu
  {
   position:absolute;
  }
  * html #header,* html #footer
  {
   height:100%;
   position:static;
  }
  * html #content
  {
   position:absolute;
   top:0; bottom:0; left:0; right:0;
   height:100%;
   width:100%;
   overflow:auto;
   margin:0;
  }

  #menu li
  {
   list-style: none;
   margin:0;
   padding:0.3em;
  }
  #menu li#active
  {
   padding:0.5em;
   text-decoration:underline;
  }
  #menu a:link, #menu a:visited
  {
   display:block;
   background:#eeeeee;
   color:black;
   text-decoration:none;
   margin:0;
   padding:0.2em;;
  }
  #menu a:hover
  {
   background:#4f4f4f;
   color:#ffffff;
   text-decoration:underline;
  }
  * html #menu
  {
   margin:0;
   width:10.5em;    /* Der IE soll das Element breiter darstellen, da margin und padding hier von
           der Breite abgezogen wird! */
  }
 </style>
</head>
<body>
<iframe style="display: visible; position: absolute; height: 3em; width: 100%; top: 0px; left: 0px; right: 0px; z-index: 998;" src="javascript:false;" frameBorder="0" scrolling="no"></iframe>

 <div id="header_container" style="z-index: 999;">
  <h1 id="header">Seite mit Header und Footer (2)</h1>

 </div>


 <ul id="menu">
  <li><a href="beispiel1.htm">Einfacher Footer</a></li>
  <li><a href="beispiel2.htm">Feststehender Footer</a></li>
  <li><a href="beispiel3.htm">Feststehender Footer für den Internet Explorer</a></li>
  <li><a href="beispiel4.htm">Kombination: Ein Footer für alle</a></li>
  <li><a href="beispiel5.htm">Feststehende Kopf- und Fußzeile</a></li>

  <li id="active">Alternative Positionierung, feste Navigation</li>
  <li><a href="index.htm#fixierte_navigation_bsp">Zum Artikel</a></li>
 </ul>


 <div id="content">

  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

  <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>


        <select name="selectmenue">
            <option>option 1</option>
            <option>option 1</option>
        </select>

        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

  <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

  <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>

  <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>

  <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus</p>

  <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p>

  <p>Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</p>

  <p>Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Gratuitous octopus niacin, sodium glutimate.</p>

  <p>Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>

  <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit&aacute; de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>

  <p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>

 </div>

 <div id="footer_container">

  <div id="footer">
   <b>Und hier ist der endgültige Footer!</b>
  </div>
 </div>

</body>
</html>
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. BITTE LESEN: Mein eigentliches Problem - einfacher formuliert ;)

          suit Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Also wenn der unten liegende Div (in dem die Selectbox liegt) keine Scrollbar hat funktioniert die Lösung einwandfrei - jedoch nicht mit Scrollbar. Aber genau diese wird ja benötigt...

          Änderungen zur Originaldatei (http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htm):

          problem verstanden, für ie6 so nicht lösbar
          sieh dir das beispiel 3 an, der footer - da kann man die selectbox "dahinter" scrollen da der scrollbalken vorher aufhört

          du hast momentan

          xxx header \ 000         \ 000 content  --- scrollbar (zusammen)
          000         /
          xxx footer /

          in deinem fall willst du aber folgendes

          xxx header
          000
          000 content <-- scrollbar
          000
          xxx footer

          das dilemma bei der geschichte ist: wenn der viewport zu klein ist, hast du zwei scrollbalken (1x am body/html/viewport und 1x für den inhaltsbereich)

          es ist prinzipiell möglich das zu tun was du willst, aber es ist nicht sehr praktikabel - insbesondere bei kleinen geräten sieht man dann von inhaltsbereich garnix mehr

          überleg dir bitte nochmal, ob du das _wirklich_ exakt so willst - feststehende seitenkomponenten mit position fixed sind zwar einerseits im ie6 nur durch workarounds möglich, andererseits das einer der "features" die in den meisten fällen durch webautoren völlig falsch genutzt werden

          position: fixed ist eine tolle sache, keine frage - aber für feststehende navigation, seitekopf oder fuss mit vorgegebener größe ist es sehr ungünstig, da es einfach sehr viele probleme nach sich zieht

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln