✔ z-index - Browserkompatibilität

roundaboutmedia

roundaboutmedia

Erfahrenes Mitglied
Eine kurze allgemeine Frage. Bis zu welche Version von FF und IE kann ich damit rechnen das die den Z-Index interpretieren können?
Gruß
Stefan
 
Hi,

Firefox hat schon immer z-index interpretiert, und der IE seit Version 4.

mfg Maik
 
Hast du berücksichtigt, dass z-index nur in Verbindung mit einer Angabe zur position-Eigenschaft funktioniert?

mfg Maik
 
ja, da hat ich doch schon mal Probleme und jetzt hab ich dadrauf geachtet das die Positionierungen gleich sind bei den z Elemente. Das komische ist ja auch das es bei mir in dem IE und FF funktioniert nur bei meinem Kunden nicht, der sieht die Nav nicht...komisch. Muss aber jetzt erst mal bei dem nachsehen was genau der meint bevor ich hier alles änder:).
 
wart ich zeig dir den Quelltext, die Seite ist noch nicht online
HTML: 
@charset "utf-8";
/* CSS Document */

* {
	margin: 0px;
	padding: 0px;
}
html, body {
	height: 100%;
}
body {
	background: #000000 url(../images/bgnd_body.gif) repeat-y fixed center top;
	text-align: center;
}
a, a:link, a:visited, a:active {
	color: #CCCCCC;
	text-decoration: none;
}
a:hover {
	color: #FFFFFF;
}
h1 {
	font-size: 18pt;
	padding-bottom: 10px;
}
h2 {
	font-size: 14pt;
	font-style: italic;
	font-weight: lighter;
	padding-bottom: 10px;
}
h3, h4, h5, h6 {
	font-size: 12pt;
	font-weight: bold;
}
p {
	border-bottom: 2px solid #CC0000;
	padding-bottom: 10px;
	margin-bottom: 15px;
}
strong {
	font-weight: bold;
}
#mask {
	background: url(../images/bgnd_weis.png) repeat-y scroll center top;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width: 980px;
	margin-right: auto;
	margin-left: auto;
	z-index: 1;
	position: relative;
}
#container {
	font: 12pt/120% Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	background: #000000 url(../images/bgnd_main.gif) repeat-x scroll center top;
	text-align: left;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	z-index: 2;
	position: relative;
}
#header {
	height: 255px;
	width: 900px;
	background: url(../images/headimg.png) no-repeat scroll center top;
	overflow: hidden;
	z-index: 1;
	float: left;
	position: absolute;
}
#header h1 {
	margin-top: 500px;
}
#nav {
	background: url(../images/nav_logo.png) no-repeat scroll center top;
	height: 40px;
	padding-top: 110px;
	z-index: 9;
	padding-right: 10px;
	width: 890px;
	float: left;
	position: absolute;
	top: 200px;
}
#nav a, #nav a:link, #nav a:visited, #nav a:active {
	color: #CCCCCC;
	text-decoration: none;
}
#nav a:hover {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 6px solid #FFFF33;
	padding-bottom: 2px;
}
#nav_line {
	background: #FFFF33;
	height: 2px;
	width: 900px;
	z-index: 2;
	position: absolute;
	top: 335px;
}

#nav .left {
	float: left;
}
#nav .right {
	float: right;
}
#nav ul {
	list-style: none;
}
#nav li {
	display: inline;
	padding-bottom: 10px;
	padding-left: 10px;
}
#main {
	z-index: 3;
	padding-top: 10px;
	padding-bottom: 50px;
	float: left;
	margin-top: 370px;
}
#main .main_content {
	float: left;
	width: 640px;
	padding-left: 10px;
}
#main .main_content img {
	padding: 10px;
	border-style: none;
}

#main .advertising {
	width: 250px;
	margin-left: 650px;
	text-align: center;
}
#main .advertising img {
	border: 3px solid #CC0000;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
ich hab bestimmt irgendwo einen Fehler aber ich blick solangsam nicht mehr durch:D
 
roundaboutmedia hat gesagt.:
wart ich zeig dir den Quelltext, die Seite ist noch nicht online
HTML: 
@charset "utf-8";
/* CSS Document */

