CSS IE 7-9 Bug z-index

Cool Master · 19. April 2011

Moin,

also ich habe ein kleines Problem mit dem IE. UNd zwar sobald ich die Bilder Galerie starte kann ich mein Menü nicht mehr sehen bzw. es ist hinter dem div mit der Galerie. Das 1. Bild zeigt den FF 3.6 auf Snow Leopard. Das zweite Bild ist von einer XP VM. Code sieht so aus:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Diese Seite ist für den Internet Epxlorer 7 und 8, Firefox 3.6.x, Safari 5.0.4, Chrome 10 und Opera 11 optimiert -->
<!-- Geben Sie Open Source eine Chance und testen Sie einen der Browser :) -->
<head>
<title>Projekte</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="solarhaus,niedrigenergiehaus,holzhaus,luft-solar-haus,baubiologie,architektur,energieberatung" />
<meta name="description" content="IBN Beratung - Planung - Baubetreuung - http://www.wohlraum.de" />
<meta name="Content-Language" content="de" />
<meta name="author" content="http://www.ed-media.com" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="10 days" />
<link href="/media/images/favicon.ico" rel="shortcut icon" />
<link rel="stylesheet" type="text/css" href="/media/css/wohlraum.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="/media/css/wohlraumie8.css" />
<![endif]-->
</head>
<body>
<!--[if lt IE 7]> <div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;'> <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0" height="42" width="820" alt="Willkommen auf Wohlraum.de leider musste ich feststellen, dass Sie noch den Internet Explorer 6.0 nutzen. Bitte Upgraden Sie auf Internet Explorer 7, 8 oder die neuste Version 9.0 vielen Dank :)" /></a></div> <![endif]--> 
<div id="Wohlraum">
<div id="Logo"><a href="/"><img src="/media/images/logo.png" alt="Startseite" /></a></div>
<div id="Main"></div>
 
<div id="Site">NEUBAU</div>
 
<div id="Content"> 
 
<script type="text/javascript" src="/media/simpleviewer/js/simpleviewer.js"></script>
<script type="text/javascript"> 
useFlash = "True";
var flashvars = {};
flashvars.galleryURL = "/media/neubau.xml";
var params = {};
// params.wmode = "transparent"; Transparent --> keine BG Farbe
var attributes = {};
attributes.id = "svInstance";
jQuery(document).ready(function () {
SV.simpleviewer.load("sv-container", "895", "565", "222222", true, flashvars, params, attributes);
});
</script>
<div id="sv-container"></div>
 
</div>
<div class="menu">
<ul>
<li><a href="/neubau" target="_self">Neubau</a>
<ul>
<li><a href="/neubau/projekte" target="_self">Projekte</a></li>
<li><a href="/neubau/holzbausystem" target="_self">Holzbausystem</a></li>
<li><a href="/neubau/leistungen" target="_self">Leistungen</a></li>
</ul>
</li>
<li><a href="/sanierung" target="_self">Sanierung</a>
<ul>
<li><a href="/sanierung/sprojekte" target="_self">Projekte</a></li>
<li><a href="/sanierung/sleistungen" target="_self">Leistungen</a></li>
</ul>
</li>
<li><a href="/solarhaeuser" target="_self">Solarhäuser</a>
<ul>
<li><a href="/solarhaeuser/luft-solar-haus" target="_self">Luft-Solar-Haus</a></li>
<li><a href="/solarhaeuser/sonnenhaus" target="_self">Sonnenhaus</a></li>
</ul>
</li>
<li><a href="/energieberatung" target="_self">Energieberatung</a>
<ul>
<li><a href="/energieberatung/energiecheck" target="_self">Energiecheck (DBU)</a></li>
<li><a href="/energieberatung/vorort" target="_self">Vor-Ort-Beratung</a></li>
<li><a href="/energieberatung/energieausweise" target="_self">Energieausweise</a></li>
<li><a href="/energieberatung/blowerdoor" target="_self">Blower-Door</a></li>
<li><a href="/energieberatung/thermografie" target="_self">Thermografie</a></li>
<li><a href="/energieberatung/leistungenpreis" target="_self">Leistungen</a></li>
</ul>
</li>
<li><a href="/baubiologie" target="_self">Baubiologie</a>
<ul>
<li><a href="/baubiologie/grundlagen" target="_self">Grundlagen</a></li>
</ul>
</li>
<li><a href="/partner" target="_self">Partner</a></li>
<li><a href="/kontakt" target="_self">Kontakt</a></li>
</ul>
</div>
<div class="Impressum">
<ul>
<li><a href="/kontakt" target="_self">Impressum</a></li>
</ul>
</div>
</div>
</body>
</html>

CSS (für den IE):

Code:

@charset "utf-8";

body {
    background: url("/media/images/background.png") repeat-x scroll 0 0 #606060;
}
img {
    border: 0 none;
    display: block;
    margin: 0px auto;
}

td{
    text-align: center;
  }

