css und internetexplorer - Totalverweigerung!

[Kasimir]

Liebe Gemeinde,

bin in die Untiefen des Layoutens mittels CSS eingetaucht, also Neuling auf dem Gebiet. Wollte meine private Homepage von Tabellen- auf CSS-Layout umstellen. Das ist auch soweit ganz erfreulich gelungen, wenn nur der Internet-Explorer nicht wäre. Während Firefox und Safari alles schön darstellen, gibt der Explorer lediglich eine Definition - nämlich den Mousover des Images - meiner externen CSS-Datei wieder.
Vielleicht ist das Problem ja trivial und ich bin meinem Anfängertum zum Opfer gefallen, vielleicht aber auch nicht...

Wer mal schauen möchte:
Link zu der Seite: http://www.korrell.eu
Link zu der Testseite die noch mit Explorer funktionierte: http://www.korrell.eu/testcss/testcss
Die CSS der letzteren unterscheidet sich geringfügig von der ersten, poste deshalb beide:

testcss:

body {  
 font-family: Arial, Helvetica, sans-serif;  
}  
  
td {  
 font-family: Arial, Helvetica, sans-serif;  
}  
  
th {  
 font-family: Arial, Helvetica, sans-serif;  
}  
  
div#container  
 {  
  margin: 1em auto;  
  width: 700px;  
  height: 450px;  
  text-align: left;  
  background-color: red;  
  border: 1px solid black;  
 }  
div#header  
 {  
  height: 45px;  
  background-color: fuchsia;  
 }  
div#linksmutter  
 { float: left;  
  margin-left: 20px;  
  width: 180px;  
  hight: 240px;  
  }  
.links  
 {  
  float: left;  
  width: 180px;  
  height: 40px;  
  background-color: yellow;  
 }  
.links2  
 {  
  float: left;  
  width: 180px;  
  height: 40px;  
  background-color: green;  
 }  
  
  
div#rechtsmutter  
 {   float: right;  
  margin-right: 20px;  
  width: 180px;  
  hight: 240px;  
  }  
.rechts  
 {  
  float: right;  
  width: 180px;  
  height: 40px;  
  background-color: yellow;  
 }  
.rechts2  
 {  
  float: right;  
  width: 180px;  
  height: 40px;  
  background-color: green;  
 }  
  
div#mittemutter  
 {   float: left;  
  width: 280px;  
  padding-left: 10px;  
  padding-right: 10px;  
  text-align: center;  
  vertical-align: middle;  
  background-color: salmon;  
  }  
.mitteunten  
 {   float: left;  
  width: 280px;  
  padding-top: 10px;  
  padding-left: 10px;  
  padding-right: 10px;  
  text-align: center;  
  vertical-align: middle;  
  background-color: coral;  
  }  
#footer  
 {  
  clear: both;  
  height: 20px;  
  width: 700px;  
  background-color: lime;  
 }  

und der Patient (korrell.eu):

@charset "ISO-8859-1";  
  
body {  
 font-family: Arial, Helvetica, sans-serif;  
}  
  
td {  
 font-family: Arial, Helvetica, sans-serif;  
}  
  
th {  
 font-family: Arial, Helvetica, sans-serif;  
}  
  
  
  
.uberschrift {  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 font-size: medium;  
 font-style: normal;  
 line-height: normal;  
 font-weight: bold;  
 font-variant: small-caps;  
 text-transform: none;  
 color: #666666;  
}  
.menue {  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 font-size: x-small;  
 font-style: normal;  
 line-height: normal;  
 font-weight: normal;  
 font-variant: normal;  
 color: #999999;  
 text-decoration: none;  
}  
.bildunterschrift {  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 font-size: xx-small;  
 font-style: normal;  
 font-weight: normal;  
 font-variant: normal;  
 color: #666666;  
 text-indent:1em;  
}  
.text_black {  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 font-style: normal;  
 text-decoration: none;  
 color: #000000;  
}  
.link {  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 font-style: normal;  
 text-decoration: none;  
 color: #999999;  
}  
.linkzelle {  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 cursor: hand;  
}  
  
a:link {  
 color:black;  
 text-decoration:none;  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
}  
a:visited {  
 color:black;  
 text-decoration:none;  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
}  
a:focus {  
 color:black;  
 text-decoration:none;  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
}  
a:hover {  
 color:#666666;  
 text-decoration:none;  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
}  
a:active {  
 color:black;  
 text-decoration:none;  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
}  
  
