IE und Firefox

[hoverschaltflächen, css und ärger mit firefox]

Hi!
Bin gerade dabei meine alten Hoverbuttons von den Frontpage JS dingern in CSS Buttons umzuwandeln. Im Prinzip ein Link mit einem bild dahinter was sich entsprechend ändert. Funktioniert 1A mit dem IE, aber FP zeigt partout die Bilder nicht an.

Die CSS:
a.rollover:link
 {
  display:block;
  width:103;
  height: 23;
  background:url("../graphics/fp_btn0.jpg") no-repeat ...;
  text-decoration:none;
  font-family:Helvetica;
  font-size:11px;
  line-height:1.8em;
  color:#C0C0C0;
 }
a.rollover:visited
 {
  display:block;
  width:103;
  height: 23;
  background:url("../graphics/fp_btn0.jpg") no-repeat ...;
  text-decoration:none;
  font-family:Helvetica;
  font-size:11px;
  line-height:1.8em;
  color:#C0C0C0;
 }

a.rollover:hover
 {
  display:block;
  width:103;
  height: 23;
  background:url("../graphics/fp_btn1.jpg") no-repeat ...;
  text-decoration:none;
  font-family:Helvetica;
  font-size:11px;
  line-height:1.8em;
  color:#DDDDDD;
 }

a.rollover:active
 {
  display:block;
  width:103;
  height: 23;
  background:url("../graphics/fp_btn1.jpg") no-repeat ...;
  text-decoration:none;
  font-family:Helvetica;
  font-size:11px;
  line-height:1.8em;
  color:#DDDDDD;
 }

dann braucht man nur noch den link in der html datei, mit klassenangabe:

<a href="../main.html" class="rollover" target="_top">b&nbspe&nbspt&nbspr&nbspe&nbspt&nbspe&nbspn</a>

Funktioniert im IE, Firefox motzt.

Wie isses eigentlich mit den formatierungen für z.B. Umlaute (&uuml für ü,...). Das rafft Firefox ebenfalls nicht, macht auch der IE ohne zu mosern. Verwendet man das überhaupt noch?!

Freue mich auf Antworten.

[roka]

Es funktioniert mit Firefox alles nicht. :-(

Der IE (wer hätte es ihm zugetraut?!) macht alles ohne zu murren.

Hab mich da oben vertan und "FP" statt "Firefox" geschrieben. Nicht irritieren lassen. ;-)

[Der Martin]

Hallo,

Funktioniert 1A mit dem IE, aber FP zeigt partout die Bilder nicht an.

das könnte daran liegen, dass der IE bei fehlenden Maßeinheiten anfängt, fröhlich draufloszuraten, und sich nach kurzem Nachdenken für px entscheidet. Manchmal ist das tatsächlich, was der Autor gemeint hat.
Der Firefox lässt sich auf solche Ratespielchen nicht ein, er ignoriert die fehlerhaften Angaben einfach.

width:103;
  height: 23;

Also 103 Kürbisse breit und 23 Toastscheiben hoch?

font-family:Helvetica;

Ups. Isch 'abe gar kein 'elvetica. Gib bitte mindestens eine generische Schriftfamilie zusätzlich an. Günstig wäre hier z.B. Arial, Helvetica, Sans-Serif.

a.rollover:visited
{ [...]

Und anstatt gleiche Eigenschaften für jede Pseudoklasse zu wiederholen, definiere sie doch nur *einmal* für a.rollover, und für :link, :visited, :hover etc. notierst du dann nur noch die davon abweichenden Eigenschaften.

a.rollover:active

Dir ist klar, dass :active oft falsch verstanden wird? Wahrscheinlich vor allem deshalb, weil's der IE falsch umsetzt.

<a href="../main.html" class="rollover" target="_top">b&nbspe&nbspt&nbspr&nbspe&nbspt&nbspe&nbspn</a>

Da fehlen doch wohl ein paar Semikola?

Funktioniert im IE, Firefox motzt.

Fehlermeldung? Auswirkung?

Wie isses eigentlich mit den formatierungen für z.B. Umlaute (&uuml für ü,...). Das rafft Firefox ebenfalls nicht, macht auch der IE ohne zu mosern.

Wenn du sie korrekt notierst (beachte das Semikolon!), geht Firefox auch korrekt damit um.

Verwendet man das überhaupt noch?!

Das kommt drauf an. Wenn dein Dokument in einer Zeichencodierung ausgeliefert wird, die diese Zeichen bereits enthält, brauchst du sie nicht zu maskieren. Es schadet zwar nicht, macht den Code aber schlechter lesbar.

So long,
 Martin

[roka]

Vielen Dank für die rasche Antwort!

Dachte Helvetica wäre so ziemlich Standard. Nundenn, wird eben eine andere verwendet. ^^ Mein Ziel ist größtmögliche Kompatibilität ;-)

