• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

html/css - IE Darstellungsprobleme

B

befubo

Mitglied
Hallo zusammen
Ich hab schon länger nicht mehr wirklich aktiv in html und css gearbeitet und hoffe, ihr könnt mir mit einem IE-Problem helfen:

Ich hab folgenden Code:
HTML: 
<html><head><title>Atlantis - Home</title><link rel="shortcut icon" type="image/x-icon" href="img/icon.ico" /><link rel="stylesheet" type="text/css" href="styles/style.css"></head><body>
<script type="text/javascript">    function imageLine()    {        var    checkInterval = null,            imageLineInterval = null,            currentImage = -1;        /*            Variablen die man in            verschiedenen Funktionen benötigt        */        images = new Array(                'img/1.jpg',                'img/2.jpg',                'img/3.jpg',                'img/4.jpg',                'img/5.jpg',                'img/6.jpg'                // Diese Bilder sind die standard Windows XP Bilder            );        // Alle Bilder die angezeigt werden sollen                loadingImages = new Array();        // Dieses Array enthält später alle Objekte                this.run = function()        {            checkInterval = window.setInterval('this.checkIfLoaded();', 100);            // Alle 100 Millisekunden prüfen ob alle Bilder geladen sind            for(i = 0;i < images.length;i++)            {                image = images[i];                loadingImages.push(new Image);                loadingImages[i].src = image;            }            /*                Alle Images in dem Array einzeln Durchgehen.                Das Array für die Objekte mit den Objekten füllen.                Dem neuen Objekt die Url des momentanen Bildes geben.            */        }                this.checkIfLoaded = function()        {            allLoaded = true;            for(i = 0;i < loadingImages.length;i++)            {                loadingImage = loadingImages[i];                if(!loadingImage.complete)                    allLoaded = false;            }            /*                Alle Objekte durchgehen.                Prüfen ob das aktuelle Objekt / Bild geladen ist.                Falls nicht dann die Variable zur Prüfung auf false setzen            */            if(allLoaded)            {                // Wenn alle Objekte / Bilder geladen sind
                // Die Interval für das Prüfen löschen                window.clearInterval(checkInterval);                // Das erste Bild anzeigen                this.startImageLine();                // Die Funktion für das Bilder wechseln alle 10 Sekunden ausführen                window.setInterval('this.startImageLine();', 10000);            }        }                this.startImageLine = function()        {            this.showImage();            // Bild anzeigen            if(currentImage == (loadingImages.length - 1))                currentImage = 0;            else                currentImage += 1;            /*                Aktuelles Bild um eins hochzählen.                Sollte das momentane Bild genau so groß sein,                wie das Array dann wieder beim ersten anfangen.            */                        element = document.getElementById('imageline');            // Element für die Bilderanzeige            element.style.height = loadingImages[currentImage].height + 'px';            element.style.width = loadingImages[currentImage].width + 'px';            // Dem Element die Breite und Höhe des momentanen Bildes geben            element.style.backgroundImage = 'url(' + loadingImages[currentImage].src + ')';            // Dem Element das aktuelle Bild als Hintergrundbild setzen                        window.setTimeout('this.hideImage();', 9500);            // Das Bild in 9,5 Sekunden ausblenden        }                this.hideImage = function()        {            element = document.getElementById('imageline');            for(i = 0;i <= 100;i++)                window.setTimeout('element.style.filter = "Alpha(opacity=' + (100 - i) + ')"; element.style.MozOpacity = ' + (1 - i / 100) + '; element.style.opacity = ' + (1 - i / 100) + ';', i * 5);            // Von 0 bis 100 (Prozent)            // Das i * 5 dient dazu, dass das Ausblenden nicht zu schnell geht        }                this.showImage = function()        {            element = document.getElementById('imageline');            for(i = 0;i <= 100;i++)                window.setTimeout('element.style.filter = "Alpha(opacity=' + i + ')"; element.style.MozOpacity = ' + i / 100 + '; element.style.opacity = ' +  i / 100 + ';', i * 5);            // Hier das selbe wie bei hideImage        }                this.run();    }        window.onload = function()    {        imageLine();    }</script>
<div id="head"></div>
<div id="content"><img id="imageline" border="0">


<a href="http://google.ch" class="link1"></a><div id="border_1"></div><a href="http://google.ch" class="link2"></a><div id="border_2"></div><a href="http://google.ch" class="link3"></a><div id="border_3"></div><a href="http://google.ch" class="link4"></a><div id="border_4"></div><a href="http://google.ch" class="link5"></a><div id="border_5"></div><a href="http://google.ch" class="link6"></a><div id="border_6"></div><a href="http://google.ch" class="link7"></a>



</div></body></html>

Meine CSS sieht so aus:
Code: 
body {    font-family:Agency fb,Arial,Helvetica;
    font-size: 1.2em;
    color: #ffffff;
    background-color: #000000;
    margin: 0px;
}


#head {
    position: absolute;
    width: 990px;
    height: 200px;
    left: 50%;
    margin-left: -490px;
}


#head2 {
    position: absolute;
    border: 1px solid white;
    top: 250px;
    width: 990px;
    height: 40px;
    left: 50%;
    margin-left: -490px;
}


