Sophia: Flash-Objekt in Firefox nicht anwählbar

SELF-Forum

Flash-Objekt in Firefox nicht anwählbar

Sophia
– Informationen zu den Bewertungsregeln

Hallo allerseits,
dies ist mein erster Beitrag in einem Forum und ich hoffe ich werde allen Ansprüchen gerecht..

Mein Problem ist folgendes:
Ich habe einen Play-Button auf meine Website eingebaut der aber leider keine Musik abspielt, wenn man drauf klickt. Der Button ist eine Shockwave-Flash-Applikation (mit der ich mich leider - noch - nicht auskenne)...

Ach ja und noch 2 Dinge:
1. In Safari geöffnet, gibt es kein Probleme mit dem Button.
2. Wenn ich das DIV mit der ID "play sound" z.B. weiter nach rechts schiebe, kann man es anklicken und es funktioniert auch in Firefox...
3. Wenn ich den z-index des DIVs mit der ID "play sound" auf 999999 setze, kann man es trotzdem nicht anklicken..

Ich hoffe der Code reicht soweit, ansonsten sagt mir bitte Bescheid was ihr genau braucht!

HIER DER HTML-CODE:

  
<body>  
  
<div id="wrapper">  
  
<div id="content">  
  
		<h2>Der Show-Mittschnitt</h2>  
  
		  
		<div id="einleitung"><p>Die DVD zur Show.</p></div>  
		  
		<div id="inhalt">  
			  
			<div id="v_mitschnitt"> <iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/cOXoshXJq-M?rel=0&autohide=1&autoplay=1&controls=0&loop=1&playlist=cOXoshXJq-M&showinfo=0" frameborder="0" allowfullscreen></iframe> </div>	  
			  
  
			<div id="play_sound"> <object type="application/x-shockwave-flash" data="audio/emff_easy_glaze.swf" width="32" height="32">  
 				<param name="movie" value="audio/emff_easy_glaze.swf" />  
  
 				<param name="FlashVars" value="src=audio/mitschnitt/Jonglage.mp3" />  
			</object> </div>  
			  
		  
			<div id="tv"></div>  
  
			<div id="gleichung"><img src="images/leistungen/mitschnitt/gleichung.png" width="550" height="105" alt="eine einfache Gleichung - schaumal plua circus soluna gleich glücklich" /></div>  
  
			<div id="kamera"><img src="images/leistungen/mitschnitt/Kamera.png" width="180" height="230" alt="eine Videokamera" /></div>  
  
			<div id="mehr_infos">  
				<p>... mehr Infos gibt es unter:</p></div>  
  
			<div id="schaumal_logo"><a href="http://www.schaumal.biz" target="_new"><img src="images/leistungen/mitschnitt/schaumal-Logo.png" width="200" height="84" alt="das Schaumal!-Logo" /></a></div>  
  
		</div>  
		  
		<div id="platzhalter"></div>  
	  
</div>  
	  
<div id="footer"></div>  
  
</div>  
  
</body>

HIER DER CSS-CODE:

  
@charset "UTF-8";  
  
body {  
	margin-left: 0px;  
	margin-top: 0px;  
	margin-right: 0px;  
	margin-bottom: 0px;  
	font-family: 'Nobile', arial, serif;  
	color: #326699;  
	background-color: #FFF;  
	background-image: url(../images/main/Sterne.gif);  
	background-repeat: no-repeat;  
	background-position: center 8px;  
}  
  
a:link {  
	text-decoration: none;  
	outline: none;  
	border: none;  
}  
  
a:visited {  
	text-decoration: none;  
	outline: none;  
	border: none;  
}  
  
a:hover {  
	text-decoration: none;  
	outline: none;  
	border: none;  
}  
  
a:active {  
	text-decoration: none;  
	outline: none;  
	border: none;  
}  
  
a:focus {  
	text-decoration: none;  
	outline: none;  
	border: none;  
}  
  
#content a:link {  
	text-decoration: none;  
	outline: none;  
	border: none;  
	color: #FFF;  
}  
  
#content a:visited {  
	text-decoration: none;  
	color: #FFF;  
	outline: none;  
	border: none;  
}  
  
#content a:hover {  
	text-decoration: none;  
	color: #FFF;  
	outline: none;  
	border: none;  
	font-weight: bold;  
}  
  
#content a:active {  
	text-decoration: none;  
	color: #FFF;  
	outline: none;  
	border: none;  
}  
  
#content a:focus {  
	text-decoration: none;  
	color: #FFF;  
	outline: none;  
	border: none;  
	font-weight: bold;  
}  
  
#wrapper {  
	width: 940px;  
	margin-left: -470px;  
	position: absolute;  
	left: 50%;  
	margin-top: 30px;  
	top: 0px;  
}  
  
#header h1 {  
	background-image: url(../images/main/logo.gif);  
	height: 61px;  
	background-repeat: no-repeat;  
	text-indent: -9999px;  
	margin: 0px;  
	padding: 0px;  
}  
  
#content {  
	background-image: url(../images/main/schatten.gif);  
	background-repeat: repeat-y;  
	padding-top: 60px;  
	padding-right: 12px;  
	padding-bottom: 10px;  
	padding-left: 12px;  
}  
  
#content h2 {  
	font-size: 16px;  
	color: #326699;  
	margin-left: 30px;  
}  
  
#content p {  
	font-size: 14px;  
	margin-left: 35px;  
	margin-right: 35px;  
}  
  
#footer {  
	background-image: url(../images/main/footer.jpg);  
	background-repeat: no-repeat;  
	height: 183px;  
}  
  
img {  
	border-top-style: none;  
	border-right-style: none;  
	border-bottom-style: none;  
	border-left-style: none;  
}  
  
#menu-sterne {  
	position: absolute;  
	z-index: 0;  
}  
  
.fett {  
	font-weight: bold;  
}  
  
.rot {  
	color: #CF3C20;  
}  
  
#platzhalter {  
	height: 210px;  
}  
  
#einleitung {  
	/* [disabled]width: 620px; */  
}  
  
#inhalt {  
	height: 400px;  
}  
  
#v_mitschnitt {  
	position: absolute;  
	height: 390px;  
	width: 640px;  
	left: 114px;  
	top: 382px;  
	z-index: 1;  
}  
  
#play_sound {  
	position: absolute;  
	z-index: 4;  
	left: 680px;  
	top: 636px;  
	height: 32px;  
	width: 32px;  
}  
  
#tv {  
	position:absolute;  
	left:21px;  
	top:321px;  
	width:900px;  
	height:548px;  
	z-index:2;  
	background-image: url(../images/leistungen/mitschnitt/TV.png);  
	background-repeat: no-repeat;  
}  
  
#gleichung {  
	position: absolute;  
	z-index: 3;  
	height: 105px;  
	width: 550px;  
	left: 199px;  
	top: 287px;  
}  
  
#kamera {  
	position: absolute;  
	height: 230px;  
	width: 180px;  
	left: -16px;  
	top: 665px;  
	z-index: 3;  
}  
  
#mehr_infos {  
	position: absolute;  
	z-index: 3;  
	height: 58px;  
	width: 277px;  
	left: 504px;  
	top: 853px;  
}  
  
#schaumal_logo {  
	position: absolute;  
	z-index: 3;  
	height: 84px;  
	width: 200px;  
	left: 733px;  
	top: 813px;  
}