Leider sind meine CSS Kenntnisse sehr überschaubar klein. :D (Merkt man's?!)

Das mit den Semikolons wird gleich mal geändert. Da rät der IE wohl auch fleißig, was?! ^^

Danke nochmal! Sieht alles schon besser aus.

Die Bilder funktionieren jetzt auch! Lag an dem Zusatz: "no-repeat ...". Wie das wieder dahin gelangt is, k.a. ^^

[Der Martin]

Hi,

Dachte Helvetica wäre so ziemlich Standard.

in gewisser Weise schon - sie ist sehr bekannt und weit verbreitet. Windows kennt die Schrift zumindest dem Namen nach, ersetzt sie intern aber sofort durch Arial - jedenfalls in der Default-Einstellung.

Leider sind meine CSS Kenntnisse sehr überschaubar klein. :D (Merkt man's?!)

Macht ja nichts. Lass sie mit der Zeit wachsen. :)

Das mit den Semikolons wird gleich mal geändert. Da rät der IE wohl auch fleißig, was?! ^^

Hm, ja ... "Raten" ist hier der falsche Ausdruck. Grundsätzlich darf man das abschließende Semikolon bei einer Entity-Referenz weglassen, wenn die Bedeutung dabei eindeutig bleibt. In deinem Fall kommen aber Buchstaben unmittelbar danach, so dass der Entity-Name nicht klar bestimmt werden kann. Es sieht so aus, als ob der IE hier Zeichen für Zeichen durch den Quelltext läuft und die erste Übereinstimmung nimmt:
 &n     Kein Treffer
 &nb    Kein Treffer
 &nbs   Kein Treffer
 &nbsp  Gefunden, also Leerzeichen setzen und weiter im Text.
Firefox geht wahrscheinlich nach einem anderen Schema vor: Er scheint nach dem & das erste Zeichen zu suchen, das nicht mehr zum Entity-Namen gehören *kann* und untersucht dann die Zeichenfolge dazwischen. Die Folge &ouml&ouml&ouml löst er nämlich auch ohne Semikolon in drei 'ö' auf. Aber sobald ich noch ein Zeichen einschiebe und das zu &oumlp&ouml&ouml ergänze, versteht er nicht mehr, was damit gemeint war und sucht vermutlich nach der nicht existierenden Entity oumlp.

Die Bilder funktionieren jetzt auch! Lag an dem Zusatz: "no-repeat ...".

Hm. Dann hättest du das Hintergrundbild eigentlich trotzdem sehen müssen. Aber eben nur einmal pro a-Element anstatt gekachelt.

Schönen Sonntag noch,
 Martin

[MudGuard]

Hi,

Die Bilder funktionieren jetzt auch! Lag an dem Zusatz: "no-repeat ...".

Hm. Dann hättest du das Hintergrundbild eigentlich trotzdem sehen müssen. Aber eben nur einmal pro a-Element anstatt gekachelt.

Nö.  background:url("../graphics/fp_btn0.jpg") no-repeat ...; muß komplett ignoriert werden, da '...' weder ein gültiger Wert für background-position noch für background-attachment noch für background-color ist.
Damit ist der gesamte Wert der Eigenschaft background fehlerhaft und muß daher komplett ignoriert werden - was der Firefox ja auch vorbildlich macht.

cu,
Andreas

[Patrick Andrieu]

Hallo Martin!

das könnte daran liegen, dass der IE bei fehlenden Maßeinheiten anfängt, fröhlich draufloszuraten, und sich nach kurzem Nachdenken für px entscheidet. Manchmal ist das tatsächlich, was der Autor gemeint hat.

So eine ähnliche Erfahrung musste ich letztens machen: Es ist eigentlich nicht zwingend vorgegeben, bei 0-Werten eine Maßeinheit anzugeben. So ist:

  
#the_id {  
top:0;  
left:20px;  
}  

aus CSS-Sicht absolut korrekt.

Will man diese Werte mittels JavaScripts manipulieren und fragt man sie ab, etwa so:

  
alert(document.getElementById('the_id').style.top);  

erhält man keineswegs in der Alertbox "0", sondern die Browser "raten" (oder was tun die da genau *g*), welche Einheit Du wohl gemeint haben könntest:

IE "alertet" den Wert "0px"
Geckos zeigen in der Alertbox den Wert "0pt"

weswegen ein if-Zweig in der Art:

  
if (document.getElementById('the_id').style.top == 0) {  
tu_was();  
}  

