Anzeigenproblem IE6 (Aufklapp-Navigation verschwindet hinter Content) @ tutorials.de: Tutorials, Forum & Hilfe

dwex · 27.06.11 19:20

Hallo Leute,

ich "bastle" nun schon seit geraumer Zeit an meinem Problem und konnte es bisher nicht lösen.

Wie man auf dem Screenshot "moderner_browser" sieht soll das Aufklappmenü natürlich vor der Contentbox stehen und nicht wie im Screenshot "ie6" zu sehen offenbar dahinter.

Dazu verwende ich folgenden Quellcode:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>
<title>Unterseite 1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="./templates/modulefinder/editor.css" rel="stylesheet" type="text/css" />
<link href="./templates/modulefinder/template.css" rel="stylesheet" type="text/css" />
<script src="./modules/droplets/js/mdcr.js" type="text/javascript"></script>


<!--[if lte IE 6]>
	<style type="text/css" media="all">
		body {behavior: url("./templates/modulefinder/csshover.htc");}
	</style>
<![endif]-->
</head>
<body>

<div id="container">
	<div id="navcontainer">
        <div id="nav">
                <ul id="header_menu" class="menu">
                	<li><a href="." class="menu-first navlev0">Home</a></li>
                	<li><a href="./produkte.php" class="menu-expand menu-parent navlev0">Produkte</a>
                		<ul class="ullev1">
                			<li><a href="./produkte/unterseite-1-1.php" class="menu-current menu-first navlev1">Unterseite 1-1</a></li>
                			<li><a href="./produkte/unterseite-1-2.php" class="menu-expand menu-sibling navlev1">Unterseite 1-2</a>
                				<ul class="ullev2">
                					<li><a href="./produkte/unterseite-1-2/unterseite-1-2-1.php" class="menu-first navlev2">Unterseite 1-2-1</a></li>
                					<li><a href="./produkte/unterseite-1-2/unterseite-1-2-2.php" class="menu-expand menu-last navlev2">Unterseite 1-2-2</a>
                						<ul class="ullev3">
                							<li><a href="./produkte/unterseite-1-2/unterseite-1-2-2/unterseite-1-2-2-1.php" class="menu-expand menu-first navlev3">Unterseite 1-2-2-1</a>
                								<ul class="ullev4">
                									<li><a href="./produkte/unterseite-1-2/unterseite-1-2-2/unterseite-1-2-2-1/unterseite-1-2-2-1-1.php" class="menu-first navlev4">Unterseite 1-2-2-1-1</a></li>
                									<li><a href="./produkte/unterseite-1-2/unterseite-1-2-2/unterseite-1-2-2-1/unterseite-1-2-2-1-2.php" class="menu-last navlev4">Unterseite 1-2-2-1-2</a></li>
                								</ul>
                							</li>
                							<li><a href="./produkte/unterseite-1-2/unterseite-1-2-2/unterseite-1-2-2-2.php" class="menu-last navlev3">Unterseite 1-2-2-2</a></li>
                						</ul>
                					</li>
                				</ul>
                			</li>
                			<li><a href="./produkte/unterseite-1-3.php" class="menu-sibling menu-last navlev1">Unterseite 1-3</a></li>
                		</ul>
                	</li>
                	<li><a href="./kontakt.php" class=" navlev0">Kontakt</a></li>
                	<li><a href="./aktuelle-angebote.php" class=" navlev0">Aktuelle Angebote</a></li>
                	<li><a href="./impressum.php" class="menu-last navlev0">Impressum</a></li>
                </ul>
        </div>
	</div>

	<div id="content">
		Dieser Text ist im Blocksatz geschrieben damit wir die &auml;u&szlig;eren   Begrenzungen des Textflusses sehen k&ouml;nnen. Die Informationen in diesem   Text sind v&ouml;llig aus der Luft gegriffen und haben keinen informativen   Wert. Wir schreiben hier einfach ein paar Zeilen welche keinen Sinn   ergeben und wiederholen diese einfach mehrmals um mehr Text zu zeigen.  Dieser Text ist im Blocksatz geschrieben damit wir die &auml;u&szlig;eren   Begrenzungen des Textflusses sehen k&ouml;nnen. Die Informationen in diesem   Text sind v&ouml;llig aus der Luft gegriffen und haben keinen informativen   Wert. Wir schreiben hier einfach ein paar Zeilen welche keinen Sinn   ergeben und wiederholen diese einfach mehrmals um mehr Text zu zeigen.  Dieser Text ist im Blocksatz geschrieben damit wir die &auml;u&szlig;eren   Begrenzungen des Textflusses sehen k&ouml;nnen. Die Informationen in diesem   Text sind v&ouml;llig aus der Luft gegriffen und haben keinen informativen   Wert. Wir schreiben hier einfach ein paar Zeilen welche keinen Sinn   ergeben und wiederholen diese einfach mehrmals um mehr Text zu zeigen.<br />
	</div>
