XHTML 1.0 Trans. Valid, Probleme im IE6 & mit Entities

S

sevY

Hi,

ich habe von unserem Designer ein Layout in Photoshop bekommen und das artig in ImageReady sliced und als XHTML mit CSS exportiert.
Dann habe ich den Code sorgfältig in einem Texteditor überarbeitet, plane Flächen mit gestreckten farbigen 1px Gif gefüllt und allerhand optimiert.
Ich programmiere unter Mac OS X 10.3.6 mit Safari 1.2.4 und Firefox 1.0. Dort sieht auch alles wundebar aus. Mein CSS und XHTML ist ebenfalls ohne Beanstandungen durch den W3C Validator verifiziert worden.
Jetzt das böse erwachen… ich hab mich an 2 verschiedene Windows PCs mit IE6 und Firefox 0.8 zum Testen gesetzt.

index.html wurde exakt so angezeigt wie ich es erwartet habe.
Das einzige was da Probleme macht dort nur sowohl unter Firefox als auch unter IE einmal das title Attribut bei Links und das HTML Entity ? (Stern). Der Stern wird entweder durch ein Quadrat oder durch ein Fragezeichen ersetzt. Genauso verhält es sich mit dem Text im title Atrribut.
Wer kann mir hierbei helfen? Das ist zwar erstmal ein harmloses Problem, aber trotzdem wichtig.
Eventuell das Entity als Unicode definieren?

Nun das größte Problem.
Die Seite galerie.html und biografie.html wird im Firefox unter Windows exakt so angezeigt wie auf dem Mac und so, wie ich es erwarte.
Nur der IE macht Probleme. Er zeigt einfach eine komplett weisse Seite an!
Was mache ich falsch? Valid ist es und unter Mac sowie Win Firefox läuft es.


Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="expires" content="14" />

<meta name="robots" content="all" />
<meta name="revisit-after" content="14 days" />

<link rel="stylesheet" type="text/css" href="default.inc.css" />
<link rel="shortcut icon" type="image/ico" href="img/favicon.ico" />
<script language="javascript" type="text/javascript" src="function.inc.js" />
<title></title>
</head>
<body>
<div class="table_01">
    <div class="biografie_">
    </div>
    <div class="biografie002_">
    </div>
    <div class="biografie003_">
    </div>
    <div class="biografie004_">
    </div>
    <div class="biografie005_">
    </div>
    <div class="biografie006_">
    </div>
    <div class="biografie007_">
    </div>
    <div class="biografie008_">
        <img src="img/icon.gif" border="0" width="24" height="20" alt="?"  />
    </div>
    <div class="biografie009_">
    </div>
    <div class="biografie010_">
    </div>
    <div class="biografie011_">
    </div>
    <div class="biografie012_">
        <font>
            Ndo ait duo cui consul claritas Quorum ira ago ruo Moestitia, subnego en proletarius os nos, vivo his ferox Seputus lex Triduum tam in quinquagesimus nec usquequaque vomer requietum soleo potens nam Contemno ac qui pensio reficio Praecox, de per Facio qua Mansuetus ara Necdum. Spiro praeclarus Desero alica for Amoena, qui apto Zephyr fabre Felix era Ferratus prosum amicabiliter, ops statua ops is Labo curriculum Paene tum lea aut plane Subdo eia Permetior luxuria. Se Velamen ora advoco.Sem Ferreus, pax sis Faenum incumbo lux Advoco alea crimen, provida amita boo illis quatenus/quatinus Tandem, Sanctus lex ratio.
        </font>
    </div>

    <div class="biografie014_">
    </div>
    <div class="biografie015_">
    </div>
    <div class="biografie016_">
    </div>
    <div class="biografie017_">
        <a href="galerie.html" target="_self" title="Hier geht es zur Fotogalerie..." onmouseover="javascript:changeImage(1,icon_01);" onmouseout="javascript:changeImage(1,icon_02);">
            <img src="img/icon-.gif" border="0" width="24" height="20" alt="?"  />
        </a>
    </div>
    <div class="biografie018_">
        <a href="galerie.html" target="_self" title="Hier geht es zur Fotogalerie..." onmouseover="javascript:changeImage(1,icon_01);" onmouseout="javascript:changeImage(1,icon_02);">
            <img src="img/biografie_18.gif" border="0" width="106" height="25" alt="?"  />
        </a>
    </div>
    <div class="biografie019_">
    </div>
    <div class="biografie020_">
    </div>
    <div class="biografie021_">
    </div>
    <div class="biografie022_">
        <a href="kontakt.html" target="_self" title="Hier geht es zum Kontaktformular..." onmouseover="javascript:changeImage(3,icon_01);" onmouseout="javascript:changeImage(3,icon_02);">
            <img src="img/icon-.gif" border="0" width="24" height="20" alt="?"  />
        </a>
    </div>
    <div class="biografie023_">
        <a href="kontakt.html" target="_self" title="Hier geht es zum Kontaktformular..." onmouseover="javascript:changeImage(3,icon_01);" onmouseout="javascript:changeImage(3,icon_02);">
            <img src="img/biografie_23.gif" border="0" width="106" height="20" alt="?"  />
        </a>
    </div>
    <div class="biografie024_">
    </div>
    <div class="biografie025_">
    </div>
    <div class="biografie026_">
    </div>
    <div class="biografie027_">
    </div>
    <div class="biografie028_">
        <font>
            Ndo ait duo cui consul claritas Quorum ira ago ruo Moestitia, subnego en proletarius os nos, vivo his ferox Seputus lex Triduum tam in quinquagesimus nec usquequaque vomer requietum soleo potens nam Contemno ac qui pensio reficio Praecox, de per Facio qua Mansuetus ara Necdum. Spiro praeclarus Desero alica for Amoena, qui apto Zephyr fabre Felix era Ferratus prosum amicabiliter, ops statua ops is Labo curriculum Paene tum lea aut plane Subdo eia Permetior luxuria. Se Velamen ora advoco.Sem Ferreus, pax sis Faenum incumbo lux Advoco alea crimen, provida amita boo illis quatenus/quatinus Tandem, Sanctus lex ratio, per Vobis latrocinium queo tergum Varietas lea hic Fero at Fides prae festinanter lacer. Triduum tam in quinquagesimus nec usquequaque vomer requietum soleo potens nam Contemno ac qui pensio reficio Praecox, de per Facio qua Mansuetus ara Necdum.
        </font>
    </div>
    <div class="biografie030_">
    </div>
