Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Going crazy over z-index and suckerfish...

Status
Not open for further replies.
CharlieIT

CharlieIT

MIS
Apr 9, 2003
157
US
I have a webpage that uses the suckerfish (CSS Style dropdown) menus. The menu is above a flash swf. I read just about every article with how to get the menu to float over the swf. I got it to work. However, the menu actually goes PAST the bottom of the swf and it is getting cutoff by the BODY content!

I have used the z-index style and it works awesome in FireFox. But I can't get it to work in IE. I have read MANY articles on why this is and how to fix it--but I just can't get it to work in IE!!

You don't even need any images or the swf. If you copy and paste the code below into an html document, you will see exactly what I'm talking about.

ANY CSS EXPERTS OUT THERE THAT CAN HELP??? I'M BANGING MY HEAD ON THIS ONE!



CODE:

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta content="This is a test Page." name=description />
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 8;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Revision of Flash required
var requiredRevision = 0;
// the version of javascript supported
var jsVersion = 1.0;
// -----------------------------------------------------------------------------
// -->
</script>
<script language="VBScript" type="text/vbscript">
<!-- // Visual basic helper required to detect Flash Player ActiveX control version information
Function VBGetSwfVer(i)
on error resume next
Dim swControl, swVersion
swVersion = 0

set swControl = CreateObject("ShockwaveFlash.ShockwaveFlash." + CStr(i))
if (IsObject(swControl)) then
swVersion = swControl.GetVariable("$version")
end if
VBGetSwfVer = swVersion
End Function
// -->
</script>
<script language="JavaScript1.1" type="text/javascript">
<!-- // Detect Client Browser type
var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
jsVersion = 1.1;
// JavaScript helper required to detect Flash Player PlugIn version information
function JSGetSwfVer(i){
// NS/Opera version >= 3 check for Flash plugin in plugin array
if (navigator.plugins != null && navigator.plugins.length > 0) {
if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
descArray = flashDescription.split(" ");
tempArrayMajor = descArray[2].split(".");
versionMajor = tempArrayMajor[0];
versionMinor = tempArrayMajor[1];
if ( descArray[3] != "" ) {
tempArrayMinor = descArray[3].split("r");
} else {
tempArrayMinor = descArray[4].split("r");
}
versionRevision = tempArrayMinor[1] > 0 ? tempArrayMinor[1] : 0;
flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
} else {
flashVer = -1;
}
}
// MSN/WebTV 2.6 supports Flash 4
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
// WebTV 2.5 supports Flash 3
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
// older WebTV supports Flash 2
else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
// Can't detect in all other cases
else {

flashVer = -1;
}
return flashVer;
}
// If called with no parameters this function returns a floating point value
// which should be the version of the Flash Player or 0.0
// ex: Flash Player 7r14 returns 7.14
// If called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
{
reqVer = parseFloat(reqMajorVer + "." + reqRevision);
// loop backwards through the versions until we find the newest version
for (i=25;i>0;i--) {
if (isIE && isWin && !isOpera) {
versionStr = VBGetSwfVer(i);
} else {
versionStr = JSGetSwfVer(i);
}
if (versionStr == -1 ) {
return false;
} else if (versionStr != 0) {
if(isIE && isWin && !isOpera) {
tempArray = versionStr.split(" ");
tempString = tempArray[1];
versionArray = tempString .split(",");
} else {
versionArray = versionStr.split(".");
}
versionMajor = versionArray[0];
versionMinor = versionArray[1];
versionRevision = versionArray[2];

versionString = versionMajor + "." + versionRevision; // 7.0r24 == 7.24
versionNum = parseFloat(versionString);
// is the major.revision >= requested major.revision AND the minor version >= requested minor
if ( (versionMajor > reqMajorVer) && (versionNum >= reqVer) ) {
return true;
} else {
return ((versionNum >= reqVer && versionMinor >= reqMinorVer) ? true : false );
}
}
}
return (reqVer ? false : 0.0);
}
// -->
</script>
<style type=text/css>
form {
margin: 0px;
padding: 0px;
display: inline;
}
BODY {
FONT: 75%/1em Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #c8d4de;
}
BODY, a {
TEXT-DECORATION: NONE;
LINE-HEIGHT: normal;
COLOR: BLACK;
}
#container {
MARGIN-LEFT: auto;
WIDTH: 95%;
MARGIN-RIGHT: auto
}
#flashcontent {
border-left: 1px solid;
border-right: 4px solid;
border-color: gray;
BACKGROUND: #FFFFFF;
MARGIN: 0px auto;
width: 750px;
}
#header {
BACKGROUND-COLOR: #ffffff;
position: relative;
height: 110px;
width: 750px;
MARGIN: 0px auto;
border-right: 4px solid;
border-top: 1px solid;
border-left: 1px solid;
border-color: gray;
}
#header .quicklinks {
position: absolute;
right: 43px;
width: 78px;
height: 12px;
top: 29px;
}
#header .quicklinks A {
MARGIN-LEFT: 5px
}
#header .quicklinks A:hover {
TEXT-DECORATION: underline
}
#header .logo {
position: absolute;
top: 10px;
left: 23px;
width: 81px;
height: 96px;
}
#header A {
COLOR: #000000;
TEXT-DECORATION: none
}
#header .phone {
FONT: 95%/1em Arial, Helvetica, sans-serif;
position: absolute;
right: 7px;
width: 120px;
height: 12px;
top: 93px;
}

