DHTML menu problem over SWF in Safari, is this a fix?

[ashleyk]

Hi i have recently found that the safari browser has problems rendering dynamic menus (those created by js or using css hover) when the menus are positioned over active x controls (such as Flash). I have seen many examples of menus flickering on websites, but no solutions. Until now, i think.

this website: www.steelcase.com has dynamic menus, and from what i can tell, the flicker bug doesn't happen in safari. I have taken a quick look at the code, and don't see anything out of the ordinary, except i don't recognize the code that they use to embed the flash (to bypass the active X extra click in IE).

Since i am on a PC all day at work, and can not troubleshoot MAC browser issues, can someone answer these questions:

1) Can anyone identify what SWF embedding technique they are using?
2) Is anyone seeing the Flickering menu problem that Safari sometimes gets when viewing dhtml over flash?

thanks for any light you can shed on this.

[Dan Schulz]

Lines 181-183:

<script language="javascript">
embedFlash('/na/files/1c443233b8e94fb2a28130e85faae360/PlanningIdeas.swf','218','800','EN')
</script>

As for Safari, I don't have access to a Mac, and my Mac tester hasn't gotten back to me. Perhaps someone else can help you out with regard to Safari. Sorry I can't do it myself, though.

Just as an FYI, their site has 88 HTML validation errors, has their stylesheet inside the BODY section, and uses some of the most messed up and sloppiest code I've ever seen (and I should know, when I was starting out, I use to write out code that was just as bad). It's a miracle this site even works in Opera, much less at all.

[ashleyk]

ha, so it a piece of junk. When you're trying so hard to find a solution for one problem, you over look the rest of them.

is there anyway you could help my pull out how the menu system works? i see a javascript file: script src="/script/Main_v4.js" but it seems to be many custom functions that don't pertain to the menu specifically.

the popup menu part seems to be oddly a table with divs inside...which makes me not really want to figure out how the darn thing works.

BUT my associate tells me it works in safari which drives my fascination to figure it out

let me know if your friend takes a look at it.

thanks,

[Dan Schulz]

This is the code that makes the menu work. Keep in mind that I formatted it to make it easier to read (yet reading this slop is still a chore and a half by itself). Combine that with the Main_v4.js file you referred to earlier, and you have a sloppy dropdown menu that needs to be taken out back and forcibly removed from the gene-pool.