</div>
</body>
</html>

CSS
Code: 
body {
    background:#f7f7f7;
}

font,img {
    color:#3f3f3f;
    font-family:Verdana,Helvetica,Arial,sans-serif;    
    font-size:11px;
    line-height:14px;
    font-weight:normal;
    text-decoration:none;
}

div.table_01 {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width:898px;
    height:665px;
}

div.biografie_ {
    position:absolute;
    left:0px;
    top:0px;
    width:898px;
    height:17px;
    background-image:url(img/biografie_01.gif);
    background-repeat:no-repeat;
}

div.biografie002_ {
    position:absolute;
    left:0px;
    top:17px;
    width:336px;
    height:173px;
    background-image:url(img/biografie_02.gif);
    background-repeat:no-repeat;
}

div.biografie003_ {
    position:absolute;
    left:336px;
    top:17px;
    width:84px;
    height:173px;
    background-image:url(img/fill.gif);
    background-repeat:repeat;
    background:#dfe1dd;
}

div.biografie004_ {
    position:absolute;
    left:420px;
    top:17px;
    width:41px;
    height:628px;
    background-image:url(img/fill.gif);
    background-repeat:repeat;
    background:#dfe1dd;
    }

//usw…

Nicht das mir jetzt jemand meckert wegen der vielen Klassen… es ist so einfach am praktibelsten in Verbindung mit Slices aus ImageReady, wenn man diese alle in <div> bindet und dann mit CSS positioniert.

Gibt es vielleicht einen Bug im IE6?

Liebe Grüße

Yves
 
Zuletzt bearbeitet von einem Moderator:
Der IE zickt rum wenn man über die Doctype Angabe das "xml version="1.0"" blabla schreibt. Du hast nicht zufällig die datei mit dem Suffix .xhtml oder .xml gespeichert?

Beim groben überfielegn sieht dein geposteter Quelltext sauber aus. Wenn er validiert ( :) ) kann es nur irgendeine Kleinigkeit sein.

BadHorsie
 
Hi,

wie du sehen kannst hab ich ja kein xml version Tag gesetzt. Und die Dateien sind als .html abgespeichert.
Es ist sehr ärgerlich… ich setze gerade in die leeren <div> Tags 1px blank Gifs und strecke die auf die Maße, die für das jeweilige <div> auch im Container angegeben sind.
Vielleicht hilft das.

Weisst du etwas zu den Entities und dem title Tag?

Yves
 
Entities code ich in Unicode und Hex-Schreibweise. Was stimmt nicht mit dem title Tag?

BadHorsie
 
Wie ist denn zufällig der Unicode für den Stern? ;)
Das title Attribut (nicht Tag gemeint) bei Anchors ist im Windows IE6 und im Firefox nicht aus dem Inhalt, den ich definiert habe, sondern nur aus einem Zeichen, welches erscheint, wenn ein Zeichen fehlt. Dieses Quadrat eben… weisst was ich meine?

Liebe Grüße

Yves
 
Hab ich grad nicht im Kopf. Geheimtip: http://unicode.org Da bekommt man sämtliche Unicode Zeichensätze als PDF zum Download. Einfach vor die Unicode-Zahl ein &# hängen und in HTML einbauen (z.B. ¸).

Das Quadrat wird normalerweise angezeigt wenn der Browser das Zeichen nicht kennt. Solltest auch versuchen stattdessen das Unicode-Zeichen zu setzen.

BadHorsie
 
Hi, das Problem mit der Anzeige hab ich gelöst.
Der feine Herr Internetexplorer mochte nicht, das das <script> Tag ohne abschließenden Pendaten auftritt.

Code: 
<script language="javascript" type="text/javascript" src="function.inc.js"></script>


So geht es wunderbar.

Jetzt bleibt nur noch das Problem mit den Entities.

Liebe Grüße

Yves
 
Achso, ja. Das problem hatte ich auch mal. Hätte ich auch drauf kommen können. Wie, gesagt, Unicode.org ;-)

Ich bin ma ne Zeit offline ;-)
BadHorsie
 
Yves schrieb:
Hi, das Problem mit der Anzeige hab ich gelöst.
Der feine Herr Internetexplorer mochte nicht, das das <script> Tag ohne abschließenden Pendaten auftritt.
Yves
Zum Vergrößern anklicken....

Hm, du hattest doch gesagt, dass du die Seiten XHTML-kompatibel gemacht hast, oder? Dann gehe ich davon aus, dass es daran liegt, wie du schon herausgefunden hast. XHTML will nun mal immer ein komplettes endtag. wenn du das ganze als html 4.1 (mit loose.dtd) spezifizierst, müsste das problem auch nicht mher zu sehen sein. Nur mal so zum testen. :)
 
Der W3C Validator hatte das allerdings nicht bemängelt.
Mit einem loose.dtd war das Problem immer noch vorhanden, hab's grad mal getestet.
Liebe Grüße

Yves
 
Zurück
Oben Unten