Herzlichen Dank,
Sophia

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Flash-Objekt in Firefox nicht anwählbar

    Der Martin
    – Informationen zu den Bewertungsregeln

    Hallo,

    dies ist mein erster Beitrag in einem Forum und ich hoffe ich werde allen Ansprüchen gerecht..

    wenn du Kritik verträgst, kannst du auch gern den einen oder anderen Anspruch außer Acht lassen. ;-)

    Ich habe einen Play-Button auf meine Website eingebaut der aber leider keine Musik abspielt, wenn man drauf klickt. Der Button ist eine Shockwave-Flash-Applikation (mit der ich mich leider - noch - nicht auskenne)...

    Von Flash habe ich auch keine Ahnung. Aber ...

    Ach ja und noch 2 Dinge:

    1. In Safari geöffnet, gibt es kein Probleme mit dem Button.
    2. Wenn ich das DIV mit der ID "play sound" z.B. weiter nach rechts schiebe, kann man es anklicken und es funktioniert auch in Firefox...

    ... das lässt mich vermuten, dass du ein CSS-Problem hast. Konkret habe ich den Verdacht, dass das Flash-Objekt im FF durch irgendein anderes Element überlagert wird. Das kann durch den übermäßigen Gebrauch von absoluter Positionierung schnell passieren.
    Schnapp dir am besten mal Firebug (eine der nützlichsten Firefox-Extensions!) und schau dir an, wie die einzelnen Elemente tatsächlich zu liegen kommen. Oder gib deinen div-Elementen zum Testen mal unterschiedliche Hintergrundfarben, dann siehst du auch gleich, was sich wo in welcher Anordnung überlagert.

    Ich hoffe der Code reicht soweit, ansonsten sagt mir bitte Bescheid was ihr genau braucht!

    Ein Online-Beispiel, an dem man sich das Problem "live" anschauen kann, wäre *wesentlich* günstiger.
    Die div-Suppe ist übrigens schon irgendwie abschreckend ... :-(

    #wrapper {
    width: 940px;
    margin-left: -470px;
    position: absolute;
    left: 50%;
    margin-top: 30px;
    top: 0px;
    }

    Diese Art der Zentrierung ist ungünstig: Wenn das Browserfenster schmaler als 940px wird, ist der aus dem linken Rand herausragende Teil des Inhalts nicht mehr zugänglich. Setze lieber den linken und rechten margin auf auto, mehr braucht's nicht.

    img {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }

    Warum einfach, wenn's umständlich auch geht? Ein border: none; tät's auch.

    Wie gesagt: Den genauen Knackpunkt kann ich anhand der Code-Wüste nicht erkennen, aber bei den Unmengen an position:absolute habe ich kein gutes Gefühl.

    So long,
     Martin

    --
    Der Sinn einer Behörde besteht in ihrer Existenz.
      (alte Beamtenweisheit)
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Flash-Objekt in Firefox nicht anwählbar

      Sophia Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo Martin,
      danke für deine schnelle Antwort!

      wenn du Kritik verträgst, kannst du auch gern den einen oder anderen Anspruch außer Acht lassen. ;-)

      Vertrag ich schon - muss aber nicht sein :o)

      1. Wenn ich das DIV mit der ID "play sound" z.B. weiter nach rechts schiebe, kann man es anklicken und es funktioniert auch in Firefox...

      ... das lässt mich vermuten, dass du ein CSS-Problem hast. Konkret habe ich den Verdacht, dass das Flash-Objekt im FF durch irgendein anderes Element überlagert wird. Das kann durch den übermäßigen Gebrauch von absoluter Positionierung schnell passieren.

      Ja, das dachte ich auch.. Aber ich hab zum probieren mal den z-index des Elements auf 999 gesetzt und es hat sich trotzdem nichts geändert..

      Schnapp dir am besten mal Firebug (eine der nützlichsten Firefox-Extensions!) und schau dir an, wie die einzelnen Elemente tatsächlich zu liegen kommen. Oder gib deinen div-Elementen zum Testen mal unterschiedliche Hintergrundfarben, dann siehst du auch gleich, was sich wo in welcher Anordnung überlagert.

      Genial - DANKE!
      Eine super Extension!

      Ein Online-Beispiel, an dem man sich das Problem "live" anschauen kann, wäre *wesentlich* günstiger.

      Kein Problem, bitte sehr:
      www.sophiaswelt.com/test/mitschnitt.html

      --> Wenn du dir dort dann mal den CSS-Code von mitschnitt.css anschaust (nicht all.css) dann siehst du das es kein anderes Element gibt, das über dem z-index 4 liegt.

      Und jetzt kommt etwas was ich gar nicht mehr verstehe:
      Wenn ich in dem Firebug Ad-On die absolute Positionierung des DIVs (id play_sound)ausschalte und dann direkt wieder anschalte, funktioniert der Button einwandfrei!
      Ist das nicht komisch???

      Die div-Suppe ist übrigens schon irgendwie abschreckend ... :-(
      Diese Art der Zentrierung ist ungünstig.

      Danke sehr!
      Das habe ich nicht gewusst..

      Warum einfach, wenn's umständlich auch geht? Ein border: none; tät's auch.

      Und auch damit hast du recht, danke sehr!

      Herzlichen Gruss,
      Sophia

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Flash-Objekt in Firefox nicht anwählbar

        Der Martin
        – Informationen zu den Bewertungsregeln

        Hallo Sophia,

        wenn du Kritik verträgst, kannst du auch gern den einen oder anderen Anspruch außer Acht lassen. ;-)
        Vertrag ich schon - muss aber nicht sein :o)

        okay, gibt auch erstmal keinen Grund dazu. :-)

        1. Wenn ich das DIV mit der ID "play sound" z.B. weiter nach rechts schiebe, kann man es anklicken und es funktioniert auch in Firefox...
          ... das lässt mich vermuten, dass du ein CSS-Problem hast. Konkret habe ich den Verdacht, dass das Flash-Objekt im FF durch irgendein anderes Element überlagert wird. Das kann durch den übermäßigen Gebrauch von absoluter Positionierung schnell passieren.
          Ja, das dachte ich auch.. Aber ich hab zum probieren mal den z-index des Elements auf 999 gesetzt und es hat sich trotzdem nichts geändert..

        Mit Firebug sehe ich, dass div#play_sound und div#v_mitschnitt sich gegenseitig überlagern. Zwar hat div#play_sound den höheren z-index und müsste daher eigentlich im Vordergrund liegen, aber ich vermute, dass das iframe-Element hier die ganze z-Ordnung durcheinanderbringt.
        Vom Internet Explorer kenne ich das, dass ein iframe ungeachtet der sonstigen z-Ordnung alles andere überlagert; möglicherweise tickt Firefox auch so.

        Und jetzt kommt etwas was ich gar nicht mehr verstehe:
        Wenn ich in dem Firebug Ad-On die absolute Positionierung des DIVs (id play_sound)ausschalte und dann direkt wieder anschalte, funktioniert der Button einwandfrei!
        Ist das nicht komisch???

        Ja, allerdings. Sieht mir nach einem Firefox-Bug aus, aber ich kann es nicht mit Sicherheit sagen.

        Ciao,
         Martin

        --
        Nein, es ist nicht wahr, dass bei der Post Beamte schneller befördert werden als Pakete.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Flash-Objekt in Firefox nicht anwählbar

          O'Brien
          – Informationen zu den Bewertungsregeln

          Hi.

          Ja, allerdings. Sieht mir nach einem Firefox-Bug aus, aber ich kann es nicht mit Sicherheit sagen.

          In Opera 11.10 funktioniert der Knopf.

          Habe aber noch eine Anmerkung an Sophia:

          Die DVD zur Show - mit unserem Partner schaumal!

          "schaumal!" würde ich hervorheben, da es der Name eures Partners ist. Dann sieht man das Ausrufezeichen auch nicht mehr als Satzendezeichen an.

          Eine professionell erstellte DVD nicht nur eine schöne Erinnerung,

          Da fehlt ein "ist" nach der DVD.

          Unsere Shows sind damit ab 2011 absolut GEMA frei.

          "GEMA-frei" müsste es wohl heißen, wenn ich mich nicht irre.

          Schönen Sonntag noch!
          O'Brien

          --
          Frank und Buster: "Heya, wir sind hier um zu helfen!"
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Flash-Objekt in Firefox nicht anwählbar

            Sophia
            – Informationen zu den Bewertungsregeln

            Hi O'Brien,
            danke für deine Antwort.

            In Opera 11.10 funktioniert der Knopf.

            Und fürs testen.. Ich denke es liegt, wie schon vermutet, an dem iframe...

            "schaumal!" würde ich hervorheben, da es der Name eures Partners ist.

            Da fehlt ein "ist" nach der DVD.

            "GEMA-frei" müsste es wohl heißen, wenn ich mich nicht irre.

            Oh ja! Danke sehr! Wird sofort geändert!

            Schönen Sonntag noch!

            Dir auch - und auch einen schönen Samstag! ;o)

            Lieben Gruss,
            Sophia

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

        2. Flash-Objekt in Firefox nicht anwählbar

          Sophia
          – Informationen zu den Bewertungsregeln

          Hallo Martin,

          Vom Internet Explorer kenne ich das, dass ein iframe ungeachtet der sonstigen z-Ordnung alles andere überlagert; möglicherweise tickt Firefox auch so.

          Was? Wie kann das denn heutzutage noch sein?
          Das heisst ich muss mich damit abfinden das im IE die iframes immer alles überlagern?
          Das ist schlecht, denn 45% unserer Kunden nutzen den IE...

          Ja, allerdings. Sieht mir nach einem Firefox-Bug aus, aber ich kann es nicht mit Sicherheit sagen.

          Hmmm, OK, dann ist das wohl so.
          1.000 Dank fürs drüber schauen und mit rätseln!

          Lieben Gruss,
          Sophia

          PS: Bevor ich mit meiner ersten selbstgebastelten Website online gehe, würde ich sie gern noch einer Abschlussprüfung unterziehen.
          Hast du eine Idee wen ich mal fragen kann ob er mir dabei helfen kann?
          Ich denke es wird nicht viel sein, aber ich möchte gern alles richtig machen..
          Oder ist es in Ordnung meine Fragen hier ins Forum zu posten und einfach darauf zu warten das mir Leute helfen?

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln