der IE zeigt die Seite falsch an

[Katura]

Hallo,

Ich habe vor kurzem zum ersten Mal eine Seite programmiert. Das ist eine Zusammensetzung aus CSS, HTML und PHP.
Mein Firefox zeigt die Seite perfekt an nur der IE macht nicht das was ich will.

Ich habe die Seite auch vom Validator (CSS) prüfen lassen und er zeigt mir genau zwei Fehler an, die was mit der Transparenz zu tun haben, ergo müsste die Seite doch auch vom IE richtig angezeigt werden oder nicht?

Der Validator für HTML zeigt mir hingegen 23 Fehler an, die ich ehrlich gesagt nicht ganz verstehe, da ich daran keinen Fehler erkennen kann.


Daher bitte ich um eure Hilfe :)



// edit: Quelltext

body {
  background-color: #999999;
  margin: 0;
  padding: 0;
  background-image:url("bod.jpg");
  background-repeat:repeat-x;  
}

#top {
  position:absolute;
  margin: 0;
  padding: 0;
  top: 0%;
  height:130px;
  left: 50%;
  width: 812px;
  margin-left: -406px;
  background-image:url("DSC340a.jpg");
  background-repeat: repeat-x; 
  z-index: 1;
}
#topImg {
  position:absolute;
  margin: 0;
  padding: 0;
  width: 270px;
  right: 0;
  top: 0%;
  bottom: 0%;
  background-image:url("log.jpg");
  background-repeat:no-repeat; 
  background-color: #FFFFFF;
  opacity: 0.6;
  z-index: 2; 


}
#link {
  position:absolute;
  top: 130px;
  left: 50%;
  width: 812px;
  margin-left: -406px;
  height:29px;
  background-image:url("link.jpg");
  background-repeat:repeat-x;  
}
#link a  {
  float: left;
  color: #FFFFFF;
  line-height: 29px;
  padding-left: 15px;
  padding-right: 15px;
  text-decoration:none;
  font-family: "Times New Roman", serif; 




}
#link a:hover  {
  color: #4040FF;

}
#middi {
  position:absolute;
  top: 173px;
  left: 50%;
  width: 812px;
  margin-left: -406px;
  opacity: 0.8;
  min-height:60%;
}

#middiLeft {
  position:absolute;
  top: 0%;
  left: 0%;
  right: 290px;
  bottom: 0%;
  background-image:url("middi.jpg");
  background-repeat:repeat-x;  
  background-color: #F3F3F3;
}
span.hint {
  position:absolute;
  top: 0%;
  left: 0%;
  right: 0%;
  bottom: 0%;
  background-image:url("DSC343.JPG");
  background-repeat:no-repeat; 
  background-position: center;
  

}
#middiRight {
  position:absolute;
  top: 0%;
  width: 270px;
  right: 0%;
  bottom: 0%;
  background-image:url("middi.jpg");
  background-repeat:repeat-x;  
  background-color: #F3F3F3;
}
p {
  padding-left: 5%;
  padding-right: 5%;
  color: #646464;
  font: normal 0.8em sans-serif;  

}
#middiLeft h1 {
  padding-left: 5%;
  padding-top: 5%;
  padding-right: 5%;
  color: #646464;
  font: bold 1.1em sans-serif;  

}
#middiRight h1 {
  padding-left: 5%;
  padding-top: 10%;
  padding-right: 5%;
  color: #646464;
  font: bold 1.0em sans-serif;  

}
ul {
  padding-left: 10%;
  padding-right: 5%;
  color: #646464;
  font: normal 0.8em sans-serif;  

}
span.foo {
  position: absolute;
  bottom: 0;
  height: 5px;
  left: 0%;
  right: 0%;
  background-image:url("foo.jpg");
  background-repeat:repeat-x;  
}

 

[ingoS]

Also, der HTML-Validator zeigt dir doch schon ganz deutlich, was verkehrt ist:
Du schreibst

</div

statt

</div>

Du öffnest <h1>, schließt aber mit </h2>:

<h1>Headline </h2>

Noch ein Flüchtigkeitsfehler:

<span class="foo"><span>

Da fehlt auch ein "/".
Die restlichen Fehler ergeben sich aus diesen Fehlern.
Ob das alles jetzt die Darstellungsfehler im IE bewirkt oder nicht, weiß ich nicht, aber du solltest sie auf alle Fälle korrigieren, bevor man in andere Richtungen spekuliert.

 

[Katura]

hey wow cool danke, jetzt zeigt er sie richtig an . der beweis meiner eigenen schusseligkeit^^.

 

[ingoS]

Manchmal sieht man halt den Wald vor lauter Bäumen nicht mehr. ;)
Ich habe das Thema mal verschoben, denn der Websitecheck dient der Bewertung fertiger Websites.