#content {
    background-color: #999999;
    position: absolute;
    top: 250px;
    width: 990px;
    height: 500px;
    left: 50%;
    margin-left: -490px;
    z-index: 1;
}


.link1 {
    position: absolute;
    width: 138px;
    height: 500px;
    z-index: 4;
    display:block;
    background: url(img/trans1.png);
}


.link1:hover {
   background-image: url(img/white1.png);
}


.link2 {
    position: absolute;
    left: 142px;
    width: 138px;
    height: 500px;
    z-index: 4;
    display:block;
    background: url(img/trans2.png);
}


.link2:hover {
   background-image: url(img/white2.png);
}


.link3 {
    position: absolute;
    left: 284px;
    width: 138px;
    height: 500px;
    z-index: 4;
    display:block;
    background: url(img/trans3.png);
}


.link3:hover {
   background-image: url(img/white3.png);
}


.link4 {
    position: absolute;
    left: 426px;
    width: 138px;
    height: 500px;
    z-index: 4;
    display:block;
    background: url(img/trans4.png);
}


.link4:hover {
   background-image: url(img/white4.png);
}


.link5 {
    position: absolute;
    left: 568px;
    width: 138px;
    height: 500px;
    z-index: 4;
    display:block;
    background: url(img/trans5.png);
}


.link5:hover {
   background-image: url(img/white5.png);
}


.link6 {
    position: absolute;
    left: 710px;
    width: 138px;
    height: 500px;
    z-index: 4;
    display:block;
    background: url(img/trans6.png);
}


.link6:hover {
   background-image: url(img/white6.png);
}


.link7 {
    position: absolute;
    left: 852px;
    width: 138px;
    height: 500px;
    z-index: 4;
    display:block;
    background: url(img/trans7.png);
}


.link7:hover {
   background-image: url(img/white7.png);
}


#border_1 {
    position: absolute;
    background-color: #ffffff;
    left: 138px;
    width: 4px;
    height: 500px;
}


#border_2 {
    position: absolute;
    background-color: #ffffff;
    left: 280px;
    width: 4px;
    height: 500px;
}


#border_3 {
    position: absolute;
    background-color: #ffffff;
    left: 422px;
    width: 4px;
    height: 500px;
}


#border_4 {
    position: absolute;
    background-color: #ffffff;
    left: 564px;
    width: 4px;
    height: 500px;
}


#border_5 {
    position: absolute;
    background-color: #ffffff;
    left: 706px;
    width: 4px;
    height: 500px;
}


#border_6 {
    position: absolute;
    background-color: #ffffff;
    left: 848px;
    width: 4px;
    height: 500px;
}

Im Crome wird mir die Seite Richtig angezeigt (Firefox kann ich grad nicht testen, aber ich vermute stark, dass es da auch funzt) und zwar so:
Screen - Richtig

Im Internet Explorer schiebt er mir alles einfach runter:
Screen - Falsch

Ich weiss ja, dass der IE immer mehr zickt als die anderen, aber ich weiss gerade keinen Rat, was ich tun soll...
Danke für eure Zeit und lg
befubo

PS: Hilfe, im "HTML-Fenster" oben stellt er den Code nicht schön dar... Ich hoffe man kann das fixen -.-
 
Werbung:
Hallo,

ich habe mir den Quellcode jetzt nicht zusammen gebastelt. Ein Link wäre schöner gewesen.

Mir fehlt in jedem Fall ein Doctype. Das in einigen Browsern die Seite wie von dir erwartet angezeigt wird ist ohne Doctype eine reine Glückssache und hat nix mit dem IE zu tun.

Ich weiss ja, dass der IE immer mehr zickt als die anderen...
Zum Vergrößern anklicken....

Da bist du falsch informiert.

Gruss

MrMurphy
 
Mir fehlt in jedem Fall ein Doctype
Zum Vergrößern anklicken....
D'oh.... Ich wusste doch ich hab was vergessen :D Schau ich mir dann sogleich mal an...
Wobei ich es vermutlich sowieso anders lösen werde wie es jetzt ist, aber trotzdem gute Tipp, danke.
Da bist du falsch informiert.
Zum Vergrößern anklicken....
Na ja, ich nenn das weniger "informiert"... Ich merke einfach, dass sobald ich was mit css oder anderen Gestaltungselementen machen möchte, ich gleich eine Weiche einbauen kann, damit es im IE auch richtig dargestellt wird. Vielleicht bin ich ja anspruchsvoll, aber ich finde das echt schade, dass die Browserhersteller sich nicht auf einen gewissen Standart einigen können. Aber was solls ^^
Danke für den Tipp
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben