Anzeige

Brauche Hilfe bei Z-Index und IE7

Brauche Hilfe bei Z-Index und IE7 | PSD-Tutorials.de

Erstellt von Beowulf, 23.07.2008.

  1. Beowulf

    Beowulf Nicht mehr ganz neu hier

    Dabei seit:
    02.05.2006
    Beiträge:
    79
    Geschlecht:
    männlich
    Ort:
    Oldenburg
    Software:
    Adobe Photoshop CS3
    Brauche Hilfe bei Z-Index und IE7
    Hallo zusammen,

    ich habe da ein kleines Problem mit einigen Seiten. Wenn ich mit dem Z-Index arbeite, zeigt mir fast jeder Browser das Ergebnis korrekt an, nur eben mal wieder nicht der IE7. Dieser zeigt die Bilddatei uc.png nämlich scheinbar nicht an. Tatsächlich aber zeigt der IE7 das Bild unterhalb der Hintergrunddatei bg.png an. Insgesamt ist das für mich recht rätselhaft.

    HTML:
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    3. "http://www.w3.org/TR/html4/loose.dtd">
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    5. <title>www.flight-events.de</title>
    6. </head>
    7.  
    8. <body style="margin:0px; overflow:hidden; z-index:0;">
    9. <div style="width:100%; height:100%; z-index:1;">
    10.     <img src="bg.png" alt="" style="width:100%;">
    11.     <div style="text-align:center; width:95%; z-index:2; position:absolute; top:10%;">
    12.         <img src="uc.png" border="0" alt="Site under Construction">
    13.     </div>
    14. </div>
    15. </body>
    16. </html>
    17.  
    Kann mir einer sagen, was ich falsch gemacht habe, oder warum sich der Internet Explorer so vehement wehrt, das Bild korrekt anzuzeigen? Laut HTML Validator von Firefox ist der Quellcode W3C-valide. Der IE sollte also meines Erachtens das Bild oberhalb des Backgrounds anzeigen und zwar so, wie es auch alle anderen Browser machen.

    Gruß
    Beowulf
     
    #1      
  2. tiroler

    tiroler Hat es drauf

    14
    Dabei seit:
    04.11.2006
    Beiträge:
    2.202
    Geschlecht:
    männlich
    Ort:
    Pfalz und Tirol
    Software:
    CS4, C4D R10
    Kameratyp:
    Canon EOS 400D+L-Obj.
    Brauche Hilfe bei Z-Index und IE7
    #2      
  3. Beowulf

    Beowulf Nicht mehr ganz neu hier

    Dabei seit:
    02.05.2006
    Beiträge:
    79
    Geschlecht:
    männlich
    Ort:
    Oldenburg
    Software:
    Adobe Photoshop CS3
    Brauche Hilfe bei Z-Index und IE7
    AW: Brauche Hilfe bei Z-Index und IE7

    Manchmal ist das echt interessant mit dem IE. Vielen Dank für den Tip. position:absolute alleine hat allerding nicht gereicht. Ich musste ALLE Angaben von position eintragen, ansonsten wollte IE die Divs gar nicht mehr anzeigen.

    Hier ist der nun korrekte Quellcode
    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2. "http://www.w3.org/TR/html4/loose.dtd">
    3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    4. <title>www.flight-events.de</title>
    5. </head>
    6.  
    7. <body style="position:absolute; top:0px; left:0px; right:0px; bottom:0px; z-index:0; margin:0px; overflow:scroll; ">
    8. <div style="position:absolute; top:0px; left:0px; right:0px; bottom:0px; z-index:1; width:100%; height:100%; ">
    9.     <img src="bg.png" alt="" style="width:100%;">
    10.     <div style="position:absolute; top:10%; left:0px; right:0px; bottom:0px; z-index:2; text-align:center; width:95%;">
    11.         <img src="uc.png" border="0" alt="Site under Construction">
    12.     </div>
    13. </div>
    14. </body>
    15. </html>
    Es gibt jetzt nur noch kleine Anzeigefehler bei Safari (Anzeigefehler bei kleinem Fenster) und Opera (ignoriert senkrecht overflow:hidden), aber damit kann ich eigentlich leben.

    Vielen Dank so far
     
    #3      
  4. stielerberlin

    stielerberlin Noch nicht viel geschrieben

    Dabei seit:
    25.03.2008
    Beiträge:
    40
    Geschlecht:
    männlich
    Brauche Hilfe bei Z-Index und IE7
    AW: Brauche Hilfe bei Z-Index und IE7

    Safari wird immer beliebter. Einige gehen schon von Firefox auf Safari.
    Ich denke, die Pages sollten auch mit diesem Browser funktionieren. Aber die Zukunft wird's zeigen. Ich bastle meine Pages jedoch schon Safari-tauglich...
     
    #4      
  5. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    Brauche Hilfe bei Z-Index und IE7
    AW: Brauche Hilfe bei Z-Index und IE7

    Kannste den Blödsinn mal erklären? ;)



    Überhaupt hast du dir ne merkwürdige Anordnung ausgedacht... wenn du absolut positionierst, dann ist eine Verschachtelung total unnötig... Wenn dann mach es richtig und dann klappt es auch in Safari und Opera



    Probier mal:

    HTML:
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    3. "http://www.w3.org/TR/html4/loose.dtd">
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    5. <title>www.flight-events.de</title>
    6.  
    7. <style type="text/css">
    8. <!--
    9. *   {
    10. margin:0;
    11. padding:0;
    12. }
    13.  
    14.  
    15. html, body {
    16. width:100%;
    17. height:100%;
    18. }
    19.  
    20. #layer_one {
    21. position:absolute;
    22. top:0px;
    23. left:0px;
    24. z-index:1;
    25. width:100%;
    26. height:100%;
    27. background-color:#dedede;
    28. overflow:hidden; /* je nach Bedarf auch auto sonst weglassen*/
    29. }
    30.  
    31. #layer_two {
    32. position:absolute;
    33. top:10%;
    34. left:0px;
    35. z-index:2;
    36. text-align:center;
    37. width:95%;
    38. overflow:auto;
    39. }
    40. -->
    41. </head>
    42.  
    43. <div id="layer_one"><img src="bg.png" alt="" style="width:100%;"></div>
    44. <div id="layer_two"><img src="uc.png" border="0" alt="Site under Construction"></div>
    45.  
    46. </body>
    47. </html>
    48.  


    Funzt in IE6, Safari, Opera, Seamonkey

    Ach ja: overflow: hidden im body-Tag wurde schon immer vom Opera ignoriert (ist im Prinzip auch unnötig, da Opera und FF Scrollbalken erst bei Bedarf einfügen)


    Edith sagt: Jetzt wo ich mir den Code so schon bunt ansehe... wozu brauchst du eine absolute Positionierung?
     
    Zuletzt bearbeitet: 23.07.2008
    #5      
  6. Beowulf

    Beowulf Nicht mehr ganz neu hier

    Dabei seit:
    02.05.2006
    Beiträge:
    79
    Geschlecht:
    männlich
    Ort:
    Oldenburg
    Software:
    Adobe Photoshop CS3
    Brauche Hilfe bei Z-Index und IE7
    AW: Brauche Hilfe bei Z-Index und IE7

    Ich brauchte das eigentlich nicht, zumindestens hatte ich es so anfangs nicht geplant, aber irgendwie funktioniert sonst halt die Geschichte mit dem z-index (siehe 1. Posting) nicht.
    Aber vielleicht könntest Du mir mit einer kleinen Hilfestellung weiterhelfen. Wir bekomme ich einen Hintergrund, der sich nicht in der Größe verzieht (also immer in bester Qualität dargestellt wird) und ohne jedwelche Scrollbalken. Wenn ich zum Beispiel bei Opera oder Safari das Fenster zu schmal ziehe, kommt ein unschöner Balken unten zum Vorschein. Dieser ist bei Firefox nur minimal sichtbar.
     
    Zuletzt bearbeitet: 24.07.2008
    #6      
  7. quadratlatsche

    quadratlatsche Noch nicht viel geschrieben

    Dabei seit:
    05.03.2011
    Beiträge:
    1
    Geschlecht:
    männlich
    Brauche Hilfe bei Z-Index und IE7
    AW: Brauche Hilfe bei Z-Index und IE7

    Hallöle,

    Kommt zwar ein bisschen spät:

    Code (Text):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2. "[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">
    3. <html>
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    6. <title>TITLE</title>
    7. </head>
    8. <body style="">
    9. <div style="">
    10.     <img src="BILD" alt="" style="width:100%;">
    11.     <div style="position:absolute; top:10%; left:0px; right:0px; bottom:0px; text-align:center; width:95%; z-index:2;">
    12.         <img src="BILD" border="0" alt="Site under Construction">
    13.     </div>
    14. </div>
    15. </body>
    16. </html>
    Dein Code würde allerdings auch so im IE7 richtig angezeigt. Wichtig scheint die GENAUE Positionierung deines Elementes zu sein (position:absolute;left:,right:,...)
    oder eine GENAUE Positionierung der Elternelemente, die die Position deines Elementes vorgeben.
    Alle anderen Elemente haben automatisch den z-index Wert: -0,5 ;).
    Oder anders gesagt verschwindet dein positioniertes Element bei "z-index:-1" hinter undefinierten Elementen.

    (ausprobiert mit IE 7.0)
     
    Zuletzt bearbeitet: 05.03.2011
    #7      
x
×
×
teststefan