a.blocks  
{  
display: block;  
  
border-width:2px;  
border-style:solid;  
border-color:#ffffff;  
padding-top: 3px;  
padding-bottom: 3px;  
padding-right: 1px;  
padding-left: 1px;  
}  
  
a.blocks:hover  
{  
border-style:solid;  
border-color:#228b22;  
cursor: hand;  
}  
  
div#container  
 {  
  float: left;  
  margin: 1em auto;  
  width: 900px;  
  height: 450px;  
  text-align: left;  
  background-color: white;  
 }  
div#header  
 {  
  height: 10px;  
  background-color: white;  
 }  
div#linksmutter  
 { float: left;  
  margin-left: 20px;  
  width: 180px;  
  hight: 240px;  
  }  
.links  
 {  
  float: left;  
  width: 180px;  
  height: 40px;  
  background-color: white;  
 }  
  
div#rechtsmutter  
 {   float: right;  
  margin-right: 20px;  
  width: 180px;  
  hight: 240px;  
  }  
.rechts  
 {  
  float: right;  
  width: 180px;  
  height: 40px;  
  background-color: white;  
 }  
  
div#mittemutter  
 {   float: left;  
  width: 280px;  
  padding-left: 60px;  
  padding-right: 60px;  
  padding-top: 60px;  
  text-align: center;  
  vertical-align: middle;  
  background-color: white;  
  }  
.mitteunten  
 {   float: left;  
  width: 280px;  
  padding-top: 10px;  
  padding-left: 60px;  
  padding-right: 60px;  
  text-align: center;  
  vertical-align: middle;  
  background-color: white;  
  }  
#footer  
 {  
  clear: both;  
  height: 20px;  
  width: 900px;  
  background-color: white;  
 }

Den Seiten-head hab ich schon durchforstet und konnte nichts finden:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<title>||| home of ************ |||</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
<meta http-equiv="Content-Script-Type" content="text/javascript">  
<meta http-equiv="Content-Style-Type" content="text/css">  
<link href="homepage_styles.css" rel="stylesheet" type="text/css">  
  
  
<link rel="shortcut icon" href="http://www.korrell.eu/favicon.gif" type="image/x-icon">  
<link rel="icon" href="http://www.korrell.eu/favicon.gif" type="image/x-icon">  
</head>  
  
<body>  

Was mich bei der Suche nach einer Problemlösung irritiert hat: man liest ja genug von Problemen mit dem Internetexplorer, aber über eine solch fundamentale Fehlfunktion hab ich nichts gefunden. Vielleicht ist es ja wirklich nur der berühmte blinde Fleck, der mir den Blick verstellt.
Liebe Grüße, Kasimir

[Beat]

Der CSS:valigator meint

Ergebnisse des CSS-Validators file://localhost/TextArea (CSS level 2.1)

Entschuldigung! Es wurden die folgenden Fehler gefunden (4)
URI : file://localhost/TextArea

60  .linkzelle  Ungültige Nummer : cursor hand ist kein cursor-Wert : hand
106  a.blocks:hover  Ungültige Nummer : cursor hand ist kein cursor-Wert : hand
127  div#linksmutter  Die Eigenschaft hight existiert nicht : 240px
141  div#rechtsmutter  Die Eigenschaft hight existiert nicht : 240px

mfg Beat

[Kasimir]

ich habs mal rausgenommen, aber das war nicht das Problem. Explorer bockt weiter...So siehts - nach wie vor - bei mir aus: hässlich!

Aber danke für die Mühe!

[mbr]

Hallo Kasimir

ich habs mal rausgenommen, aber das war nicht das Problem. Explorer bockt weiter...

Wieso rausgenommen? nimm doch lieber ein "e" rein (hight => height)

zum ersten "Fehler": wenn du auf den IE < 6 keine Rücksicht nehmen mußt - was ich annehme, kannst du als Style für den cursor einfach "pointer" statt "hand" nehmen. mehr Infos

Liebe Grüße mbr

[Kasimir]

Liebe(r) mbr,

vielen Dank für den Link, werde es mir für die Zukunft hinter die Ohren schreiben. Auf IE<6 muss ich aber in gewisser Weise doch Rücksicht nehmen, weil ich ja selbst nur 5.2 besitze...
Und die Höhenangabe hatte scheinbar keinen wirklichen Funktionszweck, jedenfalls hat sich nix geändert seit ich's rausgenommen habe. Bin eben echt noch ein Lehrnender (Englisch eingeschlossen), von tieferem Verständnis kann noch nicht die Rede sein...