</div>

</body>
</html>

sowie nachfolgendes CSS:

Code css:

html, body {
    /*background: #c7cad3 url(img/bodybg.jpg) repeat-x;*/
    margin: 0;
    height:100%;
    background-color: silver;
}
 
#container {
    width: 960px;
    background-color: silver;
    position:absolute;
    left: 50%;
    top: 10px;
    bottom: 10px;
    margin-left: -480px;
}
 
#navcontainer {
    background-color:black;
    /*height: 30px;*/
    position:absolute;
    top: 100px;
    left: 0px;
    right: 0px;
}
 
#content {
    position: absolute;
    top: 190px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: white;
    overflow:auto;
    clear:both;
    padding: 20px;
        text-align: justify;
}
 
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Layout Blocks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#main { /* Holds the page items in place */
    width: 850px;
    min-height:99%;
    margin: 0 auto 0 auto;
    padding: 0;
    background: #fff;
}
 
#header {
    height:70px;
    background-image: url(img/header-logo.png);
    background-repeat: no-repeat;
    background-position: 0px 10px;
}
* html #header {clear:both;height:70px;} /* ie6 misbehaves again */
 
#pageheader {margin:16px 120px 0 280px;}
#pageheader strong {
    font-size: 16px;
}
 
#breadcrumbs {
    padding:10px;
    background: #fff url(img/breadcrumbsbg.gif) repeat-x;
    clear:both;
}
#breadcrumbs span {
    background: transparent url(img/link.gif) no-repeat;
    padding: 6px 2px 0px 12px; font-weight: bold; }
 
#breadcrumbs a {
    border-bottom: 1px dotted #3b4750;
    text-decoration: none;
}
#breadcrumbs a:hover {border-bottom: 1px solid #3b4750;}
 
#breadcrumbs .menu-current a{
    color: #000000;
}
 
 
 
#infobox { /* Currently holds the login box */
    float: left;
    width: 180px;
}
 
 
#content { /* main content from the WYSIWYG goes in here */
    /*margin: 20px 0 0 190px;
    padding: 4px 10px 14px 0;
    clear: right;*/
}
* html #contentbox #content {text-align:left;} /* ie6 misbehaves */
* html #contentbox #content table {width: 90%;} /* ie6 fix to stop tables being pushed below floats */
 
.clearcontent {height:60px; clear:both}
 
#footerbox {margin: -60px auto 0 auto; height:60px; width: 850px; background: #ffffff;}
#footer {
    font-size: 90%;
    color: #666;
    margin: 10px 5px 10px 5px;
}
 
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
/* Search Box in header */
#search_box {
    color: #fff;
    text-align: right;
}
#search_box {
    float: right;
    clear: right;
    width: 150px;
    padding:10px 0 0 0;
}
 
#search_box .searchstring { width:100px;
    border: 1px solid #333;
}
 
#prevnext {
    float:right;
    margin-top:0px;
    margin-right:5px;
    color: #fff;
    font-weight: bold;
}
#prevnext a {color: #fff;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ####    Header Menu #####
    #######################
 
    Horizontal Drop-Down Menu based off :
    [url]http://www.tanfa.co.uk/css/examples/menu/tutorial-h.asp[/url]
 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