hämisch übergangen wird ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[Gernot Back]

Hallo Patrick,

weswegen ein if-Zweig in der Art:

if (document.getElementById('the_id').style.top == 0) {
tu_was();
}

  

> hämisch übergangen wird ;)  
  
~~~javascript
  
if (parseFloat(document.getElementById('the_id').style.top) == 0) {  
   tu_was();  
}

Sollte aber immer funktionieren.

Gruß Gernot

[Patrick Andrieu]

Hallo Gernot!

if (parseFloat(document.getElementById('the_id').style.top) == 0) {
   tu_was();
}

> Sollte aber immer funktionieren.  
  
Danke. parseInt aber auch ;)  
  
Viele Grüße aus Frankfurt/Main,  
Patrick

-- 
![](http://www.atomic-eggs.com/clubsig.gif)  
  
\_ - jenseits vom delirium - \_  
  
<hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>

[Gernot Back]

Hallo Patrick,

Danke. parseInt aber auch ;)

Mit parseInt wäre ich vorsichtig, stell dir vor, was da aus der Angabe ".3em" oder "0.3em" wird!

Gruß Gernot

[Cheatah]

Hi,

So eine ähnliche Erfahrung musste ich letztens machen: Es ist eigentlich nicht zwingend vorgegeben, bei 0-Werten eine Maßeinheit anzugeben.

richtig. Der Grund ist, dass 0 bei allen Längeneinheiten identisch groß ist. 0ly (Lightyears) sind exakt so groß wie 0nm.

Will man diese Werte mittels JavaScripts manipulieren und fragt man sie ab, etwa so:

alert(document.getElementById('the_id').style.top);

> erhält man keineswegs in der Alertbox "0", sondern die Browser "raten" (oder was tun die da genau \*g\*),  
  
Sie melden den Computed Value.  
  
Cheatah  

-- 
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|  
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html  
X-Will-Answer-Email: No  
X-Please-Search-Archive-First: Absolutely Yes

[Patrick Andrieu]

Hallo Cheatah!

erhält man keineswegs in der Alertbox "0", sondern die Browser "raten" (oder was tun die da genau *g*),
Sie melden den Computed Value.

Du weißt, dass ich gerne nach dem "warum" frage... warum also "computen" die einen in Pixel (IE - Opera glaube ich auch) und die anderen (Geckos) in "pt"?

Viele Grüße aus Frankfurt/Main,
Patrick

[Cheatah]

Hi,

Du weißt, dass ich gerne nach dem "warum" frage... warum also "computen" die einen in Pixel (IE - Opera glaube ich auch) und die anderen (Geckos) in "pt"?

tja, ich kann Dir dazu leider keine erschöpfende Antwort geben, sondern nur sagen, was ich für den Grund halte: Menschliche Entscheidung. Es ist sinnvoll, Längenwerte auf eine Basiseinheit herunterzubrechen - da sind wir uns denke ich einig. Welche das ist, entscheidet letztlich ein Mensch; und der bei Microsoft hat anders gedacht als der bei Mozilla.

Sorry, aber einen befriedigerenden Grund kenne ich nicht ...

Cheatah

[Patrick Andrieu]

Hallo Cheatah!

Sorry an alle fürs Ingrid-like Posting, die folgende Anekdote fiel mir aber wieder ein, als ich mein Posting als fertige Nachricht noch einmal las...

richtig. Der Grund ist, dass 0 bei allen Längeneinheiten identisch groß ist. 0ly (Lightyears) sind exakt so groß wie 0nm.

Fällt mir ein, dass ich eine endlose Diskussion mit dem Vater einer meiner Freundinnen hatte (ist lange, lange her, da hatten wir alle noch keinen Bart am Kinn - zumindest ich nicht *g*). Und zwar ging das eben um den Wert "0". Und ob es "-0" und "+0" gibt. Ich als Mathematiker (von Schule und Studium kommend, sonst bin ich keiner), konnte weder ein "-0" noch ein "+0" akzeptieren, denn "0" ist für mich einfach "0" - also Abwesenheit von allem, ob es eine Einheit, Freundin, Hund oder Katze ist. Er (Flugzeugpilot - aber eher, wie es nach dem Krieg hier wie in den vom zweiten Weltkrieg gebeutelten Ländern war - eher durch Zufall) behauptete, es gibt doch "+0" und "-0", und wenn es nur bei den Meteorologen so ist. Nun, von denen kann man als Mathematiker (und wahrscheinlich auch als puristischer Physiker) eh keine gute Meinung haben... :O)=

Viele Grüße aus Frankfurt/Main,
Patrick