✔ zwei div's übereinander (IE6 nein - FF/IE7 ja)

Status
Nicht offen für weitere Antworten.
S

SWAT4

Grünschnabel
Moin

ich brauch mal eure Hilfe ... bin seit einer Woche am Probieren im FF (wie nicht anders zu erwarten) geht es :grin: den IE7 habe ich auch unter Kontrolle bekommen :) aber dann habe ich das mal mit dem IE6 probiert :evil:

Also ich wollte folgendes realisieren, haben einen Header (div) mit background-image, da hinein sol ein weiterer div (so ein Tab/Reiter wie auch hier im Menü zu finden ist) auch mit einem background-image, das CSS des letzten div's wird über "onmouseover" gewechselt (verschiedene background-images). Das ganze schaut wie gesagt im FF und IE7 auch klasse aus und klappt alles, nur im IE6 will das nicht so klappen.

Hier mal der entsprechende Teil des Codes:
Code: 
<div id="header">
			<div class="nav_m_h" 
				onmouseover="this.className='nav_m'"
				onmouseout="this.className='nav_m_h'"
				onclick="location.href='index.php?cat=beispiel1'">
			</div>
			<div class="nav_p_h" 
				onmouseover="this.className='nav_p'"
				onmouseout="this.className='nav_p_h'"
				onclick="location.href='index.php?cat=beispiel2'">
			</div>
<div id="nav">**Untermenü**</div>
</div>
Hier der CSS:
Code: 
#header{
	position:relative;
	background-image:url(images/logo.png);
	background-repeat:no-repeat;
	width:800px;
	height:152px;
	margin-top:20px;
	border:1px #000 solid;
	z-index:2;
}
#nav{
	position:relative;
	background-image:url(images/blende.png);
	background-repeat:repeat;
	width:800px;
	height:32px;
	margin-top:120px;
	z-index:3;
}
.nav_m{
	position:relative;
	background-image:url(images/beispiel1.png);
	height:30px;
	width:110px;
	margin-top:90px;
	margin-left:540px;
	z-index:4;
	float:left;

}
.nav_m_h{
	position:relative;
	background-image:url(images/down.png);
	height:30px;
	width:110px;
	margin-top:90px;
	margin-left:540px;
	z-index:4;
	float:left;

}
.nav_p{
	position:relative;
	background-image:url(images/beispiel2.png);
	height:30px;
	width:110px;
	margin-top:90px;
	margin-left:15px;
	z-index:4;
	float:left;
}
.nav_p_h{
	position:relative;
	background-image:url(images/down.png);
	height:30px;
	width:110px;
	margin-top:90px;
	margin-left:15px;
	z-index:4;
	float:left;
}

Seht ihr durch ? sorry weis nicht wie ich das anders beschreiben könnte.

Habt ihr eine Idee wie man das hin bekommt ?

Danke
Swat
 
Hi,

wie es scheint, verdoppelt der IE6 den margin-left-Wert für das DIV .nav_m_h und .nav_m (= Double Margin Bug).

Lösung: notiere nach dem Stylesheet einen Conditional Comment (<!--[if IE]> ... <![endif]-->), um darin ein Stylesheet mit den korrigierten (halbierten) margin-left-Werten einzubinden:

Code: 
<style type="text/css">
/* bestehendes Stylesheet */
</style>
<!--[if lt IE 7]>
<style type="text/css">
.nav_m{
        margin-left:270px; /* Hälfte von 540px */
}
.nav_m_h{
        margin-left:270px; /* Hälfte von 540px */
}
</style>
<![endif]-->
bzw.
Code: 
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style_ie6.css">
<![endif]-->
 
Moin

Danke für deine schnelle Antwort, leider hat es noch nicht zur Verbesserung beigetragen :(
Das Problem besteht weiterhin mit dem IE6 (habe auch [if lt IE 7] durch [if lt IE 6] ausgetauscht)

Er hat das Problem im Header wo er in die breite und höhe vergrößert wird. Hab mal bissel rum getestet kann es sein das der IE6 allgemein ein Problem hat mit 2 Div's die übereinander sein und ein Background-image besitzen ?
 
Also bei mir funktioniert der Lösungsvorschlag einwandfrei.

Gibt es evtl. eine Online-Version der Seite, um sie mal "live" betrachten zu können?
 
So richtig schlau werde ich nicht daraus, denn der IE6 zeigt die Grafiken leer.png, down.png, mich.png, projekte.png, footer_down.png, kontakt.png und impressum.png grundsätzlich nicht an, also beispielsweise auch dann nicht, wenn ich sie zu Testzwecken als Hintergrundbild für den Dokumentkörper bestimme:

Code: 
body {
background: url(images/[Grafikname].png);
}
Erst wenn ich mir die Grafiken auf meine Festplatte hole, in einem Grafikprogramm öffne und erneut abspeichere, stellt der IE6 sie dar. :confused:

Mit anderen Worten, am Stylesheet liegt es definitiv nicht, dass er die Grafiken nicht darstellt.
 
Kann es damit zusammenhängen das die Grafiken alle Halb-Transparent sind ?

Aber warum verschiebt er dann das Layout ... und zeigt nicht nur die Grafiken nicht an ?

:confused: :confused: :(
 
Das würde dann erklären, warum der IE6 Probleme hat, die Grafiken anzuzeigen, wobei er normalerweise lediglich den transparenten Anteil nicht darstellen kann.

Zu den Layout-Verschiebungen kann ich dir erst morgen mehr sagen, da für mich heute erstmal Feierabend ist ;)
 
Hi,

hier ist mein Lösungsvorschlag, um die Layout-Verschiebungen in den Griff zu bekommen:

  • Erweiterungen und Änderungen in der richard.css:
Code: 
html,body {
        margin:0;
        padding:0;
        height:100%;
}

#copy{
        position:relative;
        width:160px;
        top:12px;
        font:Arial, Helvetica, sans-serif;
        font-size:10px;
        color:#FFFFFF;
        float:left;
        z-index:4;
}

.nav_k{
        position:relative;
        background-image:url(images/kontakt.png);
        height:30px;
        width:110px;
        margin-bottom:2px;
        margin-left:380px;
        z-index:3;
        float:left;
}

.nav_k_h{
        position:relative;
        background-image:url(images/down_footer.png);
        height:30px;
        width:110px;
        margin-bottom:2px;
        margin-left:380px;
        z-index:3;
        float:left;
}
  • Stylesheet für den IE6:
Code: 
<!--[if lt IE 7]>
<style type="text/css">
.nav_m_h, .nav_m, .nav_k_h, .nav_k {
        margin-left:270px;
}
</style>
<![endif]-->

Was die transparenten PNGs angeht, so wirst du diese wohl nochmal überarbeiten müssen, damit der IE6 sie zumindest ohne die Transparenz anzeigt, denn das sollte er eigentlich, wie schon gestern Abend erwähnt. Anschliessend kannst du das folgende Stylesheet für den IE6 einsetzen, damit er den transparenten Anteil in den Grafiken korrekt darstellt:

Code: 
<!--[if lt IE 7]>
<style type="text/css">
.nav_m_h, .nav_m, .nav_k_h, .nav_k {
        margin-left:270px;
}

#nav, .nav_m_h, .nav_m, .nav_p_h, .nav_p, .nav_k_h, .nav_k, .nav_i_h, .nav_i {
        background-image:none;
}

#nav {
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='images/leer.png');
}

.nav_m_h, .nav_p_h {
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/down.png');
}

.nav_m {
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/mich.png');
}

.nav_p {
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/projekte.png');
}

.nav_k_h, .nav_i_h {
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/down_footer.png');
}

.nav_k {
       filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/kontakt.png');
}

.nav_i {
       filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/impressum.png');
}
</style>
<![endif]-->
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück