Welcome to WebmasterWorld Guest from 18.204.227.250

Forum Moderators: not2easy

Message Too Old, No Replies

Pure CSS Pop up menus go behind flash object

Trouble with CSS menus and Div with Flash object

     
9:36 pm on Oct 3, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 29, 2006
posts:55
votes: 0


Hi,
I have used a very useful site to create a pure CSS pop up menu.
This is done and works fine.

This sits in a fixed width div (Header DIV) that is aligned central to the page.
Below this Header DIV is another div that is also of fixed width and aligned centrally(Content DIV).
Inside the Content DIV are various divs and images etc, one of which is a div floated right(Picture DIV) directly below the Header DIV.

Now, whilst I was constructing this page I had a jpeg image in the Picture DIV, and when the pop up menu went over the jpeg filled Picture DIV it did infact position the pop up menu above the jpeg image.

However, when I placed the SWF file in the Picture DIV the the pop up menu appears behind the SWF file.
I can't work this one out!

The doc type for the file is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


******POP UP MENU HTML******

<div id="menu_inner">

<ul>
<li><h2>PRODUCT 1</h2>

<ul>

<li><a href="content.html">Link 1.0</a></li>

<li><a href="content.html">Link 1.1</a></li>

<li><a href="content.html">Link 1.2</a></li>

</ul>

</li>

</ul>

<ul>
<li><h2>PRODUCT 2</h2>

<ul>

<li><a href="content.html">Link 2.0</a></li>

<li><a href="content.html">Link 2.1</a></li>

<li><a href="content.html">Link 2.2</a></li>

<li><a href="content.html">Link 2.3</a></li>

</ul>

</li>

</ul>

<ul>
<li><h2>PRODUCT 3</h2>

<ul>

<li><a href="content.html">Link 3.0</a></li>

<li><a href="content.html">Link 3.1</a></li>

</ul>

</li>

</ul>

<div class="clearer"></div><!-- Clearer -->

</div><!-- MENU INNER-->

**********POP UP MENU CSS**********

#menu {
width: 851px;
background: #eee url(images/nav_bar.jpg) 0 0 repeat-x;
float: left;
border-top: 1px solid white;
border-bottom: 1px solid white;
}

#menu_inner {
width: 25em;
margin: 0 auto;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 5em;
float: left;
}

#menu a, #menu h2 {
font: bold 11px arial, helvetica, sans-serif;
display: block;
margin: 0;
padding: 7px 0;
}

#menu ul.link a {
font-size: 11px;
color: #fff;
background: none;
margin: 0;
padding: 0;
}

#menu ul.link a:hover {
color: #000;
background: none;
}

#menu h2 {
text-align: center;
color: #fff;
text-transform: uppercase;
}

#menu h2:hover {
background: url(images/nav_barHov.jpg) 0 0 repeat-x;
}

#menu a {
color: #fff;
background: #c5211d;
text-decoration: none;
}

#menu a:hover {
color: #fff;
background: #9f1b18;
}

#menu li {
position: relative;
}

#menu ul ul {
position: absolute;
}

#menu ul ul a {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
padding: 3px 4px;
}

#menu ul ul li a.top_box {
border-bottom: 1px solid #fff;
}

#menu ul ul ul {
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {
display: none;
}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {
display: block;
}

*****Picture DIV CSS*********

#picture {
z-index: 0;
float:right;
padding-right: 10px;
width: 220px;
height: 271px;
}

Sorry if thats a big post, but if I don't know which part is causing the problem then it's difficult.

Thanks

Lee.

[edited by: encyclo at 11:15 pm (utc) on Oct. 3, 2007]
[edit reason] fixed formatting [/edit]

9:45 pm on Oct 3, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 13, 2002
posts:662
votes: 0


Just a thought, have you tried setting z-index of your headers/menu to a higher number, and the swf lower explicitly?
11:20 pm on Oct 3, 2007 (gmt 0)

Full Member from BE 

10+ Year Member

joined:Dec 3, 2006
posts:262
votes: 1


You must add a "transparent" attribute to the flash object:

<object ...>
...
<param name="wmode" value="transparent">
<embed wmode="transparent" ...>
</object>

This should fix your problem.

10:45 am on Oct 4, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 29, 2006
posts:55
votes: 0


Thanks to both you for reading that extremely long post.
Unfortunately Gibble the z-index thing didn't work.

Achernar, you transparent theory worked on Firefox but when I tried it on IE 6 it made the flash element invisible?
So we appear to be some way there.
I have a seperate bit of external code that helps IE accept the hover state over the H2 tags in my menu code. This is also disabled when I change the flash element to transparent. The code for this is below along with the full HTML I have used for the flash element.
Hope this helps because we seem to be on the right tracks here!

*********CODE FOR FLASH ELEMENT*********


<div id="picture_div">

<object type="application/x-shockwave-flash" data="flash/home.swf" width="220" height="271">
<param name="wmode" value="transparent" />
<img src="banner.gif" width="220" height="271" alt="IDP" />
</object>

</div><!-- Picture Div -->

*********SCRIPT TO HELP IE HOVER H2 ELEMENTS*********

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
var csshoverReg = /(^¦\s)(([^a]([^ ]+)?)¦(a([^#.][^ ]+)+)):(hover¦active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
if(!/MSIE (5¦6)/.test(navigator.userAgent)) return;
window.attachEvent('onunload', unhookHoverEvents);
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
} catch(securityException){}
}

try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}

function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!csshoverReg.test(select) ¦¦!style) return;

var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)¦(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover¦active))/i).exec(newSelect)[1];
var affected = select.replace(/:(hover¦active).*$/, '');
var elements = getElementsBySelect(affected);
if(elements.length == 0) return;

currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}

function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
function hookHoverEvent(node, type, handler) {
node.attachEvent(type, handler);
hoverEvents[hoverEvents.length] = {
node:node, type:type, handler:handler
};
}

function unhookHoverEvents() {
for(var e,i=0; i<hoverEvents.length; i++) {
e = hoverEvents[i];
e.node.detachEvent(e.type, e.handler);
}
}

function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
}return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
if(identify) {
var element = doc.getElementById(identify[1]);
return element? [element]:nodes;
}

var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.¦\#¦\:)[a-z0-9_-]+/i, '');
var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all;
for(var j=0; j<result.length; j++) {
node = result[j];
if(classReg &&!classReg.test(node.className)) continue;
nodes[nodes.length] = node;
}
}

return nodes;
}
</script>

This script is a .htc file, whatever that is, I'm not too familiar the scripting yet.
Anyway, hope you can help because as I have said this works fine on Fire Fox.

Regards

Erdy.

2:04 pm on Oct 13, 2007 (gmt 0)

Full Member from BE 

10+ Year Member

joined:Dec 3, 2006
posts:262
votes: 1


I think your object tag should look like this:

<object type="application/x-shockwave-flash" width="220" height="271">
<param name="wmode" value="transparent" />
<param name="movie" value="flash/home.swf" />
<embed wmode="transparent" src="flash/home.swf" width="220" height="271" />
<img src="banner.gif" width="220" height="271" alt="IDP" />
</object>

Is the <img> tag allowed inside the <object> tag?

4:01 pm on Oct 13, 2007 (gmt 0)

Senior Member from MY 

WebmasterWorld Senior Member vincevincevince is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 1, 2003
posts:4847
votes: 0


Whatever you do, you're going to have problems with linux machines and other browsers. The only solution I've found so far is not to use flash or to only use it in places where other content cannot overlap it.
8:29 pm on Oct 13, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 29, 2006
posts:55
votes: 0


Achernar, it works!
Top man, big thanks for that.
Really helped me out of a situation there.
Why did that work then? and what I had previously didn't?
Did I just not have enough info in the tag?

Anyway, can't thank you enough!

Regards

Erdy.

1:51 am on Oct 14, 2007 (gmt 0)

Full Member from BE 

10+ Year Member

joined:Dec 3, 2006
posts:262
votes: 1


<embed> is used by gecko (FF) while IE (at least in v6) relies only on <param> tags.