Unterschiede zwischen Firefox 1.0 und 1.5

[Sven Burkert]

Hallo,

mir ist jetzt schon öfters aufgefallen, dass es bei der Interpretation von Quelltext zwischen Firefox 1.0 und 1.5 Unterschiede gibt. In meinen aktuellen Fall ein JavaScript-Dropdown-Menü mit transparentem Hintergrund: in FF1.5 funktioniert es, in FF1.0 komme ich nicht auf die Untermenüpunkte und der Hintergrund ist nicht transparent.

Woran liegt das? Welche FF-Version hält sich nun nicht an die Standards bzw welche Version ist fehlerhaft?

Zu sehen ist ein Beispiel unter http://demo8.pixelandfriends.de/

Falls es jmd interessiert der Quellcode:

<ul id="menu" class="menu">
  <li>
    <div id="top"><a href="index.php?id=2" onfocus="blurLink(this);">Company</a></div>
    <ul>
      <li class=submenu><a href="index.php?id=14" onfocus="blurLink(this);">philisophy</a></li>
      <li class=submenu><a href="index.php?id=13" onfocus="blurLink(this);">history</a></li>
      <li class=submenu><a href="index.php?id=12" onfocus="blurLink(this);">unterpunkt3</a></li>
    </ul>
  </li>
  ...
</ul>

#menu-1 {
  float: left;
  border-bottom: 1px solid white;
  height: 78px;
  width: 500px;
  background-color: #162752;
  padding: 0px;
  font-size: 11pt;
}

.menu {
  margin: 0px;
  padding: 50px 0px 0px 10px;
}

/* Submenu */
.menu ul {
  padding-top: 1px;
  position: absolute; /* ?????????? */
}

.menu li {
  display: inline;
  font-weight: bold;
  list-style: none;
  height: auto;
  float: left;
}

.menu li ul {
  visibility: hidden;
}

.menu li li ul {
  position: absolute; /* pour sortir la liste du flux de donnée */
  top: auto;
  left: auto;
  margin-left: 64px;
  margin-top: -123px; /* move the sub menu verticaly */
}

.menu li li {
  display: block;
  float: none;
}

/* correct a little IE bug */
* html .menu li li{
  display: inline;
}

.menu a {
  display: block;
  text-decoration: none;
  padding: 5px 10px 5px 10px;
  font-weight: bold;
}

.menu a:hover {
  text-decoration: none;
  background-color: #445374;
}

.menu .submenu a:hover {
  background: url(/fileadmin/images/transparent.jpg);
  filter: Alpha(opacity=90);
  border: 0px #000 solid;
  color: white;
  display: block;
  width: 100px;
  padding: 4px;
  font-weight: bold;
}

/* for a mozilla better display with key nav */
.menu a:focus{
  background-color: #aaf;
}

div[id="menu-1"]>.menu li ul {
  padding-left: 0px;
}

div[id="menu-1"]>.menu li ul a {
  background: url(/fileadmin/images/transparent.png);
  color: white;
  display: block;
  width: 200px;
  text-decoration: none;
  padding: 2px 0px 1px 10px;
}

div[id="menu-1"]>.menu li ul a:hover {
  padding: 2px 0px 1px 10px;
  background-color: white;
  color: #162752;
  width: 200px;
}

[Struppi]

»... <a href="index.php?id=14" onfocus="blurLink(this);">...
                                        ^^^^^^^^

Mach das lieber nicht, deine Seite wird dadurch für manche unbenutzbar.

Struppi.

[Sven Burkert]

Mach das lieber nicht, deine Seite wird dadurch für manche unbenutzbar.

Du meinst ich soll das Menü nicht mit JavaScript realisieren weil dann die Besucher, die JavaScript deaktiviert haben, keinen Zugriff auf die Menüpunkte haben?
...oder meinst du was anderes?

[Struppi]

Mach das lieber nicht, deine Seite wird dadurch für manche unbenutzbar.

Du meinst ich soll das Menü nicht mit JavaScript realisieren weil dann die Besucher, die JavaScript deaktiviert haben, keinen Zugriff auf die Menüpunkte haben?
...oder meinst du was anderes?

Ja, die Funktion blurLink deutet darauf hin, dass du sowas aufrust onfocus="this.blur();" damit machst du die Links unerreichbar, wenn man mit der Tastatur auf den Link steuern möchte (es gibt z.b. Menschen die können keine Maus bedienen).

Struppi.

[berdn]

Hallo Sven,

wenn Du unbedingt den blur setzen willst, sprich den focus entfernst, dann mache das doch mit einen kleinen Timer.

Sprich du entfernst den focus nach 1 oder 2 sekunden.

Liebe Grüße,

Bernd

[Sven Burkert]

wenn Du unbedingt den blur setzen willst, sprich den focus entfernst, dann mache das doch mit einen kleinen Timer.

Das onfocus="blurLink(this); stört mich erstmal nicht, das ist eh nicht von mir, das setzt Typo3 rein! Also kanns nicht so verkehrt sein...!? ;)

[Struppi]

Das onfocus="blurLink(this); stört mich erstmal nicht, das ist eh nicht von mir, das setzt Typo3 rein! Also kanns nicht so verkehrt sein...!? ;)

Stimmt ich erinner mich, auch wenn es aus Typo 3 kommt, ist völliger Unsinn.

Das war irgendwann mal populär als noch mit Frames gearbeitet wurde und sich Designer über den Pixelrand im IE aufregten. Nicht nur das der Link unbenutzbar wurde, nein die Funktion führte darüber hinaus in manchen älteren Browsern zum Absturz. Und auf Seiten die keine Frames verwenden hat sie nicht den geringsten Sinn.

Struppi.