#navContainer {height:30px; display:block;clear:both; background: #c7cad3 url(img/navbg.gif) repeat-x;}
 
 
/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~  */
 ul.menu, li.menu {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
 
/* Header menu */
#header_menu {position: absolute; margin-left: 20px;}
#header_menu li {line-height: normal;}
ul#header_menu  {z-index: 10; clear: both;}
 
#nav {
    float:left;
    height: 30px;
    border: 0;
    padding:0;
}
#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: auto;
    /*
    (Disappearing List-Background)
    [url]http://www.positioniseverything.net/explorer/ie-listbug.html[/url]
    */
    position: relative; /* Fix the Stupid IE6 Bug */
}
 
/* Root Level Link Formatting */
#nav ul li {float: left; color: #fff; text-align: center; font-weight: normal; }
#nav ul li a {display: block; /*background: url(img/navbgl1.gif)*/ background-color:black; no-repeat; padding: 8px 10px 7px 10px; color: #fff; text-decoration: none; font-weight: bold; }
/* Root Level link hover */
#nav ul li a:hover, #nav li a:focus, #nav li a:active, #nav ul li a.active, #nav a.menu-current {/*background: url(img/navbgl1hi.gif);*/ background-color: red; color: #fff;}
#nav a.menu-parent {/*background: url(img/navbgl0parent.gif);*/ background-color: red; color: #fff;}
 
 
/*Current page Customisations*/
#nav a.menu-current     {font-weight: bold;}
 
/* 2nd Child menu */
#nav .menu li ul {position: absolute; width: 11em; margin: 0; display: none; text-transform: none; border-bottom: 1px solid #3b4750; border-left: 1px solid #3b4750; border-right: 1px solid #3b4750; font-size: 100%; background: black /*url(img/ulbg1.jpg)*/ no-repeat;}
#nav .menu li ul li {width: 11em; text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em;}
#nav .menu li ul li a {width: 10.5em; padding: .3em .1em .3em .4em; color: #fff; border-top: 1px solid #3b4750; font-weight: normal;  background: none;}
 
/* 2nd Child link hover */
#nav .menu li ul a:hover,  #nav .menu li ul a.menu-current { background: red /*url(img/navbgl1hi.gif)*/; color:#fff;}
#nav .menu li ul a.menu-parent {background: red /*url(img/navbgl1parent.gif)*/; color:#fff;}
 
/* Show and hide */
#nav .menu li:hover ul, #nav .menu li a:focus ul, #nav .menu li.subMenu ul {display: block;}
#nav .menu li ul ul { display: none;}
#nav .menu li:hover ul ul, #nav .menu li.subMenu ul ul {display: none;}
#nav .menu li:hover>ul, #nav .menu li li:hover>ul, #nav .menu li.subMenu>ul, #nav .menu li li.subMenu>ul {display: block;  z-index: 1000;}
 
 
/* 3rd Child Menu Appreances */
#nav .menu li ul li ul  { margin: 5px 0 0 0%; z-index: 9999;  background: black /*url(img/ulbg2.jpg)*/ no-repeat;}
#nav .menu li ul li ul li   {width: 11em;}
#nav .menu li ul li ul li a     { width: 10.5em;}
 
/* 4rd Child Menu Appreances */
#nav .menu li ul li ul li ul    {  width: 11em; background: black /*url(img/ulbg3.jpg)*/ no-repeat;}
#nav .menu li ul li ul li ul li {  width: 11em; }
#nav .menu li ul li ul li ul li a   { width: 10.5em;}
 
/* Positioning the Pop-out Drops */
#nav li {position: relative;}
 
#nav ul ul ul {
    position: absolute;
    top: 1px;
    left: 100%;
}
 
#nav li:hover {
    z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */
    white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
                            see [url]http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp[/url] for other stuff that work */
}
 
/* end menu */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 
/* Customise the Login Box */
 
 
#login-box { background: #eee; text-align: center;  line-height: 120%; margin: 1em 5px 0.3em 5px; border: 1px solid #ddd;}
#login-box fieldset {border:0; text-align:center;}
#login-box legend       {
    font-size: 90%;
    color: #333;
}
.username {color: #009;} /* Color of name when logged in*/
.topboxbody {font-size:0.8em;padding:2px;}
 
#login-box input {
    display:block;
    font-size: 10px;
    margin: 2px auto 1px auto;
    width: 100px;
}
 
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Custom Classes (Re-useables)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
/*  Float containers fix: */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*  \*/
* html #clearfix {
    height: 1%;
}
/*  */
 
