[Erledigt] Problem mit IE8+9 - div hinter anderem div

BJ1995 · 11.05.2011, 20:15

Beim Internet Explorer 8 und 9 ist ein div unter dem header. Bei IE 7,6 und 5.5 und auch bei allen anderen modernen Browsern ist der header vor dem anderen div so wie ich das eigentlich wollte. Ich habe noch zwei Screenshots gemacht im IE7 so wie es sein soll und im IE9 so wie es nicht sein soll.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Home</title>

    <style type="text/css">
        textarea{
            font-family:"Verdana",sans-serif;
        }
        *{
            margin:0px;
        }
        a:visited{
            color:blue;
        }
        body{
            margin:0;
            background:#BEE1E8;
            color:#00233B;
            font-family:"Verdana",sans-serif;
        }
        #head{
            min-width:950px;
            background: #207cca; /* Old browsers */
            background: -moz-linear-gradient(top, #207cca 0%, #609ac9 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#207cca), color-stop(100%,#609ac9)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #207cca 0%,#609ac9 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #207cca 0%,#609ac9 100%); /* Opera11.10+ */
            background: -ms-linear-gradient(top, #207cca 0%,#609ac9 100%); /* IE10+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#609ac9',GradientType=0 ); /* IE6-9 */
            background: linear-gradient(top, #207cca 0%,#609ac9 100%); /* W3C */
            height:100px;
            left:0;
            border-bottom:3px solid #1E5799;
        }
        #sidebar{
            margin:10px 0px 0px 10px;
            width:220px;
            height:600px;
            background:rgb(255,255,255);
            background:rgba(255,255,255,0.7);
            float:left;
        }
        #main,#sidebar{
            -moz-border-radius:5px;
            border-radius:5px;
        }
        #main{
            -moz-border-radius-topleft:0px;
            border-top-left-radius:0px;
            margin:-40px 10px 10px 250px;
            background:rgb(255,255,255);
            background:rgba(255,255,255,0.7);
            width:700px;
            height:800px;
        }
        #nav{
            position:absolute;
            margin-top:-28px;
            min-width:700px;
        }
        #nav div a{
            padding-top:3px;
            text-decoration:none;
            display:block;
            color:#00233B;
        }
        #nav div{
            -moz-border-radius-topleft:4px;
            -moz-border-radius-topright:4px;
            border-top-left-radius:4px;
            border-top-right-radius:4px;
            float:left;
            text-align:center;
            margin:0 2px;
            padding:0 7px;
            height:28px;
            font-size:110%;
            background:rgb(255,255,255);
            background:rgba(255,255,255,0.3);
            -moz-transition: background 0.3s;
            -webkit-transition: height 0.3s;
            -o-transition: height 0.3s;
            transition: height 0.3s;
        }
        #tab1{
            margin-left:0px!important;
        }
        .navtarg{
            cursor:default;
            background:rgb(255,255,255);
            background:rgba(255,255,255,0.7)!important;
        }
        .subnav{
            clear:both;
            position:absolute;
            width:500px;
            height:37px;
        }
        .subnav a{
            display:table-cell;
            vertical-align:middle;
            color:#00233B!important;
            font-size:80%;
            text-decoration:none;
            padding:0px 14px;
            height:38px;
        }
        #subnav2,#subnav3,#subnav4,#subnav5{
            display:none;
        }
        .flol{
            float:left;
        }
        .flor{
            float:right;
        }
    </style>
</head>

<body>
    <div id="head">
    </div>
    <div id="sidebar">
    </div>
    <div id="main">
        <div id="nav">
            <div class="navtarg" id="tab1"><a href="#">Home</a></div>
            <div id="tab2"><a href="#">testseite</a></div>
            <div id="tab3"><a href="#">Nachrichten</a></div>
            <div id="tab4"><a href="#">irgendetwas</a></div>
            <div id="tab5"><a href="#">Test</a></div>
        </div>
        <div class="subnav" id="subnav1">
            <a href="#">Seite 1</a>
            <a href="#">Unterseite 2</a>
            <a href="#">BlaBla</a>
            <a href="#">Test</a>
        </div>
        <div class="subnav" id="subnav2">
            <a href="#">Seite 2.1</a>
            <a href="#">Unterseite 2.2</a>
            <a href="#">BlaBla 2.3</a>
            <a href="#">Test 2.4</a>
        </div>
        <div class="subnav" id="subnav3">
            <a href="#">Seite 3.1</a>
            <a href="#">Unterseite 3.2</a>
            <a href="#">BlaBla3.3</a>
            <a href="#">Test3.4</a>
        </div>
        <div class="subnav" id="subnav4">
            <a href="#">Seite 4.1</a>
            <a href="#">Unterseite 4.2</a>
            <a href="#">BlaBla 4.3</a>
            <a href="#">Test 4.4</a>
        </div>
        <div class="subnav" id="subnav5">
            <a href="#">Seite 5.1</a>
            <a href="#">Unterseite 5.2</a>
            <a href="#">BlaBla 5.3</a>
            <a href="#">Test 5.4</a>
        </div>
    </div>