[Cybaer]

Hi,

Und auf Seiten die keine Frames verwenden hat sie nicht den geringsten Sinn.

Wenn den Designer der Pixelrand stört, dann auch dann, wenn er keine Frames benutzt. Da gibt es keinen Zusamenhang ...

Gruß, Cybaer

[at]

Hallo.

Wenn den Designer der Pixelrand stört, dann auch dann, wenn er keine Frames benutzt. Da gibt es keinen Zusamenhang ...

... außer einem zeitlichen.
MfG, at

[Cybaer]

Hi,

Wenn den Designer der Pixelrand stört, dann auch dann, wenn er keine Frames benutzt. Da gibt es keinen Zusamenhang ...
... außer einem zeitlichen.

?

Gruß, Cybaer

[at]

Hallo.

Wenn den Designer der Pixelrand stört, dann auch dann, wenn er keine Frames benutzt. Da gibt es keinen Zusamenhang ...
... außer einem zeitlichen.

?

Die schlechte Angewohnheit, aktiven Verweisen die Umrandung mittels Javascript zu rauben, stammt aus einer Zeit, als Frames eine ebenso beliebte Technik waren.
MfG, at

[Cybaer]

Hi,

Die schlechte Angewohnheit, aktiven Verweisen die Umrandung mittels Javascript zu rauben, stammt aus einer Zeit, als Frames eine ebenso beliebte Technik waren.

Frames sind schon ein wenig älter als dieses proprietäre Feature des IEs, und der Stil "Umrandung" ist Bestandteil von CSS 3.

Der Zusammenhang ist also vergleichsweise der, daß Deutschland Fußballweltmeister wurde und es einen Bundeskanzler Adenauer gab ...

Gruß, Cybaer

[at]

Hallo.

Frames sind schon ein wenig älter als dieses proprietäre Feature des IEs, und der Stil "Umrandung" ist Bestandteil von CSS 3.

Das gemeinsame Auftreten liegt wohl darin begründet, dass die Umrandung bei Frames visuell bestehen bleibt, während sie beim Wechsel einfacher Seiten verschwindet und somit nicht stört.

Der Zusammenhang ist also vergleichsweise der, daß Deutschland Fußballweltmeister wurde und es einen Bundeskanzler Adenauer gab ...

An diese Zeit fehlt mir die Erinnerung.
MfG, at

[Cybaer]

Hi,

Das gemeinsame Auftreten liegt wohl darin begründet, dass die Umrandung bei Frames visuell bestehen bleibt, während sie beim Wechsel einfacher Seiten verschwindet und somit nicht stört.

Also ich weiß ja nicht, wie *Du* surfst, aber ich weiß vom "normalen" Surfer, daß er auch den Back-Button benutzt und ggf. auch Links in einem neuen Tab oder Fenster öffnet, bzw. mitunter sogar von Webautor versucht wird, ihn dazu zu nötigen. ;)

In allen Fällen bleibt die Umrandung auch ohne Einsatz von Frames erhalten - ggf. auch "gleichzeitig sichtbar" - also trotzdem ein "Störer" ...

Gruß, Cybaer

[at]

Hallo.

Also ich weiß ja nicht, wie *Du* surfst

Nicht mit dem IE.

In allen Fällen bleibt die Umrandung auch ohne Einsatz von Frames erhalten - ggf. auch "gleichzeitig sichtbar" - also trotzdem ein "Störer" ...

Du hast eine Erläuterung des Zusammenhanges erhalten. Ob du ihn nachvollziehen kannst, ist für mich nachrangig.
MfG, at

[Cybaer]

Hi,

Du hast eine Erläuterung des Zusammenhanges erhalten. Ob du ihn nachvollziehen kannst, ist für mich nachrangig.

So wie es für mich nachrangig ist, ob Du nachvollziehen kannst, daß es diesen Zusammenhang so nicht gibt. :-)

Gruß, Cybaer

[Cybaer]

Hi,

Das onfocus="blurLink(this); stört mich erstmal nicht,

Nein, nur ggf. die Anwender. Wenn die egal sind ...

das ist eh nicht von mir, das setzt Typo3 rein! Also kanns nicht so verkehrt sein...!? ;)

Es gibt einige Möglichkeiten, das gewünschte zu erreichen. Es muß also nicht unbedingt die schlechteste aller möglichen Varianten sein ...

Gruß, Cybaer

[Ingo Turski]

Hi,

Woran liegt das? Welche FF-Version hält sich nun nicht an die Standards bzw welche Version ist fehlerhaft?

das kann ich Dir auf Anhieb nicht sagen, aber .menu ul {z-index:1;} behebt das Problem.
freundliche Grüße
Ingo

[Sven Burkert]

das kann ich Dir auf Anhieb nicht sagen, aber .menu ul {z-index:1;} behebt das Problem.

Tatsächlich: Jetzt wird der Transparent-Effekt angezeigt.
Aber das Menu verschwindet noch immer! Aber ich denke das bekomm ich allein hin...

[Sven Burkert]

das kann ich Dir auf Anhieb nicht sagen, aber .menu ul {z-index:1;} behebt das Problem.

Tatsächlich: Jetzt wird der Transparent-Effekt angezeigt.
Aber das Menu verschwindet noch immer! Aber ich denke das bekomm ich allein hin...

Und jetzt weiss ich auch warum: das DIV unter dem Menü hatte unter anderem als CSS-Eigenschaft overflow:auto. Nachdem ich diese Eigenschaft gelöscht habe, wird das Menü auch in FF1.0 angezeigt.

Kann mir jmd bitte erklären wieso overflow:auto ein absolut positioniertes Element, das per JavaScript auf "visible" gesetzt wurde, wieder verschwindet?