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:
Meine CSS sieht so aus:
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 -.-
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 -.-