</body>
</html>

Warum geht es nicht richtig im IE 8 und 9? Ich habe es schon mit z-index ausprobiert, aber es ändert nichts.

dreamcatcher · 12.05.2011, 10:58

Es liegt an folgender Zeile:

PHP-Code:

              filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#609ac9',GradientType=0 ); /* IE6-9 */

Diese interpretiert der IE8 anders (IE9 habe ich gerade nicht drauf, sollte aber das Gleiche sein).

Wenn du sie weglässt, hast du das gewünschte Ergebnis.

Du müsstest nun testen ob dies bei IE5.5 < auch zutrifft.

Falls nicht steck eine Klausel mit hienein dass diese Zeile nur für bestimmte IE Versionen gilt (IF Gerammel).

BJ1995 · 12.05.2011, 15:01

Danke dreamcatcher
So klappts:

PHP-Code:

  <!--[if lt IE 6]><!-->filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#609ac9',GradientType=0 ); /* IE6-9 */<!--<![endif]-->

drsoong · 19.05.2011, 23:00

Zitat:

Bei IE 7,6 und 5.5 und auch bei allen anderen modernen Browsern

Hä?

lstegelitz · 20.05.2011, 10:44

Hach, ich wische noch die Tränen aus den Augenwinkeln... IE 6 und "moderner" Browser, köstlich

eagle275 · 20.05.2011, 10:58

und der 5.5er erst - der hat ja nicht mal das w3c Boxmodell ^^ und vor allem - wer in der "realen" Welt (also nicht hinter verschlossenen Unternehmens(netzwerk)toren) setzt diese Urgroßväter von vor mehr als 10 Jahren noch ein ....

nikosch · 21.05.2011, 19:35

Der 1er ist dann die Königsklasse. Es gilt die Schulnotenversionierung

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
Problem mit Ajax - Session Problem	halskrause	PHP Tipps 2009	10	12.01.2010 02:27
[Erledigt] Problem mit Mehrsprachigkeit	Sniper_Kotaro	PHP Tipps 2009	2	16.12.2009 11:47
Problem beim Download Management	mistermint	PHP Tipps 2009	8	24.10.2009 11:34
Umlaut Problem	nokieone	PHP Tipps 2009	7	16.10.2009 19:30
Problem mit Basedir in PhP	cmuch05	Datenbanken	9	08.01.2009 14:17
[Erledigt] Problem: PHP Selbe Datei mehr als 1 Mal	soulan	PHP Tipps 2008	13	28.11.2008 22:51
Problem Upload mehrere Dateien und schreiben in DB	Lapje	PHP Tipps 2008	1	22.10.2008 13:12
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
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
[JS] Problem mit Formular aus anderem Fenster	kiffy	HTML, Usability und Barrierefreiheit	1	13.04.2006 08:53
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 Verbindung von anderem Server		Datenbanken	2	08.11.2005 13:43
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34


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

12.05.2011, 10:58
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	Es liegt an folgender Zeile: PHP-Code: `filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#609ac9',GradientType=0 ); /* IE6-9 */` Diese interpretiert der IE8 anders (IE9 habe ich gerade nicht drauf, sollte aber das Gleiche sein). Wenn du sie weglässt, hast du das gewünschte Ergebnis. Du müsstest nun testen ob dies bei IE5.5 < auch zutrifft. Falls nicht steck eine Klausel mit hienein dass diese Zeile nur für bestimmte IE Versionen gilt (IF Gerammel).

12.05.2011, 15:01
BJ1995 Benutzer Registriert seit: 30.01.2011 Beiträge: 38 PHP-Kenntnisse: Anfänger	Danke dreamcatcher So klappts: PHP-Code: `<!--[if lt IE 6]><!-->filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#609ac9',GradientType=0 ); /* IE6-9 */<!--<![endif]-->`

20.05.2011, 10:44
lstegelitz Erfahrener Benutzer Registriert seit: 07.09.2009 Beiträge: 4.005 PHP-Kenntnisse: Fortgeschritten	Hach, ich wische noch die Tränen aus den Augenwinkeln... IE 6 und "moderner" Browser, köstlich __________________ Über 90% aller Gewaltverbrechen passieren innerhalb von 24 Stunden nach dem Konsum von Brot.

20.05.2011, 10:58
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	und der 5.5er erst - der hat ja nicht mal das w3c Boxmodell ^^ und vor allem - wer in der "realen" Welt (also nicht hinter verschlossenen Unternehmens(netzwerk)toren) setzt diese Urgroßväter von vor mehr als 10 Jahren noch ein .... __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

21.05.2011, 19:35
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Der 1er ist dann die Königsklasse. Es gilt die Schulnotenversionierung __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --