Absurder CSS-Fontgrößenwechsel im IE

[Oliver Kurlvink]

Hallo,

ich gerade beim Kunden und stelle das Intranet fertig. Leider stoße ich dabei auf ein extrem absurdes Problem im IE (egal welche Version ab 5.0). In Mozilla tritt das Problem nicht auf (IE ist aber hier "Hausbrowser").

Was ich mache:

Ich habe ein Menu, eine Tabelle, jeder Menupunkt eine Zeile bzw. in der Zeile eine Zelle. Alle Formatierungen der Zelle werden per CSS gesetzt. Per mouseOver und mouseOut wechsle ich die Styles. Jeder Style definiert Farben für Texte und Hintergründe, die Form des Cursors (Hand oder Pfeil) und die Größe der Schriften (in Prozent).

Was passiert:

Verwendet der User die Schrifteinstellung "Mittel" (also den Standard im IE), so funktioniert alles wie gewünscht. Verwendet der User aber eine andere Einstellung, so ändert sich das Verhalten vom IE: Auf der Seite funktioniert erst alles wie gewünscht. Wird aber ein Link angeklickt und während des Ladevorgangs auf der immer noch sichtbaren "alten" Seite im Menu die Maus bewegt, so lädt der IE die Styles korrekt, passt die Schriftartgröße aber prozentual so an, dass sie auf "Mittel" passen und nicht auf z.B. "sehr groß". Der User hat dann folglich ein Menu in unterschiedlichen Schriftartgrößen vor sich.

Wie gesagt, funktioniert an sich auch alles korrekt und der Fehler tritt auch im Internet Explorer nur dann auf, wenn während des Ladens einer neuen Seite (z.B. beim Warten auf die ersten Daten vom Server) das Menu verwendet wird und sich dann dort die Styles austauschen. Das ganze ist reproduzierbar und geschieht z.B. auch, wenn wir von der Firma aus die Seiten hier aufrufen, es ist also keine Spezialkonfiguration vom Kunden.

Hat irgendwer hier eine Idee? Ich bin leider ziemlich ratlos und tippe auf einen Bug im Internet Explorer, der beim Laden der nächsten Seite einfach beim Rendering der bestehenden Seite die Anpassung auf den größeren Schriftgrad "übersieht" und gegen die wir deshalb wenig machen können. Der Kunde sagt natürlich (verständlicherweise), dass das behoben werden muss... :)

[Tom1tk]

Hi,

schreib doch die Schriftgrößen nicht in pt (=veränderbar durch Schriftgrößeneinstellung im IE/NS) sondern als px. Das sind absolute Pixelgrößen. ==Immer und überall gleich. Hat aber den Nachteil, dass deine schlecht-sehenden Kollegen die Schrift nicht mehr vergrößern können.

Greets Tom1tk

[Oliver Kurlvink]

Hi,

schreib doch die Schriftgrößen nicht in pt (=veränderbar durch

Genau daran haperts. Änderbare Größen sind hier wegen Barrierefreiheit Pflicht...

[Thomas J.]

Moin

Das sind absolute Pixelgrößen. ==Immer und überall gleich.

Das mag stimmen, solange Du mit "immer und überall" den IE meinst. In anderen Browsern lassen sich auch px-Schriftgrößen wunderbar skalieren.

Im übrigen scheint mir, daß es sich hier um eine Variation eines bekannten Bugs im IE handelt.
http://www.fabrice-pascal.de/bugbase/guillotine2/

Thomas J.

[Struppi]

schreib doch die Schriftgrößen nicht in pt (=veränderbar durch Schriftgrößeneinstellung im IE/NS) sondern als px. Das sind absolute Pixelgrößen. ==Immer und überall gleich. Hat aber den Nachteil, dass deine schlecht-sehenden Kollegen die Schrift nicht mehr vergrößern können.

Das mit den 'pt' ist korrekt, das zweite nicht. Die Pixelgrößen sind überall anders und du kannst mittlerweile in den meisten Browsern die Schriftgröße trotzdem ändern. Insofern ist von vorneherein '&' oder 'em' sinnvoller.

Struppi.

[Oliver Kurlvink]

Das mit den 'pt' ist korrekt, das zweite nicht. Die Pixelgrößen sind überall anders und du kannst mittlerweile in den meisten

Pixelgrößen sind überall anders? Seit wann ist das so?

[at]

Hallo.

Pixelgrößen sind überall anders? Seit wann ist das so?

Seitdem gleiche Auflösungen auf unterschiedlich großen Bildschirmen funktionieren, also spätestens seit Ablösung der Festfrequenz-Bildschirme.
MfG, at

[Maxx]

Hallo Oliver,

das hört sich alles reichlich kompliziert an.

Per mouseOver und mouseOut wechsle ich die Styles. Jeder Style definiert Farben für Texte und Hintergründe, die Form des Cursors (Hand oder Pfeil) und die Größe der Schriften (in Prozent).

Wird aber ein Link angeklickt und während des Ladevorgangs auf der immer noch sichtbaren "alten" Seite im Menu die Maus bewegt... dann folglich ein Menu in unterschiedlichen Schriftartgrößen vor sich.

Sind die Mouseover hover oder javascript?
Vielleicht gelingt es dir irgendwie im onClick der Links ein Flag  zu setzen und die Mouseover daraufhin zu ignorieren?

Grüße,

Jochen

[Oliver Kurlvink]

Hallo Oliver,

das hört sich alles reichlich kompliziert an.

nene, das ist schon alles ganz simpel:

CSS:

.l2First_Closed { cursor:pointer; border-top: 1px solid #A2B7BF; font-size: 75%; padding: 5px; background-color: #D8E1E5; padding-left: 10px; }

.l2First_Closed_mouseOver { cursor:pointer; border-top: 1px solid #A2B7BF; font-size: 75%; padding: 5px; background-color: #FFFFFF; padding-left: 10px; }

HTML:

<tr>
<td width="100%" id="item_247" class="l2First_Closed" onMouseOver="closeAllLayers();document.getElementById('item_247').className='l2First_Closed_mouseOver';" onMouseOut="document.getElementById('item_247').className='l2First_Closed';" onClick="window.location.href='http://xxx/reddot/Organigramme.php'">Organigramme</td>
</tr>

Vielleicht gelingt es dir irgendwie im onClick der Links ein Flag  zu setzen und die Mouseover daraufhin zu ignorieren?

Der onClick ist schon durch den Body der Seite belegt :(. Außerdem soll ja auch nach einem Klick im Menu das Menu weiterhin funktionieren, wenn auch nur für die 1-3 Sekunden, die das Laden der neuen Seite braucht. Es wäre zu irritierend, wenn das Menu nach einem Klick alle Effekte abschalten würde.

[Maxx]

Hallo Oliver,

Vielleicht gelingt es dir irgendwie im onClick der Links ein Flag zu setzen und die Mouseover daraufhin zu ignorieren?

Der onClick ist schon durch den Body der Seite belegt

Hmm, das verstehe ich nicht.

Es wäre zu irritierend, wenn das Menu nach einem Klick alle Effekte abschalten würde.

ja klar. Das meinete ich auch nicht. Ich habe mir das etwa wie folgt vorgestellt.
Eine globale Variable clicked, 3 Funktionen für onMouseover, onMouseout und onClick ein if (clicked) und etwas was den clicked im onLoad zurücksetzt. Hoffentlich ist das ganze nicht zu wirr geschildert. Kannst du mir folgen?

var clicked=false;

function mOver(item) {
if(clicked == true)        // Die entscheidende Stelle
  return                   // Wenn geklicked mach nix
closeAllLayers()
document.getElementById(item).className='l2First_Closed_mouseOver'

entsprechendes für mOut

function mClick(uri) {
clicked = true;            // und hier merken, dass geklicked wurde
window.location.href=uri;

<td
onMouseover=mOver(item_247)
onMouseout=mOut(item_247)
onClick=mClick('http://xxx/reddot/Organigramme')

und im onLoad des <body> clicked wieder auf false setzen.

Grüße,

Jochen

[Oliver Kurlvink]

Der onClick ist schon durch den Body der Seite belegt
Hmm, das verstehe ich nicht.

Die NAvigation hat noch eine vierte Ebene, die per Layer ausklappt. Wird auf den Seitenhintergrund geklickt, so wird closeAllLayers() ausgeführt, um das Menu zuzuklappen.

ja klar. Das meinete ich auch nicht. Ich habe mir das etwa wie folgt vorgestellt.
Eine globale Variable clicked, 3 Funktionen für onMouseover, onMouseout und onClick ein if (clicked) und etwas was den clicked im onLoad zurücksetzt. Hoffentlich ist das ganze nicht zu wirr geschildert. Kannst du mir folgen?

ja, das verwende ich auch schon, weil nämlich bei einem Klick in der vierten Ebene (also im Layer) der Layer durch den Eventhandler vom Body zugeklappt wird. Mit deiner Methode heble ich das aus: Wenn ich ein mouseOver in der vierten Ebene habe wird closeLayer=0 gesetzt, Standard ist 1. Per mouseOut setze ich den Wert wieder auf 1. Und closeAllLayers() reagiert darauf.

Problem bei deiner Lösung ist halt, dass der CSS-Wechsel ausgeschaltet wird, sobald im Menu geklickt wird. Als Ergebnis verschwindet zwar der Fehler, aber auch der Effekt im Menu. Und der soll ja gerade erhalten bleiben, selbst wenn der User schon einen Menupunkt angeklickt hat :). Die Lösung hatte ich mir heute morgen schon als absolute Notlösung ausgedacht, aber damit ist der Kunde nicht zufrieden :).

[Maxx]

Hi Oliver,

ja, das verwende ich auch schon, weil nämlich bei einem Klick in der vierten Ebene (also im Layer) der Layer durch den Eventhandler vom Body zugeklappt wird. Mit deiner Methode heble ich das aus: Wenn ich ein mouseOver in der vierten Ebene habe wird closeLayer=0 gesetzt, Standard ist 1. Per mouseOut setze ich den Wert wieder auf 1. Und closeAllLayers() reagiert darauf.

vermutlich liegt das an meinem Alter. Das sind mir zuviele Ebenen. So 100%ig kann ich dir nicht folgen. Wenn nicht:

function mOver(item) {
if(clicked == true)
  return;
closeAllLayers()
document.getElementById(item).className='...

dann halt tauschen:

function mOver(item) {
closeAllLayers()
if(clicked == true)
  return
document.getElementById(item).className='...

Grüße,

Jochen

[Struppi]

Hallo Oliver Kurlvink

Hallo Oliver,

das hört sich alles reichlich kompliziert an.

nene, das ist schon alles ganz simpel:

CSS:

.l2First_Closed { cursor:pointer; border-top: 1px solid #A2B7BF; font-size: 75%; padding: 5px; background-color: #D8E1E5; padding-left: 10px; }

.l2First_Closed_mouseOver { cursor:pointer; border-top: 1px solid #A2B7BF; font-size: 75%; padding: 5px; background-color: #FFFFFF; padding-left: 10px; }

HTML:

<tr>
<td width="100%" id="item_247" class="l2First_Closed" onMouseOver="closeAllLayers();document.getElementById('item_247').className='l2First_Closed_mouseOver';" onMouseOut="document.getElementById('item_247').className='l2First_Closed';" onClick="window.location.href='http://xxx/reddot/Organigramme.php'">Organigramme</td>
</tr>

Damit sperrst du schon mal alle aus, die JS ausschalten. (was man im IE immer machen sollte, da es einige Sicherheitslücken gibt, die es ermöglichen Programme auszuführen http://www.heise.de/security/dienste/browsercheck/demos/ie/)

Das ganze könntest du einfacher und vor allem so das es auch funktioniert mit CSS machen.

<a href="http://xxx/reddot/Organigramme.php">Organigramme</a>

a:link
{
display:block;
cursor:pointer;
border-top: 1px solid #A2B7BF;
font-size: 75%;
padding: 5px;
background-color: #D8E1E5;
padding-left: 10px;
}

a:hover
{
background-color: #FFFFFF;
}

Damit kanst du dir sogar die Tabellen sparen.

Übrigens  Klassennamen dürfen nicht mit Zahlen anfangen.

Struppi.

[Oliver Kurlvink]

Hallo,

Damit sperrst du schon mal alle aus, die JS ausschalten. (was man

Die User können hier kein Javascript ausschalten.

Das ganze könntest du einfacher und vor allem so das es auch funktioniert mit CSS machen.

Der Effekt soll auch funktionieren, wenn die Leute neben dem Link im Tabellenhintergrund sind. Dort funktioniert dann aber kein a: mehr...

Übrigens  Klassennamen dürfen nicht mit Zahlen anfangen.

Tun sie hier auch nicht (l2 = ell eins, nicht zwölf). Unterstriche sind aber eigentlich auch nicht erlaubt :).

[Jan L.]

Hallo,

Der Effekt soll auch funktionieren, wenn die Leute neben dem Link im Tabellenhintergrund sind. Dort funktioniert dann aber kein a: mehr...

Doch. Wegen

display: block;

Gruß, Jan

[Struppi]

Damit sperrst du schon mal alle aus, die JS ausschalten. (was man

Die User können hier kein Javascript ausschalten.

Na hoffentlich müssen die nicht damit im Internet surfen.

Das ganze könntest du einfacher und vor allem so das es auch funktioniert mit CSS machen.

Der Effekt soll auch funktionieren, wenn die Leute neben dem Link im Tabellenhintergrund sind. Dort funktioniert dann aber kein a: mehr...

Deshalb display:block;

Übrigens  Klassennamen dürfen nicht mit Zahlen anfangen.

Tun sie hier auch nicht (l2 = ell eins, nicht zwölf). Unterstriche sind aber eigentlich auch nicht erlaubt :).

Ach so.

Struppi.

[Oliver Kurlvink]

Hallo,

Die User können hier kein Javascript ausschalten.
Na hoffentlich müssen die nicht damit im Internet surfen.

Also sie müssen nicht. Wer Zugang zum Proxy hat darf. Aber das ist ja alles nicht mein Problem :).

Der Effekt soll auch funktionieren, wenn die Leute neben dem Link im Tabellenhintergrund sind. Dort funktioniert dann aber kein a: mehr...
Deshalb display:block;

Hm. Damit habe ich noch nicht gearbeitet (bzw. unser Grafiker nicht und der hat ja das ganze hier entworfen :)). Wenn ich die Beschreibung im selfhtml verstanden habe sollte display:block aber nur bewirken, dass dahinter ein Umbruch kommt.

Also ohne display:block

"m1""menupunkt2"

mit:

"m1"
"menupunkt 2"

gewünscht ist aber:

"m1               "
"menupunkt 2      "

wobei             ^ eine feste Pixelangabe (Breite) ist. Längere Menutitel müssten so umbrechen:

"menu menu menu
 menu"

[Maxx]

Hallo,

Deshalb display:block;

Hm. Damit habe ich noch nicht gearbeitet (bzw. unser Grafiker nicht und der hat ja das ganze hier entworfen

Als Empfehlung an deinen Grafiker:
http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp
http://www.howtocreate.co.uk/tutorials/testMenu.html

Grüße,

Jochen

[Oliver Kurlvink]

Als Empfehlung an deinen Grafiker:

thx :) das ist ja schnucklig. ich denke, da wird er viel freude dran haben :)

[Struppi]

Der Effekt soll auch funktionieren, wenn die Leute neben dem Link im Tabellenhintergrund sind. Dort funktioniert dann aber kein a: mehr...
Deshalb display:block;

Hm. Damit habe ich noch nicht gearbeitet (bzw. unser Grafiker nicht und der hat ja das ganze hier entworfen :)). Wenn ich die Beschreibung im selfhtml verstanden habe sollte display:block aber nur bewirken, dass dahinter ein Umbruch kommt.

Nein, es ist dann ein Blockelement.

Also ohne display:block

"m1""menupunkt2"

mit:

"m1"
"menupunkt 2"

gewünscht ist aber:

"m1               "
"menupunkt 2      "

genau das passiert.

wobei             ^ eine feste Pixelangabe (Breite) ist. Längere Menutitel müssten so umbrechen:

"menu menu menu
 menu"

du kannst jedem Blockelement eine feste breite geben.

Struppi.

[wahsaga]

hi,

Verwendet der User die Schrifteinstellung "Mittel" (also den Standard im IE), so funktioniert alles wie gewünscht. Verwendet der User aber eine andere Einstellung, so ändert sich das Verhalten vom IE: [...]

der IE hat manchmal ein problem mit der schriftgradänderung, wenn relative angaben (%, em) für die angabe der schriftgrösse verwendet werden.

oftmals hilft es dann, für den body font-size:101% zu definieren.
durch das eine prozent mehr als die "normalgrösse" 100% muss er hier dann beim berechnen von font-grössen wie z.b. 75% ein klitzekleines bisschen runden - dadurch wird bei anderer schriftgradeinstellung als "mittel" der fehler, dass absurd grosse oder kleine schriftgrössen herauskommen, umgangen.

bin mir nicht ganz sicher, ob das für dein problem zutreffend ist, aber probier's mal aus ...

gruss,
wahsaga

[Oliver Kurlvink]

hi :)

bin mir nicht ganz sicher, ob das für dein problem zutreffend ist, aber probier's mal aus ...

hat leider keine Änderung bewirkt.

[Oliver Kurlvink]

Mir ist eben aufgefallen: Der IE stellt sich beim mouseOver immer auf die Skalierung ein, die beim Browserstart eingestellt war. Startet also jemand mit "Mittel" und ändert es auf "Sehr groß", so wechselt der Browser beim mouseOver zurück auf "Mittel". Startet er dagegen den Browser direkt mit "Sehr groß", so gibt es den Effekt nicht: Der IE setzt den Font dann immer auf "Sehr groß" skaliert. Wird während der Sitzung dann auf "Mittel" zurück gestellt, so skaliert der Browser den mouseOver auf "Sehr groß".

Das ist zwar keine Lösung, aber zumindest eine Einschränkung, denn das Problem tritt nur auf, wenn

1. Jemand nach dem Klick das Menu weiter durchstreift, wobei es etwa 1-3 Sekunden dauert, bis die neue Seite erscheint.

2. Jemand während der Sitzung die Schriftartgröße ändert.

Evt. treten diese Bedingungen so selten auf, dass der Kunde den Fehler nicht weiter verfolgen will. Ich werde das heute nachmittag besprechen.