#nav {
position: absolute;
left: 110px;
width: 510px;
top: 70px;
height: 36px;
BACKGROUND-IMAGE: url(menuback2.png);
BACKGROUND-REPEAT: repeat-x;
background-color:#FFFFFF;
}
#nav li ul {
position: absolute;
width: 121px;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav ul {
padding: 0px;
margin: 0;
list-style-TYPE: none;
}
#nav a {
display: block;
width: auto;
padding-left:10px;
padding-right:10px;
line-height:36px;
font-weight:bold;
color: #000000;
TEXT-DECORATION: none;
}
#nav A.parent {
BACKGROUND: url(rightarrow.png) no-repeat right center;
background-color: #F2F1F7;
}
#nav li {
float: left;
width: auto;
}
#nav li li {
background-image:none;
}
#nav li li a {
line-height:normal;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
padding-left:23px;
padding-right: 20px;
padding-top:9px;
padding-bottom:5px;
background-color:#F2F1F7;
border-bottom:1px solid #B7BEC4;
width:151px;
font-weight:normal;
}
#nav li li a:hover {
background-color:#C1D3DF;
COLOR: #FF0000;
}
#nav LI.sfhover {
BACKGROUND: #6699cc;
}
#nav LI UL A {
WIDTH: 130px
}
#nav LI UL UL {
MARGIN: -28px 0px 0px 173px
}
#nav LI:hover UL UL {
LEFT: -999em
}
#nav LI:hover UL UL UL {
LEFT: -999em
}
#nav LI.sfhover UL UL {
LEFT: -999em
}
#nav LI.sfhover UL UL UL {
LEFT: -999em
}
#nav LI LI:hover UL {
LEFT: auto
}
#nav LI LI LI:hover UL {
LEFT: auto
}
#nav LI.sfhover UL {
LEFT: auto
}
#nav LI LI.sfhover UL {
LEFT: auto
}
#nav LI LI LI.sfhover UL {
LEFT: auto
}
#nav LI:hover {

BACKGROUND: #F2F1F7;
}

</style>
</head>
<body>
<div id=container>
<div id=header>
<div class=logo><img src="null.png" width="81" height="96" border="0" longdesc=" /></div>

<div class=quicklinks>
Contact Us</div>
<div class=phone>
<center><strong>1-800-555-HELP (4357)</strong></center>
</div>
<div id=nav>
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="products.htm">Products</a>
<ul>
<li><a href="product1.htm">Product1</a></li>
<li><a href="product2.htm" class="parent">Product2</a>
<ul>
<li><a href="product3">product3</a></li>
<li><a href="product4">product4</a></li>
<li><a href="product5">product5</a></li>
<li><a href="product6">product6</a></li>
</ul>
</li>
<li><a href="product7">product7</a></li>
<li><a href="product8">product8</a></li>
<li><a href="product9">product9</a></li>
<li><a href="product10">product10</a></li>
</ul>
</li>
<li><a href="information.htm">Information</a>
<ul>
<li><a href="info1">info1</a></li>
<li><a href="info2">info2</a></li>
<li><a href="info3">info3</a></li>
<li><a href="info4">info4</a></li>
<li><a href="info5">info5</a></li>
<li><a href="info6">info6</a></li>
</ul>
</li>
<li><a href="success.htm">Customer Successes</a>
<ul>
<li><a href="success1.htm" class="parent">Success1</a>
<ul>
<li><a href="success2.htm">Success2</a></li>
<li><a href="success3.htm">Success3</a></li>
<li><a href="success4.htm">Success4</a></li>
<li><a href="success5.htm">Success5</a></li>
</ul>
</li>
<li><a href="CaseStudies.htm">Case Studies</a></li>
</ul>
</li>
<li><a href="aboutUs.htm">About Us</a>
<ul>
<li><a href="aboutus1.htm">About Us 1</a></li>
<li><a href="aboutus2.htm">About Us 2</a></li>
<li><a href="aboutus3.htm">About Us 3</a></li>
<li><a href="aboutus4">About Us 4</a></li>
<li><a href="aboutus5.htm">About us 5</a></li>
<li><a href="aboutus6.htm">About Us 6</a></li>
<li><a href="aboutus7.htm">About Us 7</a></li>
<li><a href="aboutus8.htm">About Us 8</a></li>
<li><a href="aboutus9.htm">About Us 9</a></li>
</ul>
</li>
<li><a href="contact.htm">Contact Us</a>
<ul>
<li><a href="contactus1.htm">Contact Us 1</a></li>
<li><a href="contactus2.htm">Contact Us 2</a></li>
<li><a href="contactus3">Conbtact Us 3</a></li>
<li><a href="contactus4.htm">Contact Us 4</a></li>
<li><a href="contactus5.htm">Contact Us 5</a></li>
</ul>
</li>
</ul>
</div></div>
<div id=flashcontent>

<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="750" height="128"'
+ 'codebase=" + '<param name="movie" value="header.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#cccccc" />'
+ '<embed src="header.swf" quality="high" wmode="transparent" bgcolor="#cccccc" '
+ 'width="750" height="128" name="header" align="middle"'
+ 'play="true"'
+ 'loop="false"'
+ 'quality="high"'
+ 'allowScriptAccess="sameDomain"'
+ 'type="application/x-shockwave-flash"'
+ 'pluginspage=" + '<\/embed>'
+ '<\/object>';
document.write(oeTags); // embed the flash movie
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed here.'
+ 'This content requires the Macromedia Flash Player.'
+ '<a href= Flash<\/a>';
document.write(alternateContent); // insert non-flash content
}
// -->
</script>
<noscript>
This content requires the Macromedia Flash Player. Please see our <a href="requirements.htm">site requirements</a> or
<a href=" Flash</a>
<img src="header.png" width="750" height="126" alt="" longdesc="" />
</noscript>
</div>

<div style="position: relative; MARGIN: 0px auto; width: 750px; height: 470px; border-left: 1px solid; border-top: 1px solid; border-right: 4px solid; border-color: gray; background: #FFFFFF;">
<div style="position: absolute; top: 15px; width: 125px; height: 245px; right: 5px; margin-left: auto; padding-left: 5px; padding-right: 5px; background: #FFFFFF;">
<center>
<a href="1.htm">
<img src="1.png" alt="" width="55" height="59" vspace="10" border="0" longdesc=" />
</a>
</center>
<div style="position: absolute; top: 80px; width: 125px;">
<center>
<a id="heading2" href="product1.htm">
product1
</a>
</center>
<br />
<center>
<a id="heading3" href="product1.htm">
Product1
</a>
</center>
<div style="position: absolute; top: 73px; right: 26px;">
<center><a href="product1.htm">

<img src="product1.png" alt="" width="68" height="71" border="0" longdesc=" />

</a> </center>
</div>
<div style="position: absolute; top: 154px; width: 125px; left: 1px;">
<center>
<a id="heading2" href="product2.htm">
&#9658;More
</a>
</center>
</div>
</div>
</div>
<div style="position: absolute; top: 15px; width: 125px; height: 245px; right: 140px; margin-left: auto; padding-left: 5px; padding-right: 5px; border-right: 1px solid; background: #FFFFFF;">
<center>
<a href="product2.htm">
<img src="product2.png" alt="" width="74" height="73" border="0" longdesc=" />
</a>
</center>
<div style="position: absolute; top: 80px; width: 125px;">
<center>
<a id="heading2" href="product2.htm">
product2
</a>
</center>
<br />
<center>
<a id="heading3" href="product2.htm">
Product 2 Description
</a>
</center>
<div style="position: absolute; top: 73px; right: 26px;">
<center>
<a href="product2.htm">
<img src="product2.png" alt="" width="71" height="71" border="0" longdesc=" />
</a>
</center>
</div>
<div style="position: absolute; top: 154px; width: 125px;">
<center>
<a id="heading2" href="product2.htm">
&#9658;More
</a>
</center>
</div>
</div>
</div>
<div style="position: absolute; top: 15px; right: 275px; width: 125px; height: 245px; margin-left: auto; padding-right: 5px; padding-left: 5px; border-right: 1px solid; background: #FFFFFF;">
<center>
<a href="product2.htm">
<img src="product2.png" alt="" width="79" height="58" vspace="10" border="0" longdesc=" />
</a>
</center>
<div style="position: absolute; top: 80px; width: 125px;">
<center>
<a id="heading2" href="product3.htm">
Product3
</a>
</center>
<br />
<center>
<a id="heading3" href="product3.htm">
Product3
</a>
</center>
<div style="position: absolute; top: 73px; right: 26px;">
<center>
<a href="product3.htm">
<img src="product3.png" alt="Flow Cell" border="0" longdesc=" />
</a>
</center>
</div>
<div style="position: absolute; top: 154px; width: 125px;">
<center>
<a id="heading2" href="product4.htm">
&#9658;More
</a>
</center>
</div>
</div>
</div>
<div style="position: absolute; top: 15px; right: 410px; width: 125px; height: 245px; margin-left: auto; padding-right: 5px; padding-left: 5px; border-right: 1px solid; background: #FFFFFF;">
<center>
<a href="product4.htm">
<img src="product4.png" alt="" width="91" height="62" vspace="10" border="0"longdesc=" />
</a>
</center>
<div style="position: absolute; top: 80px; width: 125px;">
<center>
<a id="heading2" href="product4.htm">
Product 4
</a>
</center>
<br />
<center>
<a id="heading3" href="Product 5.htm">
Product5 Description
</a>
</center>
<center>
<a href="product5.htm">
<img src="product5.png" alt="" border="0" vspace="15" longdesc=" />
</a>
</center>
<div style="position: absolute; top: 154px; width: 125px;">
<center>
<a id="heading2" href="product5.htm">
&#9658;More
</a>
</center>
</div>
</div>
</div>
<div style="position: absolute; top: 15px; right: 548px; width: 200px; height: 450px; margin-left: auto; border-right: 1px solid; background: #FFFFFF;">
<center>
<a href="product5.htm">
<img src="product6.png" alt="" width="152" height="31" vspace="15" border="0" />
</a>
</center>
<div style="position: absolute; top: 55px; right: 5px; width: 190px; height: 90px; border-bottom: 1px solid;">
<a href="product7.htm">
<img src="product7.png" alt="" width="67" height="81" border="0" style="float: right;" longdesc=" />
</a>
<div style="position: relative; left: 0px; top: 0px; width: 117px;">
<a id="heading2" href="product7.htm">
Product 7
</a>
<br />
<br />
<a href="product7.htm" id="heading3">
Product 7 Description
</a>
</div>
<div style="position: absolute; top: 75px; width: 80px; left: -6px;">
<center>
<a id="heading2" href="product7.htm">
&#9658;More
</a>
</center>
</div>
</div>
<div style="position: absolute; top: 147px; left: 5px; right: 5px; width: 195px; height: 140px;">
<center>
<a href="product8k.htm">
<img src="product8.png" alt="" border="0" vspace="5" longdesc=" />
</a>
</center>
<div style="position: absolute; top: 50px; right: 5px; width: 190px; height: 90px; border-bottom: 1px solid;">
<a href="product8.htm">
<img src="product8.png" alt="" width="75" height="75" border="0" style="float: left;" longdesc=" />
</a>
<div style="position: relative; float: right; top: 8px; width: 100px;">
<a id="heading2" href="product8.htm">
Product 8
</a>
<br />
<br />
<a href="Product8.htm" id="heading3">
Product 9 Description
</a>
</div>
<div style="position: absolute; right: 5px; top: 75px; width: 50px;">
<center>
<a id="heading2" href="product9.htm">
&#9658;More
</a>
</center>
</div>
</div>
</div>
<div style="position: absolute; top: 296px; left: 5px; right: 5px; width: 190px; height: 155px; border-bottom: 1px solid;">
<center>
<a href="product10.htm">
<img src="product10.png" alt="" width="141" height="38" border="0" longdesc=" />
</a>
</center>
<div style="position: absolute; top: 40px; right: 5px; width: 180px; height: 90px;">
<a href="product11.htm">
<img src="product11.png" alt="" width="75" height="74" border="0" style="float: right;" vspace="10" longdesc=" />
</a>
<div style="position: relative; top: 0px; width: 100px;">
<a id="heading2" href="product11.htm">
Product 11 Description
</a>
<br />
<br />
<a href="Product11.htm" id="heading3">
Product 11 Description
</a>
</div>
<div style="position: absolute; top: 99px; width: 80px; left: -6px;">
<center>
<a id="heading2" href="Product11.htm">
&#9658;More
</a>
</center>
</div>
</div>
</div>
</div>
<div style="position: absolute; top: 270px; right: 10px; width: 520px; height: 195px; margin-left: auto; padding-right: 5px; padding-left: 5px; border-top: 1px solid; border-bottom: 1px solid; background: #FFFFFF;">
<div style="position: absolute; top: 8px; width: 226px; left: 9px;">
<center>
<a id="heading2" href="product12.htm">
Product12
</a>
</center>
</div>
<div style="position: absolute; top: 35px; width: 225px; height: 150px;">
<a id="heading2" href="product12.htm">
<img src="product12.png" alt="" border="0" longdesc=" /> </a>
<div style="position: absolute; top: -31px; width: 260px; left: 260px; height: 144px;">

<a id="heading2" href="product12.htm">
Product 12
</a>

<ul style="margin:0;">

<li>Product 12 Features 1</li>
<li >Product 12 Features 2</li>
<li>Product 12 Features 3</li>
</ul>
<a id="heading2" href="product12.htm">
Product 12
</a>
<ul style="margin:0;">
<li>Product 12 Features 1</li>
<li>Product 12 Features 2</li>
<li>Product 12 Features 3</li>
</ul>
<a id="heading2" href="product12.htm">
Product 12
</a>
<ul style="margin:0;">
<li>Product 12 Features 1</li>
<li>Product 12 Features 2</li>
<li>Product 12 Features 3</li>
</ul>
<div style="position: absolute; top: 175px; width: 50px; right: 0px;">
<center>
<a id="heading2" href="product12.htm">
&#9658;More
</a>
</center>
</div>
</div>
</div>
</div>
</div>








</div></div>
<script src="ieupdate.js" type=text/javascript></script>

<script type=text/JavaScript>
<!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

</body>
</html>
 
Sort by date Sort by votes
Sorry--too long. My Bad. This is shorter...

CODE:

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta content="This is a test Page." name=description />
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 8;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Revision of Flash required
var requiredRevision = 0;
// the version of javascript supported
var jsVersion = 1.0;
// -----------------------------------------------------------------------------
// -->
</script>
<script language="VBScript" type="text/vbscript">
<!-- // Visual basic helper required to detect Flash Player ActiveX control version information
Function VBGetSwfVer(i)
on error resume next
Dim swControl, swVersion
swVersion = 0

set swControl = CreateObject("ShockwaveFlash.ShockwaveFlash." + CStr(i))
if (IsObject(swControl)) then
swVersion = swControl.GetVariable("$version")
end if
VBGetSwfVer = swVersion
End Function
// -->
</script>
<script language="JavaScript1.1" type="text/javascript">
<!-- // Detect Client Browser type
var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
jsVersion = 1.1;
// JavaScript helper required to detect Flash Player PlugIn version information
function JSGetSwfVer(i){
// NS/Opera version >= 3 check for Flash plugin in plugin array
if (navigator.plugins != null && navigator.plugins.length > 0) {
if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
descArray = flashDescription.split(" ");
tempArrayMajor = descArray[2].split(".");
versionMajor = tempArrayMajor[0];
versionMinor = tempArrayMajor[1];
if ( descArray[3] != "" ) {
tempArrayMinor = descArray[3].split("r");
} else {
tempArrayMinor = descArray[4].split("r");
}
versionRevision = tempArrayMinor[1] > 0 ? tempArrayMinor[1] : 0;
flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
} else {
flashVer = -1;
}
}
// MSN/WebTV 2.6 supports Flash 4
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
// WebTV 2.5 supports Flash 3
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
// older WebTV supports Flash 2
else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
// Can't detect in all other cases
else {

flashVer = -1;
}
return flashVer;
}
// If called with no parameters this function returns a floating point value
// which should be the version of the Flash Player or 0.0
// ex: Flash Player 7r14 returns 7.14
// If called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
{
reqVer = parseFloat(reqMajorVer + "." + reqRevision);
// loop backwards through the versions until we find the newest version
for (i=25;i>0;i--) {
if (isIE && isWin && !isOpera) {
versionStr = VBGetSwfVer(i);
} else {
versionStr = JSGetSwfVer(i);
}
if (versionStr == -1 ) {
return false;
} else if (versionStr != 0) {
if(isIE && isWin && !isOpera) {
tempArray = versionStr.split(" ");
tempString = tempArray[1];
versionArray = tempString .split(",");
} else {
versionArray = versionStr.split(".");
}
versionMajor = versionArray[0];
versionMinor = versionArray[1];
versionRevision = versionArray[2];

versionString = versionMajor + "." + versionRevision; // 7.0r24 == 7.24
versionNum = parseFloat(versionString);
// is the major.revision >= requested major.revision AND the minor version >= requested minor
if ( (versionMajor > reqMajorVer) && (versionNum >= reqVer) ) {
return true;
} else {
return ((versionNum >= reqVer && versionMinor >= reqMinorVer) ? true : false );
}
}
}
return (reqVer ? false : 0.0);
}
// -->
</script>
<style type=text/css>
form {
margin: 0px;
padding: 0px;
display: inline;
}
BODY {
FONT: 75%/1em Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #c8d4de;
}
BODY, a {
TEXT-DECORATION: NONE;
LINE-HEIGHT: normal;
COLOR: BLACK;
}
#container {
MARGIN-LEFT: auto;
WIDTH: 95%;
MARGIN-RIGHT: auto
}
#flashcontent {
border-left: 1px solid;
border-right: 4px solid;
border-color: gray;
BACKGROUND: #FFFFFF;
MARGIN: 0px auto;
width: 750px;
}
#header {
BACKGROUND-COLOR: #ffffff;
position: relative;
height: 110px;
width: 750px;
MARGIN: 0px auto;
border-right: 4px solid;
border-top: 1px solid;
border-left: 1px solid;
border-color: gray;
}
#header .quicklinks {
position: absolute;
right: 43px;
width: 78px;
height: 12px;
top: 29px;
}
#header .quicklinks A {
MARGIN-LEFT: 5px
}
#header .quicklinks A:hover {
TEXT-DECORATION: underline
}
#header .logo {
position: absolute;
top: 10px;
left: 23px;
width: 81px;
height: 96px;
}
#header A {
COLOR: #000000;
TEXT-DECORATION: none
}
#header .phone {
FONT: 95%/1em Arial, Helvetica, sans-serif;
position: absolute;
right: 7px;
width: 120px;
height: 12px;
top: 93px;
}

#nav {
position: absolute;
left: 110px;
width: 510px;
top: 70px;
height: 36px;
BACKGROUND-IMAGE: url(menuback2.png);
BACKGROUND-REPEAT: repeat-x;
background-color:#FFFFFF;
}
#nav li ul {
position: absolute;
width: 121px;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav ul {
padding: 0px;
margin: 0;
list-style-TYPE: none;
}
#nav a {
display: block;
width: auto;
padding-left:10px;
padding-right:10px;
line-height:36px;
font-weight:bold;
color: #000000;
TEXT-DECORATION: none;
}
#nav A.parent {
BACKGROUND: url(rightarrow.png) no-repeat right center;
background-color: #F2F1F7;
}
#nav li {
float: left;
width: auto;
}
#nav li li {
background-image:none;
}
#nav li li a {
line-height:normal;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
padding-left:23px;
padding-right: 20px;
padding-top:9px;
padding-bottom:5px;
background-color:#F2F1F7;
border-bottom:1px solid #B7BEC4;
width:151px;
font-weight:normal;
}
#nav li li a:hover {
background-color:#C1D3DF;
COLOR: #FF0000;
}
#nav LI.sfhover {
BACKGROUND: #6699cc;
}
#nav LI UL A {
WIDTH: 130px
}
#nav LI UL UL {
MARGIN: -28px 0px 0px 173px
}
#nav LI:hover UL UL {
LEFT: -999em
}
#nav LI:hover UL UL UL {
LEFT: -999em
}
#nav LI.sfhover UL UL {
LEFT: -999em
}
#nav LI.sfhover UL UL UL {
LEFT: -999em
}
#nav LI LI:hover UL {
LEFT: auto
}
#nav LI LI LI:hover UL {
LEFT: auto
}
#nav LI.sfhover UL {
LEFT: auto
}
#nav LI LI.sfhover UL {
LEFT: auto
}
#nav LI LI LI.sfhover UL {
LEFT: auto
}
#nav LI:hover {

BACKGROUND: #F2F1F7;
}

</style>
</head>
<body>
<div id=container>
<div id=header>
<div class=logo><img src="null.png" width="81" height="96" border="0" longdesc=" /></div>

