✔ Chrome hat Probleme mit einfachen DIVs

[Sprint]

Hallo,

durch Zufall habe ich entdeckt, daß Chrome Probleme mit ganz einfachen DIVs hat. Obwohl er den Quelltext richtig ausgibt, verdoppelt er ein paar Einträge innerhalb eines DIVs, und selbst das noch falsch. Und kein Anderer Browser zeigt das gleiche Problem.
Das Ergebnis ist hier zu sehen (nur Win und Mac Chrome): http://www.exportarena.de/sites/bankverbindung.htm
Hier ist der betroffene Ausschnitt:

<div id="langflags">
	<div id="germany"><a href="bankverbindung.htm#ger" title="german"></div>
	<div id="united_kingdom"><a href="bankverbindung.htm#eng" title="english"></div>
	<div id="spain"><a href="bankverbindung.htm#spa" title="spanisch"></div>
	<div id="italy"><a href="bankverbindung.htm#ita" title="italian"></div>
</div>

Und die dazugehörenden CSS Deklarationen

#langflags { position: absolute; top: 30px; right: 315px !important; width: 150px; height: 30px; }
#germany a { display: block; background-image: url(../images/flags.gif); background-position: 0 -868px; width: 18px; height: 12px; float: left; margin: 8px; } 
#germany a span { display: none; }
#germany a:hover span { background-image: url(../images/ziel.gif); background-repeat: no-repeat; position: absolute; top: 250px; left: 390px; width: 20px; height: 20px; z-index: 5; display: block; }
#spain a { display: block; background-image: url(../images/flags.gif); background-position: -68px -434px; width: 18px; height: 12px; float: left; margin: 8px; } 
#spain a span { display: none; }
#spain a:hover span { background-image: url(../images/ziel.gif); background-repeat: no-repeat; position: absolute; top: 345px; left: 270px; width: 20px; height: 20px; z-index: 5; display: block; }
#italy a { display: block; background-image: url(../images/flags.gif); background-position: 0 -1178px; width: 18px; height: 12px; float: left; margin: 8px; } 
#italy a span { display: none; }
#italy a:hover span { background-image: url(../images/ziel.gif); background-repeat: no-repeat; position: absolute; top: 350px; left: 410px; width: 20px; height: 20px; z-index: 5; display: block; }
#united_kingdom a { display: block; background-image: url(../images/flags.gif); background-position: -68px -744px; width: 18px; height: 12px; float: left; margin: 8px; } 
#united_kingdom a span { display: none; }
#united_kingdom a:hover span { background-image: url(../images/ziel.gif); background-repeat: no-repeat; position: absolute; top: 220px; left: 320px; width: 20px; height: 20px; z-index: 5; display: block; }

Ist das ein Fehler im Chrome oder doch am Script?

 

[threadi]

Dein Link führt auf eine Seite auf der man erstmal auf eine Zertifikatswarnung stößt. Ohne https geht es besser. Aber kontrollier auch mal das Zertifikat.

Die Seite die ich dann dort sehe enthält einige HTML-Fehler die Du dringend beseitigen solltest:
http://validator.w3.org/check?verbose=1&uri=http://www.exportarena.de/sites/bankverbindung.htm

Auch problematisch könnte die absolute Positionierung der gesamten Seite sein. Wenn Du etwas zentrieren willst, nimm lieber einzig margin mit einer festen Breite für das betreffende Blockelement.

 

[Sprint]

Hi threadi,
danke für den Tip. Es waren ein paar nicht geschlossene <a> Tags, die das Problem verursacht hatten. Keine Ahnung, wie mir das entgehen konnte. Komisch nur, daß es bei allen anderen Browsern richtig funktioniert hatte, selbst beim IE.
Die Zertifikatswarnung ist schon richtig so und auch die absolute Positionierung ist wegen der vertikalen Zentrierung richtig hier.