✔ Problem mit IE

Status
Nicht offen für weitere Antworten.
T

timo1992

Mitglied
Ich habe schon alles, was in meiner Macht steht versucht, um das Problem selbst zu lösen, aber ich bekomme es einfach nicht hin und habe hier im Forum auch nichts passendes gefunden.
Es geht um folgendes:
Ich habe ein Online Portfolio gecodet (klick!)
In FF funktioniert es einwandfrei, doch im IE überhaupt nicht, da passt überhaupt nichts.
Woran kann es liegen, bzw. liegt es.
Hier meine CSS&HTML:
html {
min-height : 100%;
}
body {
background-image : url(img/bg.png);
padding : 120px;
margin-top : -140px;
}
li {
list-style : none;
}
center {
margin-top : 30px;
margin-left : 15px;
}
.container {
margin-top : 0 auto;
width : 800px;
height : 850px;
}
table {
margin-top : 18px;
margin-left : 18px;
}
.lastwork {
margin-right : 50px;
float : top;
width : 215px;
}
h1 {
font : bold 13px Arial, serif;
color : white;
margin-left : 117px;
margin-top : 340px;
}
h2 {
font : 11px Arial, serif;
color : white;
margin-left : 117px;
}
h3 {
font : bold 13px Arial, serif;
color : white;
margin-left : 117px;
margin-top : 55px;
}
h4 {
font : 11px Arial, serif;
color : black;
margin-top : 80px;
}
.navigation {
height : 77px;
margin-top : -534px;
margin-left : 95px;
}
.navigation2 {
height : 20px;
margin-left : 280px;
margin-top : 508px;
}
.language {
height : 11px;
margin-top : -815px;
margin-left : 670px;
}
.main {
background : url(img/contentbg2.jpg) repeat-y;
height : 850px;
}
.infobox {
margin-left : 482px;
margin-top : -50px;
}

.content {
float : center;
width : 400px;
height : 406px;
}


a:hover {
color : #ffffff;
}
Zum Vergrößern anklicken....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Anfieldboys Online Portfolio | Home</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>

<div class="top">


<div class="container">


<div class="main">

<div class="content">
<li>


<table>
<tr>
<td>



<h1> <br>28. April 2008</h1>
<h2>Da die Seite bis jetzt noch etwas leer war, habe ich die Seite nun etwas ,,aufgepeppt''. Endlich kann man auf die Gallerie zugreifen, auch der bisher leere Stuff Bereich wurde geupdatet, dort findet ihr ab jetzt ein paar nette Tutorials und schicke Texturen/Brushes fuer Photoshop.
<br>Greetz me</h2>

<h3>25. April 2008</h3>
<h2>Hey, Endlich habe Ich es geschafft die Seite online zu bringen. Nachdem das Design schon mehrere Monate in der Versenkung meines Computers verschwunden ist, habe ich es doch mit sehr viel Unterstuetzung von Timo geschafft, es endlich zu coden, und somit auch online zubringen. Grossartige Features bringt die Seite jedoch nicht mit, ausser einer kleinen Gallerie und einem Downloadbereich ist die Page ziemlich schlicht gehalten.</h2>

</td>
</tr>


</li>
</div>

<div class="infobox">
<img onMouseover=src="img/lastwork_on.png" onMouseout=src="img/lastwork_on.png" src="img/lastwork_on.png" border="0" alt="lastwork" />


<li><a href="img/sigs/alexander.png"><img onMouseover=src="img/fullsize_on.png" onMouseout=src="img/fullsize_off.png" src="img/fullsize_off.png" border="0" alt="fullsize" /> </a></li>

<h4>Am 6.Februar habe ich diese Signatur erstellt,<br>um bei einem Grafikbattle erfolgreich<br>teilzunehmen.<br>Thema war damals American Football.<br>

<br>Groesse: 400x145
<br>Image Size: 89.2 KB
<br>Erstelldatum: 7.Februar 2008</h4>



</div>

<div class="lastwork">
<li>

</li>
</div>

<div class="sidenav">
<li>
</li>

</div>

<div class="navigation"><li>

<a href="home_ger.html"><img onMouseover=src="img/navi/home_on.png" onMouseout=src="img/navi/home.png" src="img/navi/home.png" border="0" /></a><a href="gallery_ger.html"><img onMouseover=src="img/navi/gallery_on.png" onMouseout=src="img/navi/gallery.png" src="img/navi/gallery.png" border="0" /></a><a href="stuff_ger.html"><img onMouseover=src="img/navi/stuff_on.png" onMouseout=src="img/navi/stuff.png" src="img/navi/stuff.png" border="0" /></a><a href="links_ger.html"><img onMouseover=src="img/navi/links_on.png" onMouseout=src="img/navi/links.png" src="img/navi/links.png" border="0" /></a><a href="contact_ger.html"><img onMouseover=src="img/navi/contact_on.png" onMouseout=src="img/navi/contact.png" src="img/navi/contact.png" border="0" /></a>
</li>

</div>

<div class="navigation2"><li>

<a href="home_ger.html"><img onMouseover=src="img/bnavi/home_off.png" onMouseout=src="img/bnavi/home_off.png" src="img/bnavi/home_off.png" border="0" /></a><a href="gallery_ger.html"><img onMouseover=src="img/bnavi/gallery_off.png" onMouseout=src="img/bnavi/gallery_off.png" src="img/bnavi/gallery_off.png" border="0" /></a><a href="stuff_ger.html"><img onMouseover=src="img/bnavi/stuff_off.png" onMouseout=src="img/bnavi/stuff_off.png" src="img/bnavi/stuff_off.png" border="0" /></a><a href="links_ger.html"><img onMouseover=src="img/bnavi/links_off.png" onMouseout=src="img/bnavi/links_off.png" src="img/bnavi/links_off.png" border="0" /></a><a href="contact_ger.html"><img onMouseover=src="img/bnavi/contact_off.png" onMouseout=src="img/bnavi/contact_off.png" src="img/bnavi/contact_off.png" border="0" /></a>
</li>