.stealth {visibility:hidden; display:none;} /* hides from normal css enabled browsers */

Hat jemand eine Idee was ich hier falsch mache?
Vielen Dank für euer Hilfe im voraus!

franz007 · 28.06.11 10:04

Hallo

Hast du schon versucht den z-index von #content zu setzten? Er wird zwar beim Menü gesetzt aber beim #content nicht.

Bezüglich ie6:
http://ie6countdown.com/

dwex · 28.06.11 10:24

Das mit dem z-index hatte ich ursprünglich auch probiert.
z-index: 1 geht nicht - das Menü verschwindet immer noch dahinter.
z-index: -1 geht - aber nur im ie6 - im ff (andere habe ich nicht mehr getestet) verschwindet dann der komplette Content.

Ich habe den z-index:-1 jetzt in die ie6.css eingebaut welche ich nur für den ie6 importiere - jetzt funktioniert es - vielen Dank dafür.

Um noch auf deinen Link zu ie6countdown.com einzugehen.
Glaubst du/ihr wirklich was da steht? Deutschland soll nur noch 2% IE 6 haben****?
Webhits (http://www.webhits.de/deutsch/index.shtml?webstats.html) "spricht" aktuell von einer ganz anderen Größenordnung. w3schools (http://www.w3schools.com/browsers/browsers_explorer.asp)dagegen würde das wieder bestätigen

franz007 · 28.06.11 11:51

Hallo

Also ich denke nicht das die Daten von Webhits wirklich representativ sind.

Das würde ja heißen dass mehr als jeder dritte noch mit dem IE6 surft.

Hier noch eine andere Statistik die die 0-3% bestätigt
http://gs.statcounter.com/#browser_v...-200907-201106

dwex · 28.06.11 12:00

Das habe ich mir auch schon gedacht, dass diese nicht sehr representativ sein kann.
Danke für den Link - ist auch interessant.

Was denkst du sollte man überhaupt noch auf den ie6 bei der Entwicklung von Websites acht geben?

franz007 · 28.06.11 18:35

Inzwischen sind viele große Webseiten dazu übergegangen den Support für ie6 einzustellen: facebook, google, twitter (wen ich mich recht entsinne)
Die meisten sagen dass sie keine Zeit mehr in den ie6 mehr investieren. Wenns läuft ok wenn nicht Pech.

Effektiv muss man sagen dass der IE6 heute nicht mehr vorkommen dürfte.
Vista wurde ja mit ie7 ausgeliefert win7 mit 8 und auch für Windows XP ist das Update auf ie7 als sicherheitskritisches Update gekommen.
Wer also den ie6 einsetzt, verwendet ein mindestens 10 Jahre altes Betriebssystem und führt auf diesem nicht einmal als kritisch eingestufte Sicherheitsupdates durch.

Auf der anderen Seite steht immer der Markt. Wenn du eine Webseite für ein Unternehmen baust das täglich 100.000 Zugriffe hat dann sind rein auf die Obigen Statistiken bezogen ca 1000-2000 vom ie6. Wenn bei diesen 2000 das Menü zb nicht funktioniert sind das halt verlorene (potentielle) Kunden.

Das Problem ist: solange die Entwickler den ie6 unterstützen, haben die ie6-User keinen Grund umzusteigen.

Ich persönlich würde sagen dass man ihn in Frieden ruhen lassen soll und für die meisten Webseiten keine Unterstützung bieten sollte. Viel wichtiger sind meist neue Sachen wie zb mobile Browser.
Wenn ein Kunde (trotz aller guten Argumente) jedoch besteht muss man halt klar sagen dass der Aufwand (und damit die Kosten) oft extrem steigt.

Sogar Microsoft wirbt ja auf http://www.theie6countdown.com/ dafür dass man die Leute auf einen neueren Browser hinweisen und den ie6 (endlich) ruhen lassen soll.

Gruß

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Hover Navigation verschwindet hinter dem Content

Dropdown-Menü verschwindet hinter Content

Dropdown-Menü verschwindet hinter Content

Hinter dem Leerzeichen verschwindet alles

Layer verschwindet hinter Flashfilm

E-Mail:

Abonnieren Abbestellen