* {
	margin: 0px;
	padding: 0px;
}
html, body {
	height: 100%;
}
body {
	background: #000000 url(../images/bgnd_body.gif) repeat-y fixed center top;
	text-align: center;
}
a, a:link, a:visited, a:active {
	color: #CCCCCC;
	text-decoration: none;
}
a:hover {
	color: #FFFFFF;
}
h1 {
	font-size: 18pt;
	padding-bottom: 10px;
}
h2 {
	font-size: 14pt;
	font-style: italic;
	font-weight: lighter;
	padding-bottom: 10px;
}
h3, h4, h5, h6 {
	font-size: 12pt;
	font-weight: bold;
}
p {
	border-bottom: 2px solid #CC0000;
	padding-bottom: 10px;
	margin-bottom: 15px;
}
strong {
	font-weight: bold;
}
#mask {
	background: url(../images/bgnd_weis.png) repeat-y scroll center top;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width: 980px;
	margin-right: auto;
	margin-left: auto;
	z-index: 1;
	position: relative;
}
#container {
	font: 12pt/120% Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	background: #000000 url(../images/bgnd_main.gif) repeat-x scroll center top;
	text-align: left;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	z-index: 2;
	position: relative;
}
#header {
	height: 255px;
	width: 900px;
	background: url(../images/headimg.png) no-repeat scroll center top;
	overflow: hidden;
	z-index: 1;
	float: left;
	position: absolute;
}
#header h1 {
	margin-top: 500px;
}
#nav {
	background: url(../images/nav_logo.png) no-repeat scroll center top;
	height: 40px;
	padding-top: 110px;
	z-index: 9;
	padding-right: 10px;
	width: 890px;
	float: left;
	position: absolute;
	top: 200px;
}
#nav a, #nav a:link, #nav a:visited, #nav a:active {
	color: #CCCCCC;
	text-decoration: none;
}
#nav a:hover {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 6px solid #FFFF33;
	padding-bottom: 2px;
}
#nav_line {
	background: #FFFF33;
	height: 2px;
	width: 900px;
	z-index: 2;
	position: absolute;
	top: 335px;
}

#nav .left {
	float: left;
}
#nav .right {
	float: right;
}
#nav ul {
	list-style: none;
}
#nav li {
	display: inline;
	padding-bottom: 10px;
	padding-left: 10px;
}
#main {
	z-index: 3;
	padding-top: 10px;
	padding-bottom: 50px;
	float: left;
	margin-top: 370px;
}
#main .main_content {
	float: left;
	width: 640px;
	padding-left: 10px;
}
#main .main_content img {
	padding: 10px;
	border-style: none;
}

#main .advertising {
	width: 250px;
	margin-left: 650px;
	text-align: center;
}
#main .advertising img {
	border: 3px solid #CC0000;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
ich hab bestimmt irgendwo einen Fehler aber ich blick solangsam nicht mehr durch:D
Zum Vergrößern anklicken....

Ich seh die Navigation nicht. Aber auch nicht den Rest der Seite :p

mfg Maik
 
des ist jetzt ein Witz oder?! Mach mich nicht schwach:confused:
HTML: 
<body id="home_color">
<div id="mask">
<div id="container" class="clearfix">
    <div id="header"></div>
    <div id="nav">
       <div class="left">
    	<ul>
            <li id="current"><a href="index.html" target="_self">Home</a></li>
            <li><a href="beschriftung.html" target="_self">Beschriftung</a></li>
            <li><a href="textilveredelung.html" target="_self">Textilveredelung</a></li>
            <li><a href="design.html" target="_self">Design</a></li>
            <li><a href="shop.html" target="_self">Shop</a></li>
        </ul>
       </div>
       <div class="right">
        <ul>   
            <li><a href="referenzen.html" target="_self">Referenzen</a></li>
            <li><a href="kontakt.html" target="_self">Kontakt</a></li>
            <li><a href="links.html" target="_self">Links</a></li>
            <li><a href="impressum.html" target="_self">Impressum</a></li>
        </ul>
       </div>
    </div>
    <div id="nav_line"></div>
    <div id="main">
        <div class="main_content">
         </div>
      <div class="advertising"></div>
    </div>
</div>
</div>
</body>
</html>
 
Nö, das war kein Witz, oder siehst du was, wenn du lediglich den CSS-Code im Browser lädst? :rolleyes:

Wenn dein Kunde die Navigation nicht sieht, dann vermutlich im IE6, denn so geht's mir auch.

Im IE7 ist sie sichtbar, dafür aber ein ganzes Stück nach rechts verschoben, wie auch #header.

Lediglich im IE8 stimmt die Darstellung mit den anderen Browsern überein.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück