[Erledigt] IE Problem mit überlappenden Divs

Benshy · 21.01.2011, 13:43

Hi Leute,

evtl. kann mir jemand bei der Lösung helfen.
Ich habe folgenden code in einer .css datei:

Code:

* {
    padding: 0;
    margin: 0;
    }

a {text-decoration:none}

body {
  background-attachment:fixed;
  background-color: #000000;
}


#bigbox {
  position: absolute;
  z-index: -10;

  width: 400px;
  heigth: 400;

  left:50%;
  margin-left: -200px;
}


#loginbox {
  position: absolute;
  z-index: 20;

  height: 60px;
  width: 400px;

  margin-top: -265px;
  margin-left: 95px;
}

Folgendermaßen sind die index datei aus:

Code:

<html>

<head>
<title>Admintool</title>
</head>

<link rel="stylesheet" type="text/css" href="css/style_index.css" />

<body bgproperties="fixed" bgcolor="#000000">

<div id="bigbox"><img src="images/loginbox.jpg" width="400" height="400"></div>

<div id="loginbox">testtext</div>

</body>

</html>

Die Bigbox soll immer ganz hinten angezeigt werden, alles andere kommt dann da drüber.
Letztenendes ist es auch egal was ich bei z-index angebe, im IE wird immer die "bigbox" über den rest angezeigt.

In allen andren Browsern ( Opera, FF ) usw. funktioniert das ganze auch ohne die angabe von z-index ohne probleme, dort werden die divs in ihrer Reihenfolge in der sie aufgerufen werden überlappt.

An was kann das liegen?
Bisher bin ich leider auch durch Dr. Google nicht schlau geworden.

Ich hasse IE und am liebsten würd ichs einfach sein lassen, nur brauch ich in der arbeit das ganze auf IE6 kompatibel.

eagle275 · 21.01.2011, 14:52

durch die Verschachtelung könnte es zum "3-Pixel-Jog" kommen - dadurch verschiebt sich der 2te Div gegenüber der bigbox - passt dann nicht mehr hinein (weil ja beide die gleiche width haben) und dann "knallt" es

Benshy · 21.01.2011, 15:26

Habe hierzu grad mal die Lösungen von dieser Seite ausprobiert, hab aber auch keine Lösung hervorgerufen.

Hier mal der Link zu der Datei: Klick

Evtl. hilft das ja noch zur Lösung.
Das 2te Div wird im IE sozusagen GAR nicht angezeigt bzw. komplett verdeckt.

Schreibe ich den 2ten Divinhalt in den ersten ändert sich auch nichts ( doofe Idee, aber habs einfach mal probiert ).

EDIT:
Ich bin mittlerweile soweit, das es nicht am z-index liegt, sondern an "position".
Das 2te DIV wird im IE an der linken Seite -265px dargestellt, während in allen andren Browsern sich die -265px am rechten Rand des Browsers, bzw. des DIV in dem das 2DIV drinsteht orientiert.

Jetzt müsste ich das nur noch irgendwie dem IE beibringen, was mich wohl nicht drumrumkommen lässt 2 Codeteile zu schreiben. Ich werd das mal probiern.

EDIT2:

Habe es jetzt folgendermaßen gelöst:

Code:

<style type="text/css">@import url(css/style_index.css) all;</style>

<!--[if IE]>
<style type="text/css">@import url(css/style_index_ie.css);</style>
<![endif]-->

Die erste Zeile binden die CSS-Datei nur in allen Browsern ein außer dem IE.
Für den IE wird dann über die folgenden Zeilen eigene eigenen CSS-Datei eingebunden.

Fürs erste ist somit das Problem gelöst.
Ob sich diese Variante wirklich bewährt muss ich erst noch testen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
utf8 Problem (Daten aus DB auslesen)	go1denboy	PHP Tipps 2008	1	23.09.2008 12:19
Problem mit swfobjects	R4v3r	JavaScript, Ajax und mehr	8	21.09.2008 14:17
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
Formular mit DIVs	Aris Sung	HTML, Usability und Barrierefreiheit	2	25.11.2007 14:09
Dynamisches Container-Div für floating Divs	HStev	HTML, Usability und Barrierefreiheit	1	14.09.2007 12:39
DIV's untereinander -> Problem	snatch-ic	HTML, Usability und Barrierefreiheit	1	05.02.2007 12:39
Problem: javascript + verstecken eines Divs	se-clan	HTML, Usability und Barrierefreiheit	4	04.01.2007 10:49
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
Probleme bei Abständen mit DIV's	snatch-ic	HTML, Usability und Barrierefreiheit	11	29.06.2006 22:02
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
[Erledigt] wieder ein Problem bei phpmailer und smtp		PHP Tipps 2006	24	07.02.2006 01:07
problem mit div's		HTML, Usability und Barrierefreiheit	2	08.11.2005 18:55
Css Problem - Divs anders positionieren	ypsie	HTML, Usability und Barrierefreiheit	7	22.08.2005 17:40
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34

21.01.2011, 13:43
Benshy Benutzer Registriert seit: 08.08.2009 Beiträge: 95 PHP-Kenntnisse: Anfänger	[Erledigt] IE Problem mit überlappenden Divs Hi Leute, evtl. kann mir jemand bei der Lösung helfen. Ich habe folgenden code in einer .css datei: Code: * { padding: 0; margin: 0; } a {text-decoration:none} body { background-attachment:fixed; background-color: #000000; } #bigbox { position: absolute; z-index: -10; width: 400px; heigth: 400; left:50%; margin-left: -200px; } #loginbox { position: absolute; z-index: 20; height: 60px; width: 400px; margin-top: -265px; margin-left: 95px; } Folgendermaßen sind die index datei aus: Code: <html> <head> <title>Admintool</title> </head> <link rel="stylesheet" type="text/css" href="css/style_index.css" /> <body bgproperties="fixed" bgcolor="#000000"> <div id="bigbox"><img src="images/loginbox.jpg" width="400" height="400"></div> <div id="loginbox">testtext</div> </body> </html> Die Bigbox soll immer ganz hinten angezeigt werden, alles andere kommt dann da drüber. Letztenendes ist es auch egal was ich bei z-index angebe, im IE wird immer die "bigbox" über den rest angezeigt. In allen andren Browsern ( Opera, FF ) usw. funktioniert das ganze auch ohne die angabe von z-index ohne probleme, dort werden die divs in ihrer Reihenfolge in der sie aufgerufen werden überlappt. An was kann das liegen? Bisher bin ich leider auch durch Dr. Google nicht schlau geworden. Ich hasse IE und am liebsten würd ichs einfach sein lassen, nur brauch ich in der arbeit das ganze auf IE6 kompatibel. Geändert von Benshy (21.01.2011 um 14:50 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.01.2011, 14:52
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	durch die Verschachtelung könnte es zum "3-Pixel-Jog" kommen - dadurch verschiebt sich der 2te Div gegenüber der bigbox - passt dann nicht mehr hinein (weil ja beide die gleiche width haben) und dann "knallt" es __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

21.01.2011, 15:26
Benshy Benutzer Registriert seit: 08.08.2009 Beiträge: 95 PHP-Kenntnisse: Anfänger	Habe hierzu grad mal die Lösungen von dieser Seite ausprobiert, hab aber auch keine Lösung hervorgerufen. Hier mal der Link zu der Datei: Klick Evtl. hilft das ja noch zur Lösung. Das 2te Div wird im IE sozusagen GAR nicht angezeigt bzw. komplett verdeckt. Schreibe ich den 2ten Divinhalt in den ersten ändert sich auch nichts ( doofe Idee, aber habs einfach mal probiert ). EDIT: Ich bin mittlerweile soweit, das es nicht am z-index liegt, sondern an "position". Das 2te DIV wird im IE an der linken Seite -265px dargestellt, während in allen andren Browsern sich die -265px am rechten Rand des Browsers, bzw. des DIV in dem das 2DIV drinsteht orientiert. Jetzt müsste ich das nur noch irgendwie dem IE beibringen, was mich wohl nicht drumrumkommen lässt 2 Codeteile zu schreiben. Ich werd das mal probiern. EDIT2: Habe es jetzt folgendermaßen gelöst: Code: <style type="text/css">@import url(css/style_index.css) all;</style> <!--[if IE]> <style type="text/css">@import url(css/style_index_ie.css);</style> <![endif]--> Die erste Zeile binden die CSS-Datei nur in allen Browsern ein außer dem IE. Für den IE wird dann über die folgenden Zeilen eigene eigenen CSS-Datei eingebunden. Fürs erste ist somit das Problem gelöst. Ob sich diese Variante wirklich bewährt muss ich erst noch testen. Geändert von Benshy (21.01.2011 um 17:26 Uhr).