</div>

<div class="language"><li>

<a href="home_eng.html"><img onMouseover=src="img/choseenglish_on.png" onMouseout=src="img/choseenglish_off.png" src="img/choseenglish_off.png" border="0" /></a> <img onMouseover=src="img/chosegerman_on.png" onMouseout=src="img/chosegerman_on.png" src="img/chosegerman_on.png" border="0" />
</li>

</div>

</div>






</body>
</html>
Zum Vergrößern anklicken....
 
Hi,

entgegen deinem gezeigten HTML-Code fehlt dem Dokument die Doctype-Deklaration, was dazu führt, dass die Browser in den "Quirksmode" schalten, und in diesem Darstellungsmodus interpretiert der IE das CSS-Boxmodell fehlerhaft bis garnicht, und missachtet viele Webstandards.

Außerdem solltest du nach der Dokumenttyp-Angabe das öffnende <html>-Tag angeben.

Desweiteren fehlen den li-Elementen das übergeordnete ul- oder ol-Element, das eine Liste erst auszeichnet.

Weitere Fehlermeldungen zum HTML-Code kannst du dem w3c-Validatorcheck deiner Seite entnehmen.

Vielleicht hilft dir das weiter.
 
Danke für die schnelle Antwort, aber könntest du oder jemand anderes das noch etwas genauer erklären, ich bin nämlich noch Anfänger.

Ich dachte, ich habe den richtigen Doctype?!
Wie müsste der denn richtig aussehen?

Wo soll ich den <html> hinsetzten?

Ist es wichtig ul und ol zu benutzen?
Könntest du/ihr ein Beispiel anhand meiner HTML zeigen, wie es richtig sein müsste?

Und eine Frage noch:
Wieso zeigt es FF richtig an und IE nicht?
 
ich möchte jetzt nur mal fragen ob das mit der verzögerung vom hover geplant oder ein versehen ist,denn beim ersten hovern dauert es ca. 2 sek.
 
Ich kann, unabhängig von der vorgerückten späten Stunde, echt nicht nachvollziehen, wie es auf deinem Webspace und hier im Thread zu so unterschiedlichen Quellcodes kommen kann, denn wie schon beim HTML-Code, ist das Stylesheet auf dem Server mit dem hier veröffentlichten CSS-Code auch nicht deckungsgleich. Bei diversen Eigenschaftswerten fehlt nämlich die Einheitenangabe (px), was im standardkonformen Modus zu drastischen Darstellungsfehlern in den Browsern führt. Seltsamerweise fehlt in deinem geposteten CSS-Code keine einzige dieser Einheitenangaben. Wirklich sehr seltsam ...

Und weiter im Text: die von dir gesetzten float-Werte
Code: 
float : top;
float : center;
gibt es überhaupt nicht, sondern:

  • left
  • right
  • none
  • inherit

Und was bezweckst du mit dieser widersprüchlichen Angabe?

Code: 
body {
...
padding : 120px;
margin-top : -140px;
}
Erst gibst du dem Element einen umlaufenden Innenabstand von 120px, um es dann um 140px nach oben zu verschieben, womit es um 20 Pixel in den nicht-sichtbaren Bereichs des Browserfensters verschwindet.

Das ist mir alles irgendwie eine Nummer zu hoch...
 
Wenn ich mir das Hintergrundbild http://anfieldboy.an.ohost.de/index/img/contentbg2.jpg betrachte, steige ich auch dahinter, weshalb dein "Layoutkonzept" verstärkt auf der margin-Eigenschaft basiert, deren margin-top-Werte zunehmend größer werden, und manche sogar extrem "negativ" ausfallen, um die Elemente im unteren Textfluss wieder in die oberen Regionen des Hintergrundbildes zu befördern.

Mein Vorschlag: wenn hier eh schon ein derartig fixes Layout vorliegt, solltest du die einzelnen Seitenbereiche mit absoluten Positionsangaben an ihrem angedachten Platz positionieren, denn nur so erzielst du in den unterschiedlichen Browsermodellen eine einheitliche Seitendarstellung.

Neben dem IE (6 + 7) zeigen nämlich auch Opera und Safari die Seite absolut verschoben an, und jeder auf seine ganz individuelle Weise.
 
Danke für deine Hilfe.
Wie positioniere ich es denn mit absoluten Werten?
Wie muss ich die float-center Tags ändern?
Gibt es vllt. noch eine ganz andere Lösung, wie ich es besser code
Grundkenntnisse habe ich.
Entschuldigung, aber ich bin noch ein Anfänger.
 
Zuletzt bearbeitet:

Welche Werte dir für die float-Eigenschaft zur Verfügung stehen, hab ich dir ja aufgelistet. Ob du sie derzeit aber überhaupt benötigst, steht auf einem anderen Blatt.

Was könntest du anders machen?

Beispielsweise erstmal das große Hintergrundbild in kleinere Teile aufteilen (= slicen), und diese als Hintergrundbilder für einzelne DIV-Blöcke verwenden, und so das Layout mosaikmäßig zusammensetzen.

Es gibt aber bekanntermaßen immer viele Wege, die nach Rom führen, und bevor du dich für einen entscheidest, solltest du dich vielleicht mit der CSS-Technik etwas näher beschäftigen, und erstmal mit etwas leichteren Layoutkonzepten üben, um dann "step-by-step" Erfahrungen und Kenntnisse zu sammeln.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück