• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Probleme mit Z-index bei einen Frame über nen Flash

Fiesi

Neues Mitglied
Moin erstmal...

Ich hoffe ihr könnt mir mal weiter helfen bei meinen Problem.
Ich habe nen Flashchat am laufen - und über den Flash will ich nen iframe per Z-Index an "anzeigen" lassen.
In Chrome und M$ Edge funzt alles soweit - nur im FireFox nicht.
Der eine Frame erscheint nur kurz und ist dann weg - und bei den Sidepanel fehlt nen kleines Stück (was in Chrome und Co. aber auch da ist)

Mag sein das es nicht ganz so sauber geschrieben ist
grin.png
der PHP Kram war vorher schon so drin
grin.png


hier der Code:
HTML:
<?php
/**
* @package Module 123 Flash Chat for Joomla! 3.0
* @version $Id: default_flash.php  2013-02-1$
* @author Cheney
* @copyright (C) 2001-2013 - TOPCMM SOFTWARE
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
* @websites http://www.123flashchat.com
* @technical support http://www.123flashchat.com/support.html
**/
// Check to ensure this file is included in Joomla!
// No direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<html>
  <head>
    <title>BigOne.1 - Chat</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  </head>

  <style type="text/css">
        html,body {
            height:100%;
        }
        body {
            margin:0;
            padding:0;
            overflow:hidden;
        }
        #main{
             padding:0px;
        }
        body.contentpane{
            margin:0px;
            line-height:0;
        }
        .sidecontentpullout {
            background-color: Grey;
            z-index:10;
            color: Orange;
            top:150px;
            padding: 4px 3px;
            -moz-border-radius-bottomleft: 1em;
            -moz-border-radius-topleft: 1em;
            -webkit-border-bottom-left-radius: 1em;
            -webkit-border-top-left-radius: 1em;
            border-bottom-left-radius: 1em;
            border-top-left-radius: 1em;
        }
        .sidecontentpullout:hover {
            background-color: #000000;
            color: Red;
            top:150px;
            z-index:10;
        }
        .sidecontent {
            background-color: Black;
            color: Red;
            -moz-border-radius-bottomleft: 1em;
            ;webkit-border-bottom-left-radius: 1em;
            z-index:10;
            border-bottom-left-radius: 1em;
            top:150px;
        }
        .content{
            padding-left: 20px;
            height: 450px;
            width: 800px;
            top:150px;
            z-index:10;
        }
        a{
            color:#fff;
            font-weight:bold;
            }
        .player{
            position:fixed;
            align:center;
            height:65px;
            width:400px;
            z-index:10;
            left:-7px;
            top:-5px;
        }
        .titel{
            position:absolute;
            height:70px;
            width:700px;
            z-index:10;
            left:50%;
            top:9px;
            margin-left: -350px;
         }
    </style>

<div class="player">
<iframe name="player" src="http://bigone1.net/player/index.html" WIDTH="400" height="65" style="border:none;" rel="border:none;"  scrolling="no"></iframe>
</div>
<div class="titel">
<iframe name="titel" src="http://www.bigone1.net/planchat1/index.php?page=infos&mode=onairbox" WIDTH="700" height="30" style="border:none;" scrolling="no"></iframe>
</div>

<div id="maincontent">
<div class="side" title="  W u n s c h b o x ! ">
<div class="content">
<iframe src="http://www.bigone1.net/planchat1/index.php?page=wunschbox" WIDTH="825" height="450" style="border:none;" scrolling="auto"></iframe>
</div>
</div>
</div>

<script type="text/javascript" src="http://Bigone1.net/js/jquery.min.js"></script>
<script type="text/javascript" src="http://Bigone1.net/js/jquery.sidecontent.js"></script>
<script type="text/javascript">
$(".side").sidecontent();
</script>
<?php if($this->fullscreen){ ?>
<?php }else{ ?>
    <div align="center" id="fchat">
<?php } ?>   
    <script src="<?php echo $this->client_location; ?>123flashchat.js"></script>
    <object width="<?php echo $this->width; ?>"  height="<?php echo $this->height; ?>" id="topcmm_123flashchat" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,19,0" type="application/x-shockwave-flash">
        <param name=movie value="<?php echo $this->chaturl; ?>" allowscriptaccess="always">
        <param name=quality value="high">
        <param name="menu" value="false">
        <param name="allowscriptaccess" value="always">
        <embed src="<?php echo $this->chaturl; ?>" width="<?php echo $this->width; ?>" height="<?php echo $this->height; ?>" quality="high" allowscriptaccess="always" menu="false" type="application/x-shockwave-flash" pluginspace="http://www.macromedia.com/go/getflashplayer"  name="topcmm_123flashchat"></embed>
    </object>
<?php if($this->fullscreen){ ?>
<?php }else{ ?>
    </div>
<?php } ?>
 
Aber wieso hast nur der FF damit Probleme?
Der Player z.b. geht ja unter FF auch. Aber die Titelanzeige nicht.

Der PHP Schnipsel ist leider mit nötig, da dort der automatische login mit bei ist.
hab den WMODE mal zugefügt - leider unter FF keine veränderung
 
Aber die Titelanzeige nicht.
Wenn es hier um die Klasse .titel geht, stocke ihren z-index auf:
CSS:
.titel{
  ...
  z-index:11; /* ehemals z-index:10 */
  ...
}
Falls das oder eine noch höhere Schichtposition nicht weiterhelfen, wäre ein Link zur Seite hilfreich, da sich lokal der Chat nicht laden/öffnen/starten lässt.
BigOne.1 - Chat schrieb:
Restricted Access
 
Zuletzt bearbeitet:
Hallo,
Das habe ich auch schon versucht, den z-index zu erhöhen.

Das wäre die URL - wie gesagt bei Chrome funzt alles - bei FF nur am anfang ganz kurz und dann ist der Titel weg und nen teil der Sidebar. Abe das sieht man ja dann selber.
 
Firefox -> Rechtsklick über dem Element -> "Element untersuchen" wählen, und im integrierten DeveloperTool nach und nach mal die einzelnen CSS-Eigenschaften deaktivieren, um zu schauen, wie sich das Element danach so verhält :)

Bei position:absolute (in Kombination mit margin-left:-350px) macht es dann "klick" :cool:

Frag mich aber bitte nicht, warum das nur bei diesem Element der Fall ist o_O:D
 
Hmm, ja aber wenn ich es nicht absolute mache, wird der Flashchat ja runtergetan und ich habe oben den rand wieder.

Was mich wundert gerade, nehme ich den Z-Index bei den Player raus, bleibt der auch im vordergrund. *grübel*

ich hasse FF immer mehr :D lach
 
Zuletzt bearbeitet:
Zurück
Oben