Chrome specific issue with z-index and flash
Actually, have you looked at the other 'wmode' available? I think there's a "normal" value too, which if I recall correctly will set your Flash object flat on a layer (like it should :P) in its current container.
So just make sure its within it's own DIV tag too and has a z-index setup as well.
HTML Flash embedding ain't really something I do on a daily basis (even less tested in Chrome) but hopefully this will shed some light.
Google chrome not obeying z-index when inside a fixed element.
The problem is that Chrome creates a new stacking context for elements that don't have a z-index
set (default is auto). So your sidebar has a z-index
of 0 which makes it (and all of its childrens) disappear since you've specified a higher z-index for your #top
container.
To solve the problem, give the sidebar a z-index
higher than the one from #top
:
#sidebar{
width:inherit;
position: fixed;
display: block;
z-index: 501;
}
DEMO
Flash lay over position: fixed element in chrome
Its not a problem of your CSS but of your swf object. You have to set the wmode
of your embed to transparent
. Otherwise it will lay over all other elements.
<object>
<embed wmode="transparent" height="550" width="733">
</object>
Flash object is not working after update of google chrome
This issue may be caused by the dreaded 'Pepper' Flash Player, which has also been breaking Flash content for me in Chrome.
I don't know what the solution is for your broader audience of Chrome visitors, but to fix the problem locally:
- In a new tab, go to the URL: chrome://plugins/
- Find the entry for 'Flash' and expand [+] Details if not already expanded
- Look for the entry where the location of the plugin ends: ...PepperFlash\pepflashplayer.dll and click 'Disable'
- You will hopefully have at least one other instance of Flash Player installed (if not, try installing a debug player from Adobe's website), and enable one of these.
I should mention, the Pepper Flash Player seems to regularly re-enable itself, possibly whenever Chome auto-updates itself, and I find myself having to repeat this process every couple of days.
Flash overlapping / wmode Issue
First of all, this problem is not reproductive in Safari 5.1.2 and Firefox 9.0.1 (Mac versions). Without knowing your browser, I can only say that since you are using an iframe
tag to point a page where Flash is actually embedded, wmode
has no effect in your current DOM document, as it is not a valid property of iframe
tag (it belongs to embed
tag). You'd need to set css property display
to block
value on the iframe
tag in order to to make a browser treat your iframe
as a standard layout object. Then, you could set the layer distribution and positioning via CSS.
Google Chrome swf issue with allow button
Will digging into this i found the solution of my question.
The container of the flash object did have a style of "border-radius" removing this solved the issue.
Related Topics
CSS Fluid Layout: Margin-Top Based on Percentage Grows When Container Width Increases
Grid Layout on <Fieldset>... Bug on Chrome
How to Force Firefox to Render Textarea Padding the Same as in a Div
How to Make Text Appear on Next Line Instead of Overflowing
Sass and Combined Child Selector
How to Select First 2 <Li> Elements Using CSS
Font-Weight Is Not Working Properly
Queryselector with Nested Nth-Child in Chrome Doesn't Appear to Work
What's the Meaning of "Propagated to the Viewport" in the CSS Spec
CSS Problem with Background-Attachment:Fixed;
CSS Use Color from Another Class
How to Add 1Px Border to a Div Whose Width Is a Percentage