<div class=quicklinks>
Contact Us</div>
<div class=phone>
<center><strong>1-800-555-HELP (4357)</strong></center>
</div>
<div id=nav>
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="products.htm">Products</a>
<ul>
<li><a href="product1.htm">Product1</a></li>
<li><a href="product2.htm" class="parent">Product2</a>
<ul>
<li><a href="product3">product3</a></li>
<li><a href="product4">product4</a></li>
<li><a href="product5">product5</a></li>
<li><a href="product6">product6</a></li>
</ul>
</li>
<li><a href="product7">product7</a></li>
<li><a href="product8">product8</a></li>
<li><a href="product9">product9</a></li>
<li><a href="product10">product10</a></li>
</ul>
</li>
<li><a href="information.htm">Information</a>
<ul>
<li><a href="info1">info1</a></li>
<li><a href="info2">info2</a></li>
<li><a href="info3">info3</a></li>
<li><a href="info4">info4</a></li>
<li><a href="info5">info5</a></li>
<li><a href="info6">info6</a></li>
</ul>
</li>
<li><a href="success.htm">Customer Successes</a>
<ul>
<li><a href="success1.htm" class="parent">Success1</a>
<ul>
<li><a href="success2.htm">Success2</a></li>
<li><a href="success3.htm">Success3</a></li>
<li><a href="success4.htm">Success4</a></li>
<li><a href="success5.htm">Success5</a></li>
</ul>
</li>
<li><a href="CaseStudies.htm">Case Studies</a></li>
</ul>
</li>
<li><a href="aboutUs.htm">About Us</a>
<ul>
<li><a href="aboutus1.htm">About Us 1</a></li>
<li><a href="aboutus2.htm">About Us 2</a></li>
<li><a href="aboutus3.htm">About Us 3</a></li>
<li><a href="aboutus4">About Us 4</a></li>
<li><a href="aboutus5.htm">About us 5</a></li>
<li><a href="aboutus6.htm">About Us 6</a></li>
<li><a href="aboutus7.htm">About Us 7</a></li>
<li><a href="aboutus8.htm">About Us 8</a></li>
<li><a href="aboutus9.htm">About Us 9</a></li>
</ul>
</li>
<li><a href="contact.htm">Contact Us</a>
<ul>
<li><a href="contactus1.htm">Contact Us 1</a></li>
<li><a href="contactus2.htm">Contact Us 2</a></li>
<li><a href="contactus3">Conbtact Us 3</a></li>
<li><a href="contactus4.htm">Contact Us 4</a></li>
<li><a href="contactus5.htm">Contact Us 5</a></li>
</ul>
</li>
</ul>
</div></div>
<div id=flashcontent>

<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="750" height="128"'
+ 'codebase=" + '<param name="movie" value="header.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#cccccc" />'
+ '<embed src="header.swf" quality="high" wmode="transparent" bgcolor="#cccccc" '
+ 'width="750" height="128" name="header" align="middle"'
+ 'play="true"'
+ 'loop="false"'
+ 'quality="high"'
+ 'allowScriptAccess="sameDomain"'
+ 'type="application/x-shockwave-flash"'
+ 'pluginspage=" + '<\/embed>'
+ '<\/object>';
document.write(oeTags); // embed the flash movie
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed here.'
+ 'This content requires the Macromedia Flash Player.'
+ '<a href= Flash<\/a>';
document.write(alternateContent); // insert non-flash content
}
// -->
</script>
<noscript>
This content requires the Macromedia Flash Player. Please see our <a href="requirements.htm">site requirements</a> or
<a href=" Flash</a>
<img src="header.png" width="750" height="126" alt="" longdesc="" />
</noscript>
</div>

<div style="position: relative; MARGIN: 0px auto; width: 750px; height: 470px; border-left: 1px solid; border-top: 1px solid; border-right: 4px solid; border-color: gray; background: #FFFFFF;">
<div style="position: absolute; top: 15px; width: 125px; height: 245px; right: 5px; margin-left: auto; padding-left: 5px; padding-right: 5px; background: #FFFFFF;">
<center>
<a href="1.htm">
<img src="1.png" alt="" width="55" height="59" vspace="10" border="0" longdesc=" />
</a>
</center>
<div style="position: absolute; top: 80px; width: 125px;">
<center>
<a id="heading2" href="product1.htm">
product1
</a>
</center>
<br />
<center>
<a id="heading3" href="product1.htm">
Product1
</a>
</center>
<div style="position: absolute; top: 73px; right: 26px;">
<center><a href="product1.htm">

<img src="product1.png" alt="" width="68" height="71" border="0" longdesc=" />

