Just a thought, have you tried setting z-index of your headers/menu to a higher number, and the swf lower explicitly?

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.

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.

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?

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.

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.

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