Nun gut: das EIGENTLICHE PROBLEM, dass im IE nämlich die externe CSS weitgehend ignoriert wird, ist damit leider noch immer nicht gelöst, ja noch nicht mal berührt. Hat denn niemand eine Idee woran das liegen kann oder auch mal dieses Problem gehabt (Selbsthilfegruppe...)? Vielleicht ist das ja auch für IE>=6 gar nicht der Fall, kann ich ja leider nicht selbst überprüfen...Mein IE 5.2. jedenfalls...

[Harlequin]

Yerf!

Nun gut: das EIGENTLICHE PROBLEM, dass im IE nämlich die externe CSS weitgehend ignoriert wird, ist damit leider noch immer nicht gelöst, ja noch nicht mal berührt. Hat denn niemand eine Idee woran das liegen kann oder auch mal dieses Problem gehabt (Selbsthilfegruppe...)? Vielleicht ist das ja auch für IE>=6 gar nicht der Fall, kann ich ja leider nicht selbst überprüfen...Mein IE 5.2. jedenfalls...

Mit meinem Win IE6 konnte ich das Verhalten nicht nachstellen, aber der Interessante Punkt kam erst jetzt... IE5.2, das ist doch die Mac-Version (Tasman), oder?

Was mir desweiteren noch als Unterschied zwischen den 2 Files auf anhieb auffällt ist die @charset-Angabe. Möglicherweise kommt der Mac-IE damit nicht klar.

Gruß,

Harlequin

[Kasimir]

Richtig, 5.2. für Mac. Habe jetzt mal ne Rundmail geschrieben an den Bekanntenkreis. Die sollen mal mit Ihren Browsern schauen. Vielleicht ist ja mein Explorer der einzige der spinnt. Dann kann ich das Problem getrost ignorieren.

"@charset-Angabe" hab ich wieder rausgenommen, keine Änderung feststellbar. War ein Vorschlag aus einem anderen Forum, macht bei mir keinen Unterschied.

[Harlequin]

Yerf!

Richtig, 5.2. für Mac. Habe jetzt mal ne Rundmail geschrieben an den Bekanntenkreis. Die sollen mal mit Ihren Browsern schauen. Vielleicht ist ja mein Explorer der einzige der spinnt. Dann kann ich das Problem getrost ignorieren.

Zumindest sind die Windows und die Mac Version nicht miteinander vergleichbar, das sind eigentlich 2 komplett verschiedene Browser.

"@charset-Angabe" hab ich wieder rausgenommen, keine Änderung feststellbar. War ein Vorschlag aus einem anderen Forum, macht bei mir keinen Unterschied.

Hm, war nur so ein Verdacht. Die älteren Browser stolpern gerne über unbekannte Sachen im CSS und brechen dann die Verarbeitung komplett ab.

Gruß,

Harlequin

[Kasimir]

Hallo Harlequin, alle Helfer,

scheint so zu sein, dass IE6 die Seite richtig darstellt, werde mich also erstmal nicht weiter um die Sache kümmern. Mein Buggy-IE5.2-for-Mac kann machen was er will und weiter in der Schublade bleiben. Ist eigentlich ja gar kein Browser...Mysteriös bleibts aber doch, weil die Testseite, die meiner Einschätzung nach im groben die gleichen CSS-Definitionen hat wie die "richtige", korrekt dargestellt wird, während die "richtige" nicht funktioniert (in IE5.2.). Wir werden es nie erfahren...

[Ingo Turski]

Hi,

Richtig, 5.2. für Mac.

mal ehrlich: den hast Du doch jetzt nur zum Testen ausgegraben, oder?
Die Zeiten, in denen Du dieses Museumsstück noch untersttzen solltest, sind wirklich vorbei.

freundliche Grüße
Ingo

[Kasimir]

Hallo Ingo,

also ausgegraben hab ich ihn wirklich, aber ohne das Bewußtsein hier mit einem Oldtimer zu operieren. Aber stimmt: wenn ich in die Info schaue ist da das Copyright bis 2001 angegeben...
Hab aus Spaß mal bei Microsoft geschaut, wie es mit neueren Versionen (für Mac) aussieht und fand sehr lustig was da zu lesen war:
"Seit 31. Januar 2005 steht der Internet Explorer für Mac nicht mehr zum Download zur Verfügung. Wir empfehlen Ihnen, auf einen anderen, aktuelleren Web-Browser - wie beispielsweise Safari von Apple - umzusteigen."
Mein Problem scheint also wirklich ein aussterbendes zu sein...
Hoffe bald mit besseren Problemen zurückzukehren, vielen Dank für den Beistand bei diesem.