#Wohlraum {
    left: auto;
    margin: auto;
    position: relative;
    top: 10px;
    left:0px;
    top:0px;
    width:950px;
    height:740px;
    background: #E6DCC8;  /*FFFFCC, FFCC99, 99CCFF, FFCC33, FABF0B */
}

#Logo {
    position:absolute;
    left:auto;
    top:0px;
    width:950px;
    height:100px;
}

#Main {
    background-image: url("/media/images/Main.png");
    position:absolute;
    left:0px;
    top:130px;
    width:950px;
    height:610px;
}


#Site {
    font: 50px "Times New Roman","calibri","verdana","helvetica","arial";
    position:absolute;
    left:425px;
    top:55px;
    height: 50px;
    width:480px;
    color: #999999;
    font-weight:bold;
    z-index:0;
}

#Content {
    background-color: #FFFFFF;
    color: black;
    font: 90% "Times New Roman", "verdana","helvetica","arial";
    height: 565px;
    left: 16px;
    margin: 0px;
    overflow: auto;
    position: absolute;
    top: 141px;
    width: 895px;
    text-align: left;
}

.Impressum {
    border: 0;
    font: bold 15px "Times New Roman", "verdana","helvetica","arial";
    height: 10px;
    left: 854px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 714px;
    width: 150px;
    z-index: 3;
}
.Impressum ul {
    background: none repeat scroll 0 0 #413F40;
    height: 0px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    top: 735px;
    width: 150px;
}
.Impressum li {
    float: left;
    padding: 0;
}
.Impressum li a {
    background: none repeat scroll 0 0 #413F40;
    color: #FABF0B;
    display: block;
    font-weight: normal;
    line-height: 14px;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
}
.Impressum li a:hover, .menu ul li:hover a {
    background: none repeat scroll 0 0 gray;
    color: #FABF0B;
    text-decoration: none;
}
.Impressum li:hover ul {
    display: block;
}
.Impressum p {
    clear: left;
}
.menu {
    border: 0 none;
    font: bold 15px "Times New Roman", "verdana","helvetica","arial";
    left: 15px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 104px;
}
.menu ul {
    background: none repeat scroll 0 0 #413F40;
    height: 30px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 920px;
    z-index: 10;
}
menu li {
    float: left;
    padding: 0;
}
.menu li a {
    background: url("/media/images/seperator.gif") no-repeat scroll 0 0 #413F40;
    color: #FABF0B;
    display: block;
    font-weight: normal;
    line-height: 30px;
    margin: 0;
    padding: 0 34px;
    text-align: center;
    text-decoration: none;
    z-index: 10;
}
.menu li a:hover, .menu ul li:hover a {
    background: none repeat scroll 0 0 gray;
    color: #FABF0B;
    text-decoration: none;
}
.menu li ul {
    background: #413F40;
    border: 1px #FABF0B; /* Border für dropdown außen */
    display: none;
    height: auto;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 164px;
    z-index: 10;
}
.menu li:hover ul {
    display: block;
}
.menu li li {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    width: 164px;
    z-index: 10;
}
.menu li:hover li a { /* Hintergrundfarbe für Dropdown */
    background: none repeat scroll 0 0 transparent;
}
.menu li ul a { /* Dropdown */
    display: block;
    font-size: 12px;
    height: 30px;
    margin: 1px; /* "Box" Abstand von einem pixel */
    padding: 0 10px 0 10px;
    text-align: left;
    border: 1px solid #FABF0B; /* Gelber Border für Dropdown */
    z-index: 10;
}
.menu li ul a:hover, .menu li ul li:hover a {
    background: none repeat scroll 0 0 gray;
    color: #FABF0B;
    text-decoration: none;
}
.menu p {
    clear: left;
}

Dank euch wenn ihr den Fehler finded ich wüsste nicht an was es liegt.

Madman1209 · 19. April 2011

Hi,

kannst du im CSS mal testen was passiert, wenn du "position:absolute" in "position:relative" änderst?

VG,
Mad

Cool Master · 19. April 2011

Passiert leider nichts

Madman1209 · 19. April 2011

Hi,

hm...merkwürdig. Auf den ersten Blick sehe ich nichts was auffällig ist. Bin aber zugegebenermaßen auch gerade in der Arbeit und gucke nur nebenher

Wenn ich zuhause bin heute Abend kann ich genauer suchen. Aber vielleicht kann dir bis dahin ja schon jemand anders helfen.

Browseranpassungen sind echt widerlich... ich drück dir die Daumen!

VG,
Mad

Cool Master · 19. April 2011

Das:

http://web.enavu.com/snippets/fixing-the-ie7-z-index-issue-internet-explorer-7-z-index/

hat leider auch nichts gebracht

Suche

CSS IE 7-9 Bug z-index

Cool Master

Fleet Admiral

Madman1209

Fleet Admiral

Cool Master

Fleet Admiral

Madman1209

Fleet Admiral

Cool Master

Fleet Admiral

Ähnliche Themen