</a> </center>
</div>
<div style="position: absolute; top: 154px; width: 125px; left: 1px;">
<center>
<a id="heading2" href="product2.htm">
&#9658;More
</a>
</center>
</div>
</div>
</div>
<div style="position: absolute; top: 15px; width: 125px; height: 245px; right: 140px; margin-left: auto; padding-left: 5px; padding-right: 5px; border-right: 1px solid; background: #FFFFFF;">
<center>
<a href="product2.htm">
<img src="product2.png" alt="" width="74" height="73" border="0" longdesc=" />
</a>
</center>
<div style="position: absolute; top: 80px; width: 125px;">
<center>
<a id="heading2" href="product2.htm">
product2
</a>
</center>
<br />
<center>
<a id="heading3" href="product2.htm">
Product 2 Description
</a>
</center>
<div style="position: absolute; top: 73px; right: 26px;">
<center>
<a href="product2.htm">
<img src="product2.png" alt="" width="71" height="71" border="0" longdesc=" />
</a>
</center>
</div>
<div style="position: absolute; top: 154px; width: 125px;">
<center>
<a id="heading2" href="product2.htm">
&#9658;More
</a>
</center>
</div>
</div>
</div>
<div style="position: absolute; top: 15px; right: 275px; width: 125px; height: 245px; margin-left: auto; padding-right: 5px; padding-left: 5px; border-right: 1px solid; background: #FFFFFF;">
<center>
<a href="product2.htm">
<img src="product2.png" alt="" width="79" height="58" vspace="10" border="0" longdesc=" />
</a>
</center>
<div style="position: absolute; top: 80px; width: 125px;">
<center>
<a id="heading2" href="product3.htm">
Product3
</a>
</center>
<br />
<center>
<a id="heading3" href="product3.htm">
Product3
</a>
</center>
<div style="position: absolute; top: 73px; right: 26px;">
<center>
<a href="product3.htm">
<img src="product3.png" alt="Flow Cell" border="0" longdesc=" />
</a>
</center>
</div>
<div style="position: absolute; top: 154px; width: 125px;">
<center>
<a id="heading2" href="product4.htm">
&#9658;More
</a>
</center>
</div>
</div>
</div>
<div style="position: absolute; top: 15px; right: 410px; width: 125px; height: 245px; margin-left: auto; padding-right: 5px; padding-left: 5px; border-right: 1px solid; background: #FFFFFF;">
<center>
<a href="product4.htm">
<img src="product4.png" alt="" width="91" height="62" vspace="10" border="0"longdesc=" />
</a>
</center>
<div style="position: absolute; top: 80px; width: 125px;">
<center>
<a id="heading2" href="product4.htm">
Product 4
</a>
</center>
<br />
<center>
<a id="heading3" href="Product 5.htm">
Product5 Description
</a>
</center>
<center>
<a href="product5.htm">
<img src="product5.png" alt="" border="0" vspace="15" longdesc=" />
</a>
</center>
<div style="position: absolute; top: 154px; width: 125px;">
<center>
<a id="heading2" href="product5.htm">
&#9658;More
</a>
</center>
</div>
</div>
</div>
<div style="position: absolute; top: 15px; right: 548px; width: 200px; height: 251px; margin-left: auto; border-right: 1px solid; background: #FFFFFF;">
<center>
<a href="product5.htm">
<img src="product6.png" alt="" width="152" height="31" vspace="15" border="0" />
</a>
</center>
<div style="position: absolute; top: 55px; right: 5px; width: 190px; height: 90px; border-bottom: 1px solid;">
<a href="product7.htm">
<img src="product7.png" alt="" width="67" height="81" border="0" style="float: right;" longdesc=" />
</a>
<div style="position: relative; left: 0px; top: 0px; width: 117px;">
<a id="heading2" href="product7.htm">
Product 7
</a>
<br />
<br />
<a href="product7.htm" id="heading3">
Product 7 Description
</a>
</div>
<div style="position: absolute; top: 75px; width: 80px; left: -6px;">
<center>
<a id="heading2" href="product7.htm">
&#9658;More
</a>
</center>
</div>
</div>
</div>
</div>
</div></div>
<script src="ieupdate.js" type=text/javascript></script>

<script type=text/JavaScript>
<!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

</body>
</html>
 
Upvote 0 Downvote
OH! I figured it out!!!! I added "z-index: 1" to the "header" element. BAM! It works in IE and FireFox! Very very cool!


Whew! That was a tough one!

--Charles

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
703
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
773
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
204
lmcate
lmcate
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
637
PeDa
PeDa
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
129
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top