Ich habe hier ein Phänomen, bei dem ich nicht weiter weis.
Es handelt sich um eine Webseite die bei unseren Kunden als Digitale Preisauszeichnung auf Monitoren dargestellt wird.
An den Monitoren sind miniPC angeschlossen auf denen Debian (Etch, Squeeze) läuft.
Da die Geräte nur eine Webseite herunterladen und anzeigen müssen, bleiben sie, was Updates der Linuxdistribution angeht immer auf dem selben Stand.
Es läuft also die Debianversion darauf, die zum Zeitpunkt der Installetion aktuell war.
Eben damit sie keine Fehler durch Änderungen bekommen.
Inzwischen mussten wir erneut auf neuere Geräte umstellen. Wegen der Hardware-Kompatibilität ist dort ein aktuelles Debian installiert.
Jetzt zum Problem.
Die neuen Geräte zeigen die Schrift auf den Webseiten viel kleiner an.
Alle Geräte, ob alt oder neu, laden die selben Seiten herunter. Die Seiten sind nicht für die neuen Geräte angepasst worden.
Alle Schriftgrößen sind mit PX angegeben.
Die Hintergrundgrafiken (Tafeln) sind JPG mit Größenangabe in PX. Diese bleiben alle korrekt dargestellt, egal auf welchem PC.
Hier zwei Bilder, die den krassen Unterschied verdeutlichen:
Dies ist die korrekte Schriftgröße:
Und hier die exakt selbe Webseite mit festen px-größen für die Schriftart auf den neuen Geräten:
Ich habe keine Ahnung, woran es liegen könnte.
Vor allem sind ausschließlich die Schriften betroffen, die Hintergrundgrafiken bleiben ja korrekt dargestellt.
Auf allen Rechnern läuft auch der selbe Browser in der selben Version (Iceweasel 2.0.0.9) und selben Konfiguration.
Browserinterne Größen der Schriftanzeige sind deaktiviert.
Ich kann mir nicht vorstellen, dass die Hardware das Verursacht.
Hat jemand eine Idee, ob es am HTML/CSS liegt?
Hier ist der Quellcode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="noindex, nofollow" /><meta http-equiv="refresh" content="900" />
</head>
<body bgcolor="black">
<style type="text/css">#EdekaChalk-Regular_klein
{
font-family:"EdekaChalk-Regular";
font-weight:normal;
font-size:45px;
color:#FFFFFF;
line-height:150%;
letter-spacing:2;
}
#EdekaChalk-Regular_gross
{
font-family:"EdekaChalk-Regular";
font-weight:normal;
font-size:70px;
color:#FFFFFF;
line-height:90%;
letter-spacing:2;
}
#EdekaChalk-Regular_gp
{
font-family:"EdekaChalk-Regular";
font-weight:normal;
font-size:17px;
color:#FFFFFF;
line-height:2;
}
#EdekaChalk-Regular_gew
{
font-family:"EdekaChalk-Regular";
font-weight:normal;
font-size:30px;
color:#FFFFFF;
letter-spacing:2;
}
#EdekaChalk-Regular_preis
{
font-family:"EdekaChalk-Regular";
font-weight:normal;
font-size:120px;
color:#FFFFFF;
line-height:70%;
}
#EdekaChalk-Regular_eur_gr
{
font-family:"EdekaChalk-Regular";
font-size:60px;
font-weight:normal;
font-style:normal;
color:#FFFFFF;
}
#EdekaChalk-Regular_eur_kl
{
font-family:"EdekaChalk-Regular";
font-size:11.333333333333px;
font-weight:normal;
font-style:normal;
color:#FFFFFF;
}
#EdekaChalk-Regular_h
{
font-family:"EdekaChalk-Regular";
font-weight:normal;
font-size:14px;
color:#FFFFFF;
line-height:0.4;
}
</style>
<div style="overflow:hidden;position:absolute;left:0px;top:0px;height:256px
;width:640px"/><div style="position:absolute;left:0px;top:0px;width:640px">
<img src="des/img/tafel.jpg" border="0px" width="640px"/>
</div><div style="position:absolute;width:558px;margin-top:30px;margin-left:
40px;overflow:hidden;height:199px" align="left">
<font id="EdekaChalk-Regular_gross">
saftiger<br />
<font id="EdekaChalk-Regular_klein">
Rinderschmorbraten
</font>
</font>
</div>
<div style="position:absolute;width:350px;top:112px;left:260px; overflow:hidden;" align="right">
<font id="EdekaChalk-Regular_gew">1kg</font> <font id="EdekaChalk-Regular_preis">7,99</font>
</div>
<div style="position:absolute;width:350px;top:200px;left:260px;" align="right">
</div>
</div>\n\n<div style="overflow:hidden;position:absolute;left:640px;top:0px;height:256px
;width:640px"/><div style="position:absolute;left:0px;top:0px;width:640px">
<img src="des/img/tafel.jpg" border="0px" width="640px"/>
</div><div style="position:absolute;width:558px;margin-top:30px;margin-left:
40px;overflow:hidden;height:199px" align="left">
<font id="EdekaChalk-Regular_gross">
deutsches Jungbullenfleisch<br />
<font id="EdekaChalk-Regular_klein">
Rindergulasch
</font>
</font>
</div>
<div style="position:absolute;width:350px;top:112px;left:260px; overflow:hidden;" align="right">
<font id="EdekaChalk-Regular_gew">1kg</font> <font id="EdekaChalk-Regular_preis">6,99</font>
</div>
<div style="position:absolute;width:350px;top:200px;left:260px;" align="right">
</div>
</div>\n\n<div style="overflow:hidden;position:absolute;left:0px;top:255px;height:256px
;width:640px"/><div style="position:absolute;left:0px;top:0px;width:640px">
<img src="des/img/tafel.jpg" border="0px" width="640px"/>
</div><div style="position:absolute;width:558px;margin-top:30px;margin-left:
40px;overflow:hidden;height:199px" align="left">
<font id="EdekaChalk-Regular_gross">
Irish OX<br />
<font id="EdekaChalk-Regular_klein">
Rib-Eye- Steak
</font>
</font>
</div>
<div style="position:absolute;width:350px;top:112px;left:260px; overflow:hidden;" align="right">
<font id="EdekaChalk-Regular_gew">100g</font> <font id="EdekaChalk-Regular_preis">2,77</font>
</div>
<div style="position:absolute;width:350px;top:200px;left:260px;" align="right">
</div>
</div>\n\n<div style="overflow:hidden;position:absolute;left:640px;top:255px;height:256px
;width:640px"/><div style="position:absolute;left:0px;top:0px;width:640px">
<img src="des/img/tafel.jpg" border="0px" width="640px"/>
</div><div style="position:absolute;width:558px;margin-top:30px;margin-left:
40px;overflow:hidden;height:199px" align="left">
<font id="EdekaChalk-Regular_gross">
frisches<br />
<font id="EdekaChalk-Regular_klein">
Putenschnitzel- oder Gulasch
</font>
</font>
</div>
<div style="position:absolute;width:350px;top:112px;left:260px; overflow:hidden;" align="right">
<font id="EdekaChalk-Regular_gew">1kg</font> <font id="EdekaChalk-Regular_preis">6,99</font>
</div>
<div style="position:absolute;width:350px;top:200px;left:260px;" align="right">
</div>
</div>\n\n<div style="overflow:hidden;position:absolute;left:0px;top:510px;height:256px
;width:640px"/><div style="position:absolute;left:0px;top:0px;width:640px">
<img src="des/img/tafel.jpg" border="0px" width="640px"/>
</div><div style="position:absolute;width:558px;margin-top:30px;margin-left:
40px;overflow:hidden;height:199px" align="left">
<font id="EdekaChalk-Regular_gross">
frische<br />
<font id="EdekaChalk-Regular_klein">
Hähnchenschenkel m.Rückenstück
</font>
</font>
</div>
<div style="position:absolute;width:350px;top:112px;left:260px; overflow:hidden;" align="right">
<font id="EdekaChalk-Regular_gew">1kg</font> <font id="EdekaChalk-Regular_preis">1,50</font>
</div>
<div style="position:absolute;width:350px;top:200px;left:260px;" align="right">
</div>
</div>\n\n<div style="overflow:hidden;position:absolute;left:640px;top:510px;height:256px
;width:640px"/><div style="position:absolute;left:0px;top:0px;width:640px">
<img src="des/img/tafel.jpg" border="0px" width="640px"/>
</div><div style="position:absolute;width:558px;margin-top:30px;margin-left:
40px;overflow:hidden;height:199px" align="left">
<font id="EdekaChalk-Regular_gross">
frische<br />
<font id="EdekaChalk-Regular_klein">
Hähnchenbrust
</font>
</font>
</div>
<div style="position:absolute;width:350px;top:112px;left:260px; overflow:hidden;" align="right">
<font id="EdekaChalk-Regular_gew">1kg</font> <font id="EdekaChalk-Regular_preis">3,99</font>
</div>
<div style="position:absolute;width:350px;top:200px;left:260px;" align="right">
</div>
</div>\n\n
</body>
</html>
Alles anzeigen