DOM und OPERA

[KD-one]

Hallo an alle,

Warum interpretiert Opera folgendes Mini-Script nicht, wo er doch DOM verstehen müsste?

function change(id,klasse)
{
document.getElementById(id).className = klasse;
}

Zur Erklärung: Im Menü wird per CSS-hover die Textfarbe auf die Hintergrundfarbe geändert und per onMouseOver sollte der Hintergrund in die Textfarbe(u.U. auch entsprechend eingefärbtes Bild) konvertiert werden. Das funktioniert in Mozilla, Firebird und IE, der Opera 6.04 ändert aber nur die Textfarbe, wodurch die Links natürlich unsichtbar werden.
Die Problemseite(Menü): http://faq.united-web.at

Seltsamerweise interpretiert er [document.getElementById(id).style.visibility] völlig korrekt.

Gruß

Kurt

[Patrick Andrieu]

Hallo KD-One!

Opera 6.04 ändert aber nur die Textfarbe, wodurch die Links natürlich unsichtbar werden.

Hast Du neueren Opera-Versionen probiert? Der 6er ist nicht der berühmteste in Sachen DOM... (getElementsByTagName zB...)

Viele Grüße aus Frankfurt/Main,
Patrick

[KD-one]

Hallo Patrick,

Opera 6.04 ändert aber nur die Textfarbe, wodurch die Links natürlich unsichtbar werden.

Hast Du neueren Opera-Versionen probiert? Der 6er ist nicht der berühmteste in Sachen DOM... (getElementsByTagName zB...)

Nein, mein aktuellster und zugleich einziger ist der 6.04.
Allerdings sollte es laut Hörensagen im 7.2 auch nicht funktionieren, warum auch immer...

Gruß

Kurt

[wahsaga]

hi,

Warum interpretiert Opera folgendes Mini-Script nicht, wo er doch DOM verstehen müsste?
document.getElementById(id).className = klasse;

_sit_ das überhaupt korrekte DOM-syntax?
in selfhtml taucht className jedenfalls nur als unter-objekt von microsofts document.all auf, wenn ich mich nicht irre ...
(hab jetzt aber gerade keine lust, mich durch offizielle java- oder ECMA-script definitionen zu wühlen - vielleicht kann das ja einer der mitleser aus dem effeff beantworten ...?)

gruss,
wahsaga

[wahsaga]

hi,

_sit_ das überhaupt korrekte DOM-syntax?

_ist_ ...

gruss,
wahsaga

[KD-one]

Hallo,

hi,

Warum interpretiert Opera folgendes Mini-Script nicht, wo er doch DOM verstehen müsste?
document.getElementById(id).className = klasse;
_sit_ das überhaupt korrekte DOM-syntax?
in selfhtml taucht className jedenfalls nur als unter-objekt von microsofts document.all auf, wenn ich mich nicht irre ...

Jein.
Unter  http://selfhtml.teamone.de/javascript/objekte/htmlelemente.htm#universaleigenschaften wird es z.B. eindeutig als DOM 1.0/JS 1.5 klassifiziert. Derlei Beispiele gibt es noch mehrere.

(hab jetzt aber gerade keine lust, mich durch offizielle java- oder ECMA-script definitionen zu wühlen - vielleicht kann das ja einer der mitleser aus dem effeff beantworten ...?)

Naja, ich auch nicht, aber nicht, daß ich zu faul wäre, sondern weil ich aufgrund meiner mangelnden Englischkenntnisse die Hälfte sowieso nicht verstehen würde... ;-)

Gruß

Kurt

[wahsaga]

hi,

Warum interpretiert Opera folgendes Mini-Script nicht, wo er doch DOM verstehen müsste?

hab's jetzt nochmal ausprobiert ...

opera 7 hat mit className keine probleme - aber opera 6 scheint es noch nicht zu kennen,

siehe z.b. auch </archiv/2003/4/43125/>.

gruss,
wahsaga

[Axel Richter]

Hallo,

Warum interpretiert Opera folgendes Mini-Script nicht, wo er doch DOM verstehen müsste?

function change(id,klasse)
{
document.getElementById(id).className = klasse;
}

Zur Erklärung: Im Menü wird per CSS-hover die Textfarbe auf die Hintergrundfarbe geändert und per onMouseOver sollte der Hintergrund in die Textfarbe(u.U. auch entsprechend eingefärbtes Bild) konvertiert werden. Das funktioniert in Mozilla, Firebird und IE, der Opera 6.04 ändert aber nur die Textfarbe, wodurch die Links natürlich unsichtbar werden.

Also interpretiert Opera 6.x das Script doch. Das Problem ist hier nicht DOM, sondern die Unfähigkeit der Opera 6.x mit dynamischen Veränderungen von CSS-Hintergründen umzugehen. Sie setzen, soweit ich weiß, bei jeder dynamischen Änderung der CSS-Eigenschaft background, egal ob über background, background-image oder background-color, die background-Werte wieder auf default (-imange:none, -color:transparent).

Ich habe das mal so, mit einer CSS-Weiche, gelöst:

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Test CSS</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="author" content="Axel Richter">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<link rel="stylesheet" href="css/screen.css" media="screen" type="text/css">
<link rel="stylesheet" href="css/print.css" media="print" type="text/css">
<style type="text/css">
<!--
@media screen {
 div.m a#home {border:1px solid #007070; border-bottom:0 none; background-color:#F0F0F0;}
}
-->
</style>
</head>
<body>
<p class="va"> </p>
<div class="m">
 <a href="#" id="home"><span>heimseite</span></a>
 <a href="#" id="doku"><span>dokumente</span></a>
 <a href="#" id="mail"><span>kontakt</span></a>
</div>
<div class="i">
 <div class="t">
  Test
 </div>
</div>
</body>
</html>

screen.css:

* {font-family:monospace;}

html, body {height:100%; width:100%; margin:0; padding:0; background-color:#FFF;}

/*Für MSIE5.x, wegen der Unfähigkeit margin:auto zu interpretieren.*/
body {text-align:center;}

div.m {width:632px; height:64px; padding:0 1px 0 0; margin:0 auto 0 auto; background-color:#FFF; text-align:left;}

div.m a {display:block; width:210px; height:64px; text-decoration:none; text-align:left; float:left; color:#007070; margin:0; padding:0; border-bottom:1px solid #007070;}

div.m a:link {color:#007070;}
div.m a:visited {color:#005050;}

/*Für alle, die über @media kommen*/
div.m a:hover {color:#00B0B0; font-weight:bold; background-color:#F0F0F0;}
/*Für CSS2-Browser, speziell Opera6, der bei Änderung des Hintergrundes das Hintergrundbild verschluckt.*/
html>body div.m a:hover {color:#00B0B0; font-weight:bold; background-color:transparent;}
/*Für CSS2-Browser, außer Opera6*/
head:first-child+body div.m a:hover {color:#00B0B0; font-weight:bold; background-color:#F0F0F0;}

div.m a:active {color:#C04040;}
div.m a:focus {color:#00B0B0;}

/*Ausgangszustand*/
div.m a#home {background-image:url(home.gif); background-repeat:no-repeat;}
/*Für alle, die über @media kommen*/
div.m a#home:hover {background-image:url(homehover.gif); background-repeat:no-repeat;}
/*Für CSS2-Browser, speziell Opera6, der bei Änderung des Hintergrundes das Hintergrundbild verschluckt.*/
html>body div.m a#home:hover {background-image:none;}
/*Für CSS2-Browser, außer Opera6*/
head:first-child+body div.m a#home:hover {background-image:url(homehover.gif); background-repeat:no-repeat;}

/*Ausgangszustand*/
div.m a#doku {background-image:url(doku.gif); background-repeat:no-repeat;}
/*Für alle, die über @media kommen*/
div.m a#doku:hover {background-image:url(dokuhover.gif); background-repeat:no-repeat;}
/*Für CSS2-Browser*/
html>body div.m a#doku:hover {background-image:none;}
/*Für CSS2-Browser, außer Opera6*/
head:first-child+body div.m a#doku:hover {background-image:url(dokuhover.gif); background-repeat:no-repeat;}

/*Ausgangszustand*/
div.m a#mail {background-image:url(mail.gif); background-repeat:no-repeat;}
/*Für alle, die über @media kommen*/
div.m a#mail:hover {background-image:url(mailhover.gif); background-repeat:no-repeat;}
/*Für CSS2-Browser*/
html>body div.m a#mail:hover {background-image:none;}
/*Für CSS2-Browser, außer Opera6*/
head:first-child+body div.m a#mail:hover {background-image:url(mailhover.gif); background-repeat:no-repeat;}

div.m a span {display:block; padding:0; padding-top:35px; padding-left:15px; font-size:20px;}

div.i {width:631px; padding:0; margin:0 auto 0 auto; background-color:#F0F0F0; border:1px solid #007070; border-top:0 none; clear:left;}

p.va {padding:0; margin:0; font-size:5px; line-height:5px;}

div.t {padding:10px; text-align:left;}

viele Grüße

Axel

[KD-one]

Hallo,

Zur Erklärung: Im Menü wird per CSS-hover die Textfarbe auf die Hintergrundfarbe geändert und per onMouseOver sollte der Hintergrund in die Textfarbe(u.U. auch entsprechend eingefärbtes Bild) konvertiert werden. Das funktioniert in Mozilla, Firebird und IE, der Opera 6.04 ändert aber nur die Textfarbe, wodurch die Links natürlich unsichtbar werden.
Also interpretiert Opera 6.x das Script doch.

Nein, eben nicht.
Der hovereffekt des Textes hat nichts mit dem Script zu tun, der wird alleine über a:hover realisiert. Im Script oder mit dem Script wird nur eine Klasse getauscht, in der die jeweiligen Hintergrundbilder/-farben definiert sind. Mit dem Text haben diese Klassen nichts zu tun.

Das Problem ist hier nicht DOM, sondern die Unfähigkeit der Opera 6.x mit dynamischen Veränderungen von CSS-Hintergründen umzugehen. Sie setzen, soweit ich weiß, bei jeder dynamischen Änderung der CSS-Eigenschaft background, egal ob über background, background-image oder background-color, die background-Werte wieder auf default (-imange:none, -color:transparent).

Grundsätzlich kann ich dir folgen und halte deine Ausführungen auch für logisch, allerdings macht es der 6.04 etwas anders. Er rührt das(die) Hitergrundbild/-farbe nicht an, sondern belässt diese im Ursprungszustand. Wenn der Hintergrund weiss würde (weil mein Seitenhintergrund weiss ist), würde der Link wenigstens nicht unsichtbar werden, sondern wäre wenigstens noch, wenn auch schlecht, lesbar.

Ich habe das mal so, mit einer CSS-Weiche, gelöst:

Das erscheint mir aber sehr viel Aufwand, da wäre es einfacher, den Mouseeffekt gleich mit Bildern zu realisieren, da bräuchte ich dann nicht mit Hintergrundbildern arbeiten. Die Bildgrößen wären vertretbar.
Warum ich dieses Konstrukt geschaffen habe? Nun, ich wollte den Hovereffekt über alle drei Ebenen aufrecht erhalten, um den Dateipfad im Menü anzuzeigen. Das ist imho mit CSS alleine nicht realisierbar.

Gruß

Kurt

[wahsaga]

hi,

Warum ich dieses Konstrukt geschaffen habe? Nun, ich wollte den Hovereffekt über alle drei Ebenen aufrecht erhalten, um den Dateipfad im Menü anzuzeigen. Das ist imho mit CSS alleine nicht realisierbar.

das wäre m.e. in einem modernen browser nur mit css durchaus realisierbar - aber dann schraubt man sich wieder an den workarounds für redmonds wunderkind dumm und dämlich ...

gruss,
wahsaga

[KD-one]

Hallo,

hi,

Warum ich dieses Konstrukt geschaffen habe? Nun, ich wollte den Hovereffekt über alle drei Ebenen aufrecht erhalten, um den Dateipfad im Menü anzuzeigen. Das ist imho mit CSS alleine nicht realisierbar.
das wäre m.e. in einem modernen browser nur mit css durchaus realisierbar - aber dann schraubt man sich wieder an den workarounds für redmonds wunderkind dumm und dämlich ...

Interessanter Gedanke. Als ich das Menü entworfen habe, war ich noch ziemlich auf den IE fixiert und habe naturgemäß darauf geachtet, daß es vor allem dort funktioniert. Das hat sich nicht geändert, imho hat er immer noch mit Abstand den größten Marktanteil, aber meine Beweggründe sind nun andere. Allerdings machen mir die Workarounds für den Opera schon Kopfschmerzen, sodaß ich stark überlege, ob ich mir sowas überhaupt noch antun sollte.

Gruß

Kurt

[wahsaga]

hi,

Allerdings machen mir die Workarounds für den Opera schon Kopfschmerzen, sodaß ich stark überlege, ob ich mir sowas überhaupt noch antun sollte.

für die 6er version des opera würde ich defintiv sagen, lohnt es sich nicht mehr.
für den gilt mittlerweile das gleiche, wie für den netscape 4: es sollte benutzbar sein (dazu kann auch einen menüalternative, die die links als textlinks anbietet, ausreichen), alles andere, also vor allem schönes aussehen, ist schön, wenn es sich in dieser version zufällig auch einstellt - wenn nicht, dann würde ich keinen zusätzlichen aufwand dafür mehr betreiben.

meiner meinung nach kann man bei opera-nutzern von einer viel höheren bereitschaft zum upgraden ausgehen, als bei IE nutzern.
deshalb: opera 6 ist ziemlich weg vom fenster.

gruss,
wahsaga

[KD-one]

Hallo,

hi,

Allerdings machen mir die Workarounds für den Opera schon Kopfschmerzen, sodaß ich stark überlege, ob ich mir sowas überhaupt noch antun sollte.
für die 6er version des opera würde ich defintiv sagen, lohnt es sich nicht mehr.
für den gilt mittlerweile das gleiche, wie für den netscape 4: es sollte benutzbar sein (dazu kann auch einen menüalternative, die die links als textlinks anbietet, ausreichen), alles andere, also vor allem schönes aussehen, ist schön, wenn es sich in dieser version zufällig auch einstellt - wenn nicht, dann würde ich keinen zusätzlichen aufwand dafür mehr betreiben.

meiner meinung nach kann man bei opera-nutzern von einer viel höheren bereitschaft zum upgraden ausgehen, als bei IE nutzern.
deshalb: opera 6 ist ziemlich weg vom fenster.

Ja, das glaube ich dir gerne. Allerdings funktioniert das Menü jetzt im 6.04 bestens, bis auf die Hintergrundgeschichte.
Was mir viel mehr Sorgen bereitet, ist, daß der 7er anscheinend wieder von vorne anfängt, die Skala der möglichen Probleme durchzuspielen. Das scheint mir nun aber, in Anbetracht der Häufigkeit der Opera-Nutzer,  ein wenig viel Aufwand, nun wieder von vorne mit der Suche nach neuen Workarounds zu gehen, insbesondere deshalb, weil sämtliche Änderungen für den 6er nun für den 7er anscheinend völlig nutzlos geworden sind... *hmpf*

Gruß

Kurt

[wahsaga]

hi,

Was mir viel mehr Sorgen bereitet, ist, daß der 7er anscheinend wieder von vorne anfängt, die Skala der möglichen Probleme durchzuspielen.

die rendering-engine wurde für die version 7 komplett neu geschrieben, dass workarounds für bugs der 6er version da nicht mehr unbedingt praktikabel sind, leuchtet also ein. das ein paar neue bugs dazugekommen sein mögen, ist bei der überragenden gesamtqualität der neuen engine (hat wie der gecko vom mozilla auch einen eigenen namen, ich glaube es war "presto") für mich durchaus akzeptabel.

gruss,
wahsaga

[KD-one]

Hallo wahsaga,

Was mir viel mehr Sorgen bereitet, ist, daß der 7er anscheinend wieder von vorne anfängt, die Skala der möglichen Probleme durchzuspielen.
die rendering-engine wurde für die version 7 komplett neu geschrieben, dass workarounds für bugs der 6er version da nicht mehr unbedingt praktikabel sind, leuchtet also ein. das ein paar neue bugs dazugekommen sein mögen, ist bei der überragenden gesamtqualität der neuen engine (hat wie der gecko vom mozilla auch einen eigenen namen, ich glaube es war "presto") für mich durchaus akzeptabel.

Ich hab mir nun mal den 7er runtergeladen und werde mit Ihm mal ein wenig rumexperimentieren.
Vielleicht schaffe ich es damit, die Seite zum Laufen zu bringen.

Gruß

Kurt