<table id="ctl00_ctl00_ctlHeader_ctlHeaderNavigation_ctlTopNavigation_tblMenu" cellspacing="0" cellpadding="0" rules="all" border="0" style="border-width:0px;border-collapse:collapse;border-collapse:separate;">
	<tr>
		<td style="width:22em;"></td>
		<td align="left" valign="top" nowrap="" id="10007" onmouseover="menuMOver(this,'#FFFFFF',2)" onmouseout="menuMOut(this,false)" style="border-top:solid white 0.2em;text-align:center;vertical-align:top">
			<div id="head10007" style="position:relative">
				<a class="lheadgray" href="products.aspx?f=10007">products</a>
			</div>
			<div id="menu10007" class="menuDiv">
				<table cellpadding="0" cellspacing="0" border="0" class="menuDropdownTable">
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='system_solutions_products.aspx?f=10076'">System Solutions</td>
						<td nowrap class="menucell" style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='worktools_products.aspx?f=10082'">Worktools</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='seating_products.aspx?f=10078'">Seating</td>
						<td nowrap class="menucell" style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='storage_products.aspx?f=10083'">Storage</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='architectural_solutions_products.aspx?f=10079'">Architectural Solutions</td>
						<td nowrap class="menucell" style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='technology_products.aspx?f=10084'">Technology</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='laboratory_solutions_products.aspx?f=15786'">Laboratory Solutions</td>
						<td nowrap class="menucell" style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='surface_materials_products.aspx?f=10085'">Surface Materials</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='desk_suites_products.aspx?f=10080'">Desk/Suites</td>
						<td nowrap class="menucell" style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='tables_products.aspx?f=10086'">Tables</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF"  onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='lighting_products.aspx?f=10081'">Lighting</td>
						<td nowrap class="menucell" style="width:14em;background-color:#FFFFFF">&nbsp;</td>
					</tr>
				</table>
			</div>
		</td>
		<td style="width:22em;"></td>
		<td align="left" valign="top" nowrap="" id="17704" onmouseover="menuMOver(this,'#FFFFFF',1)" onmouseout="menuMOut(this,false)" style="border-top:solid white 0.2em;text-align:center;vertical-align:top">
			<div id="head17704" style="position:relative">
				<a class="lheadgray" href="DesignTools.aspx?f=17704">design tools</a>
			</div>
			<div id="menu17704" class="menuDiv">
				<table cellpadding="0" cellspacing="0" border="0" class="menuDropdownTable">
					<tr>
						<td class="menucell" nowrap style="width:16.8em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='planning_ideas_AppDB.aspx?f=18310'">Planning Ideas</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:16.8em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='com_col_DesignTools.aspx?f=18542'">COM/COL</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:16.8em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='productfinder.aspx?f=18468'">Product Finder</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:16.8em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='product_specification_guides_specguides.aspx?f=18314'">Product Specification Guides</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:16.8em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='furniture_symbol_library_FSL.aspx?f=18308'">Furniture Symbol Library</td>
					</tr>
				</table>
			</div>
		</td>
		<td style="width:22em;"></td>
		<td align="left" valign="top" nowrap="" id="19002" onmouseover="menuMOver(this,'#FFFFFF',1)" onmouseout="menuMOut(this,false)" style="border-top:solid white 0.2em;text-align:center;vertical-align:top">
			<div id="head19002" style="position:relative">
				<a class="lheadgray" href="services.aspx?f=19002">services</a>
			</div>
			<div id="menu19002" class="menuDiv">
				<table cellpadding="0" cellspacing="0" border="0" class="menuDropdownTable">
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='help_me_plan_it_services.aspx?f=19004'">Help Me Plan It</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='help_me_finance_it_services.aspx?f=19006'">Help Me Finance It</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='help_me_build_it_services.aspx?f=19008'">Help Me Build It</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='help_me_manage_it_services.aspx?f=19010'">Help Me Manage It</td>
					</tr>
				</table>
			</div>
		</td>
		<td style="width:22em;"></td>
		<td align="left" valign="top" nowrap="" id="17706" onmouseover="menuMOver(this,'#FFFFFF',2)" onmouseout="menuMOut(this,false)" style="border-top:solid white 0.2em;text-align:center;vertical-align:top">
			<div id="head17706" style="position:relative">
				<a class="lheadgray" href="customerstories.aspx?f=17706">customer stories</a>
			</div>
			<div id="menu17706" class="menuDiv">
				<table cellpadding="0" cellspacing="0" border="0" class="menuDropdownTable">
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='biosciences_customerstories.aspx?f=18246'">Biosciences</td>
						<td nowrap class="menucell" style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='information_technology_customerstories.aspx?f=18272'">Information Technology</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='education_arts_customerstories.aspx?f=18250'">Education & Arts</td>
						<td nowrap class="menucell" style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='professional_services_customerstories.aspx?f=18276'">Professional Services</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='energy_environment_customerstories.aspx?f=18266'">Energy & Environment</td>
						<td nowrap class="menucell" style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='transportation_customerstories.aspx?f=19504'">Transportation</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='finance_insurance_customerstories.aspx?f=18268'">Finance & Insurance</td>
						<td nowrap class="menucell" style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='travel_leisure_customerstories.aspx?f=19772'">Travel & Leisure</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF"  onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='healthcare_customerstories.aspx?f=18270'">Healthcare</td>
						<td nowrap class="menucell" style="width:14em;background-color:#FFFFFF">&nbsp;</td>
					</tr>
				</table>
			</div>
		</td>
		<td style="width:22em;"></td>
		<td align="left" valign="top" nowrap="" id="17554" onmouseover="menuMOver(this,'#FFFFFF',1)" onmouseout="menuMOut(this,false)" style="border-top:solid white 0.2em;text-align:center;vertical-align:top">
			<div id="head17554" style="position:relative">
				<a class="lheadgray" href="Research.aspx?f=17554">research</a>
			</div>
			<div id="menu17554" class="menuDiv">
				<table cellpadding="0" cellspacing="0" border="0" class="menuDropdownTable">
					<tr>
						<td class="menucell" nowrap style="width:17.4em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="window.open('http://blog.steelcase.com/')">Blog</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:17.4em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='360_e_zine_Research.aspx?f=17608'">360 e-zine</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:17.4em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='articles_insights_Research.aspx?f=17612'">Articles & Insights</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:17.4em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='applied_research_consulting_Research.aspx?f=17604'">Applied Research & Consulting</td>
					</tr>
				</table>
			</div>
		</td>
		<td style="width:22em;"></td>
		<td align="left" valign="top" nowrap="" id="10010" onmouseover="menuMOver(this,'#FFFFFF',1)" onmouseout="menuMOut(this,false)" style="border-top:solid white 0.2em;text-align:center;vertical-align:top">
			<div id="head10010" style="position:relative">
				<a class="lheadgray" href="dealers_locations_dealers.aspx?f=10010">dealers & locations</a>
			</div>
			<div id="menu10010" class="menuDiv">
				<table cellpadding="0" cellspacing="0" border="0" class="menuDropdownTable">
					<tr>
						<td class="menucell" nowrap style="width:15.6em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='dealer_finder_dealers.aspx?f=13971'">Dealer Finder</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:15.6em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='steelcase_finder_worldwide_locator.aspx?f=13970'">Steelcase Finder Worldwide</td>
					</tr>
				</table>
			</div>
		</td>
		<td style="width:22em;"></td>
		<td align="left" valign="top" nowrap="" id="10011" onmouseover="menuMOver(this,'#FFFFFF',1)" onmouseout="menuMOut(this,false)" style="border-top:solid white 0.2em;text-align:center;vertical-align:top">
			<div id="head10011" style="position:relative">
				<a class="lheadgray" href="ourcompany.aspx?f=10011">our company</a>
			</div>
			<div id="menu10011" class="menuDiv">
				<table cellpadding="0" cellspacing="0" border="0" class="menuDropdownTable">
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='about_steelcase_ourcompany.aspx?f=10036'">About Steelcase</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='news_ourcompany.aspx?f=10037'">News</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='environment_ourcompany.aspx?f=10038'">Environment</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='careers_ourcompany.aspx?f=19092'">Careers</td>
					</tr>
					<tr>
						<td class="menucell" nowrap style="width:14em;background-color:#FFFFFF" onmouseover="itemMOver(this,'#909090')" onmouseout="itemMOut(this,'#FFFFFF')" onclick="document.location='investor_relations_ourcompany.aspx?f=10040'">Investor Relations</td>
					</tr>
				</table>
			</div>
		</td>
	</tr>
</table>

[ashleyk]

yes, now that it's formatted a bit better i can read it more easily. I also see it is very complex, and looks a little like throw up. I have this client who actually has a lot of web hits from the mac enviroment so having a menu that works in safari is important to this client.

now all i have to do is figure out why this menu works (i tested it myself in safari and interestingly, the only thing that doesn't come across is the transparency)

thanks for your help.

[anebri]

Were you able to figure out what made it work? We're having the same flickering problem and we concluded it was bug in Safari and gave up on it until I saw your message which tells me there might be a way to get it to work.

Let me know

[gnarly]

There are a few functions you can use to embed Flash using Javascript (such as they have here). Two of the popular ones are http://blog.deconcept.com/swfobject/ and http://www.bobbyvandersluis.com/ufo/

[ashleyk]

i finally got to testing the site at home and indeed it does work perfectly as is. I have not yet started to try and implement the stripped out code yet. I have a theory (that is based on nothing) that perhaps the way the SWF is embedded in the page may have something to do with the flickering problem.

I use swfobject all the time, and i have heard about ufo. Niether of these embedding solutions matches what www.steelcase.com is using for their flash elements.

Another difference i noted was that www.steelcase.com uses tables instead of lists or divs (that most other pop-up menus employ) to construct their menus. perhaps that has something to do with it.

My next plan of attack will be to start implementing the stripped code with various embedding techniques to see if i can get the flickering to happen.