probleem met z order in Firefox

[Verwijderd]

Ik heb een probleempje met het niet zichtbaar zijn van een object wat op de voorgrond zou moeten staan. Op de achtergrond draait een Flash filmpje. In Opera en IE werkt het prima, maar in FF dus niet. Waarom???

http://www.daanooms.nl

In Firefox wordt de Flash movie boven het geel zwarte geval getoond (is niet de bedoeling). Terwijl de Flash movie z-index: -1; heeft en dat geel zwarte ding z-index: 100; en de w mode van de flash film op transparant staat.

Weet iemand hoe dat opgelost kan worden?

CSS flash filmpje

code:

div#mmets {
    top             : 20px;
    z-index         : -1;
    width           : 360px;
    height          : 288px;
    float           : left;
    border          : 2px solid red;
}

CSS geelzwarte geval

code:

div#korhoen {
    z-index         : 100;
    width           : 305px;
    height          : 297px;
    float           : left;
    border          : 2px solid red;
    margin-top      : -40px;
    margin-left     : 60px;
}

code:

.clear {
    clear           : both;
}

xhtml

code:

<div id="site">
    <div id="mmets">
        <script language="JavaScript" type="text/javascript">
        <!-- 
        var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
        if(hasRightVersion) {  // if we've detected an acceptable version
            var oeTags = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'
         + 'width="360" height="288"'
         + 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">'
         + '<param name="movie" value="http://www.daanooms.nl/mmets.swf" /><param name="loop" value="true" /><param name="quality" value="high" /><param name="wmode" value="transparent">'
         + '<embed src="http://www.daanooms.nl/mmets.swf" wmode="transparent" loop="true" quality="high" bgcolor="#000000" '
         + 'width="360" height="288" name="mmets" align="middle"'
         + 'play="true"'
         + 'loop="true"'
         + 'wmode="transparent"'
         + 'quality="high"'
         + 'allowScriptAccess="sameDomain"'
         + 'type="application/x-shockwave-flash"'
         + 'pluginspage="http://www.macromedia.com/go/getflashplayer">'
         + '<\/embed>'
         + '<\/object>';
            document.write(oeTags);   // embed the flash movie
         } else {  // flash is too old or we can't detect the plugin
          var alternateContent = '<p>[img]"http://www.daanooms.nl/images/waarschuwingmmets.jpg"></p[/img]'
            + 'This content requires the Macromedia Flash Player.'
            + '<a href=http://www.macromedia.com/go/getflash/>Get Flash</a>';
         document.write(alternateContent);  // insert non-flash content
         }
        // -->
        </script>
        <noscript>
            // Provide alternate content for browsers that do not support scripting
            // or for those that have scripting disabled.
            <p>[img]"http://www.daanooms.nl/images/waarschuwingmmets.jpg"></p[/img] This content requires the Macromedia Flash Player.
            <a href="http://www.macromedia.com/go/getflash/">Get Flash</a>      
        </noscript>
    </div>  
    
    <div id="dehaas">
        <a href="" onclick="winBRopen('http://www.daanooms.nl/dehaas/index.htm','dehaas','577','477','no');return false">
        [img]"http://www.daanooms.nl/images/dehaasklein.jpg"[/img]</a>
    </div>
    
    <div class="clear">
    </div> 
    
    <div id="korhoen">
      <a href="http://www.daanooms.nl/korhoen/index.htm">
      [img]"http://www.daanooms.nl/images/korhoenkleiner.gif"[/img]</a>
    </div>  
    
    <div id="button">
      <a href="http://www.daanooms.nl//cement/index.htm">
      [img]"http://www.daanooms.nl/images/buttons/cementgroenwit.gif"[/img]</a>
    </div>
    
    <div class="clear">
    </div>
     
</div>

[ Voor 138% gewijzigd door Verwijderd op 10-03-2006 14:51 ]

[crisp]

Geen negatieve z-index gebruiken...

[Verwijderd]

'k Heb 't veranderd, maar het helpt niet. http://www.daanooms.nl/

code:

div#mmets {
    margin-top      : 20px;
    z-index         : 0;
    width           : 360px;
    height          : 288px;
    float           : left;
    border          : 2px solid red;
}

Volledige CSS: http://www.daanooms.nl/stijl.css

[BtM909]

En open nou niet voor elk probleempje een topic. Je kon toch ook gewoon verder gaan in het andere topic?

[orf]

div#korhoen {
position: relative;
}

[Verwijderd]

Dank je wel Orf.

Zou je kunnen toelichten wat die toevoeging, position:relative, nu voor de z index doet? Dat begrijp ik niet, maar ik zie dat het werkt.

En ik begreep dat position:relative problemen kan geven met float:left in hetzelfde element, is dat zo?

[crisp]

z-index werkt alleen op elementen die niet static gepositioneerd zijn

[Verwijderd]

Das vreemd. Ik haal net alle borders van de divs weg, en alleen in Firefox verspringt de button weer naar de volgende regel.

Terwijl met de borders erbij als in border: 2px red; alles mooi op z'n plek blijft staan???

Hier is de pagina met borders om de div's: http://www.daanooms.nl/index2.htm

Pagina zonder borders: http://www.daanooms.nl

EDIT: op het moment dat ik de border style van de container weghaal, als in border: 2px red;, dan wordt in FF de groene button naar de volgende regel verplaatst. In IE en Opera gebeurt dit niet. ??

Css container (Zo staat alles goed, op z'n plek).

code:

div#site {
width        : 762px;
margin-left : auto;
margin-right   : auto;
padding-left    : 40px;
text-align  : left;
border          : 2px red;
}

Als ik hiervan maak:

code:

div#site {
width        : 762px;
margin-left : auto;
margin-right    : auto;
padding-left    : 40px;
text-align   : left;
}

Dan verschuift opeens de naast gelegen Div (groene button) naar de volgende regel.

Maar die opmaak aanpassing zou toch niks te maken moeten hebben met de positionering van die div?

[ Voor 114% gewijzigd door Verwijderd op 10-03-2006 16:11 ]

[orf]

Bij mij wijzigt niets? (op 2px verschuiving door blauwe border na)

[Verwijderd]

Zijn bij jou beide pagina hetzelfde (behalve de blauwe border van 2px)?
http://www.daanooms.nl/index.htm
http://www.daanooms.nl/index2.htm

Bij mij, in Firefox, verspring bij de eerste pagina dat geel zwarte ding <Div id="korhoen"> naar rechts, waardoor de groene button <Div id="button" naar de volgende regel verspringt.

[ Voor 14% gewijzigd door Verwijderd op 10-03-2006 16:18 ]

[orf]

Bij mij niet
(FF 1.5.0.1)

[Verwijderd]

Bij mij zijn de pagina's niet hetzelfde.

FF 1.0.7

Zie de printscreens:
Met border: http://www.daanooms.nl/images/index2.gif
Zonder border:http://www.daanooms.nl/images/index.gif

[ Voor 62% gewijzigd door Verwijderd op 10-03-2006 16:25 ]

[Verwijderd]

Tja, net geupdate en alles ok.

Heb je een advies om dit soort browser / versie problemen te voorkomen?. Ik kan alles in Flash gaan maken. Dan is de vraag vooral of de Flashplayer geinstalleerd is, maar dan voelt het anders...

[ Voor 12% gewijzigd door Verwijderd op 10-03-2006 16:43 ]