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!

Sub Menu rollover problem wit IE 7

Status
Not open for further replies.
tchaplin

tchaplin

Programmer
Jul 18, 2003
58
NZ
Sub Menu rollover problem wit IE 7

This menu seems to work fine under IE 6 yet under IE 7 the submenu rollovers don’t work. I’m not so fdamiliour with the changes in syntax of IE 7. I suspect it a CSS problem. Someone may be able to shed some light on the situation

Thanks Todd

The code a copy and paste into a file with the extension html will give you the example



<html>
<head>
<title></title>

<script language="JScript">
var display_url=0
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6){
var currmenuobj=0
var currsubmenuobj=0
}

var site_URL = "
var arrSlideStyles = new Array();
arrSlideStyles = ['HIDE','PUSH','SWAP'];
var iIndexCount = 0;
var bToggle = 0;

function checkbrowseragent()
{
var browseragent = navigator.userAgent.toLowerCase();
if(browseragent.indexOf("firefox")+1)
window.location = site_URL + "/Firefox/Index.html";
}

function Lite(BTN)
{
document.getElementById(BTN).style.backgroundColor = "#2888D8";
document.getElementById(BTN).style.borderTopColor = "#2888D8";
document.getElementById(BTN).style.borderBottomColor = "#2888D8";
document.getElementById(BTN).style.borderLeftColor = "#1864D0";
document.getElementById(BTN).style.borderRightColor = "#58A4E0";
}

function Dim(BTN)
{
document.getElementById(BTN).style.backgroundColor = "#2878C0";
document.getElementById(BTN).style.borderTopColor = "#2878C0";
document.getElementById(BTN).style.borderBottomColor = "#2878C0";
document.getElementById(BTN).style.borderLeftColor = "#1858B8";
document.getElementById(BTN).style.borderRightColor = "#508CC0";
}

function showmenu(BTN,name)
{
if(currmenuobj!=0){
currmenuobj.style.visibility="hidden"
}
var button = document.getElementById(BTN)
currmenuobj=document.getElementById(name)
currmenuobj.style.left = button.currentStyle.left
currmenuobj.style.top = parseInt(button.currentStyle.top) + parseInt(button.currentStyle.height);
currmenuobj.style.visibility="visible"
return false
}

function hidemenu(e)
{
currmenuobj.style.visibility="hidden"
}

function highlight(e)
{
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems")
firingobj=firingobj.parentNode
firingobj.style.backgroundColor="#2888D8"
firingobj.style.color="white"
if (display_url==1)
window.status=event.srcElement.url
}
}

function lowlight(e)
{
if(currsubmenuobj!=0 && e.toElement!=currmenuobj && e.toElement!=currsubmenuobj)
currsubmenuobj.style.visibility="hidden"
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems")
firingobj=firingobj.parentNode
firingobj.style.backgroundColor=""
firingobj.style.color="black"
window.status=''
}
if(e.toElement.className!="menuitems" && e.toElement.className!="menu")
hidemenu(event);
}

function jumpto(e)
{
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems")
firingobj=firingobj.parentNode
if (firingobj.getAttribute("target"))
window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))
else
window.location=firingobj.getAttribute("url")
}
}

function showsubmenu(e,MENU)
{

var menu=document.getElementById(MENU)
var menuitem=e.srcElement
currsubmenuobj=document.getElementById(menuitem.id+"-"+menu.id)
currsubmenuobj.style.left = parseInt(menu.currentStyle.left)+parseInt(e.toElement.offsetLeft)+parseInt(menu.currentStyle.width)
currsubmenuobj.style.top = parseInt(e.toElement.offsetTop)+parseInt(menu.style.top)
currsubmenuobj.style.visibility="visible"
return false
}

function lowlightsub(e,MENU)
{
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems")
firingobj=firingobj.parentNode
firingobj.style.backgroundColor=""
firingobj.style.color="black"
window.status=''
}
if(e.toElement.className!="menuitems" && e.toElement.className!="menu")
hidesubmenu(event,MENU);
}

function hidesubmenu(e,MENU)
{
currsubmenuobj.style.visibility="hidden"
var callerobj=document.getElementById(MENU)
callerobj.style.visibility="hidden"
}

</script>


<style type="text/css">
.menu
{
position:absolute;
width:125px;
height:auto;
border-style:ridge;
border-width:1;
background-color:Transparent;
border-style:none;
font-family:MS Sans Serif;
line-height:20px;
cursor:default;
font-size:11px;
z-index:100;
cursor:pointer;
background-color:#2878C0;
visibility:hidden;
}

.menuitems
{
padding-left:10px;
padding-right:10px;

}


.homebutton,
.copiersbutton,
.printersbutton,
.faxesbutton,
.idprintersbutton,
.pbutton,
.lcdbutton,
.projectorbutton,
.contactusbutton,
.aboutusbutton,
.CopyRightlabel,
.specialsbutton,

{
font-family:MS Sans Serif;
font-size:10px;
text-align:center;
color:#FFFFFF;
width:125px;
height:26px;
position:absolute;
background-color:#2878C0;
border-top-style:ridge;
border-top-color:#2878C0;
border-top-width:1px;
border-bottom-style:ridge;
border-bottom-color:#2878C0;
border-bottom-width:1px;
border-left-style:ridge;
border-left-color:#1858B8;
border-left-width:1px;
border-right-style:ridge;
border-right-color:#508CC0;
border-right-width:1px;


}

.homebutton
{
left: 0px;
top: 115px;
width: 50px;
cursor:pointer;

}

.specialsbutton
{
left: 40%;
top: 110px;
width: 50px;
cursor:pointer;

}



/* About Us Button*/
.aboutusbutton
{
left: 50px;
top: 115px;
cursor:pointer;
width:55;

}
/* Printers Button*/
.printersbutton
{
left: 105px;
top: 115px;
width: 45px;
}


/* Mulit function Button*/
.copiersbutton
{
left: 150px;
top: 115px;
width: 125px;
}

/* Faxes Button*/

.faxesbutton
{
left: 275px;
top: 115px;
width: 50px;
}

/* ID Card Readers*/
.idprintersbutton
{
left: 325px;
top: 115px;
width: 95px;
}

/* P Touch Label Machines*/
.pbutton
{
left: 420px;
top: 115px;
width: 135px;
}

/* LCD Monitors*/
.lcdbutton
{
left: 555px;
top: 115px;
width:80;
}

/* Projectors */
.projectorbutton
{
left:635;
top: 115px;
width:65;
cursor:pointer;
}

/* Contact Us Button */
.contactusbutton
{
left: 700;
top: 115px;
cursor:pointer;
width:60;
}


</style>



</head>
<body bgcolor="#287895" class="pagebody" onload="checkbrowseragent();">
<form name="HomePage" method="post" action="" id="homepage">

<div id="pagepanel" class="sitepanel">
<div id="MFC" class="menu" onmouseover="highlight(event)" onmouseout="lowlight(event)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Brother" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Brother &gt;
</div>
<div class="menuitems" id="Konica Minolta" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Konica Minolta &gt;
</div>
<div class="menuitems" id="OKI" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">OKI &gt;
</div>
<div class="menuitems" id="Sharp" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Sharp &gt;
</div>
</div>
<div id="Printer" class="menu" onmouseover="highlight(event)" onmouseout="lowlight(event)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Brother" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Brother &gt;
</div>
<div class="menuitems" id="Konica Minolta" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Konica Minolta &gt;
</div>
<div class="menuitems" id="OKI" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">OKI &gt;
</div>

</div>
<div id="Fax" class="menu" onmouseover="highlight(event)" onmouseout="lowlight(event)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" url="" id="Brother" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Brother &gt;
</div>
<div class="menuitems" url="" id="OKI" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">OKI &gt;
</div>
<div class="menuitems" url="" id="Sharp" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Sharp &gt;
</div>
</div>
<div id="ID Card Printer" class="menu" onmouseover="highlight(event)" onmouseout="lowlight(event)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" url="" id="Zebra" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Zebra &gt;
</div>
</div>
<div id="Label Machine" class="menu" onmouseover="highlight(event)" onmouseout="lowlight(event)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Brother" url="" onclick="resultpage(this.parentElement.id,this.id)">Brother</div>
<div class="menuitems" id="Godex" url="" onmouseover="showsubmenu(event,this.parentElement.id)"
onclick="resultpage(this.parentElement.id,this.id)">Godex &gt;
</div>
</div>
<div id="LCD Monitor" class="menu" onmouseover="highlight(event)" onmouseout="lowlight(event)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Panels" url="" onclick="resultpagesub('NEC-LCD Panel','None')">Panels</div>
<div class="menuitems" id="Monitors" url="" onclick="resultpagesub('NEC-LCD Monitor','None')">Monitors</div>
<div class="menuitems" id="Televisions" url="" onclick="resultpagesub('NEC-LCD TV','None')">Televisions</div>
</div>
<div id="Brother-MFC" class="menu" name="copiersMenu" onmouseover="highlight(event)"
onmouseout="lowlightsub(event,this.name)" onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser Mono" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Mono</div>
<div class="menuitems" id="Laser Colour" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Colour</div>
<div class="menuitems" id="Inkjet Colour" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Inkjet
Colour</div>
</div>
<div id="Konica Minolta-MFC" class="menu" name="copiersMenu" onmouseover="highlight(event)"
onmouseout="lowlightsub(event,this.name)" onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser Mono" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Mono</div>
<div class="menuitems" id="Laser Colour" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Colour</div>
</div>
<div id="OKI-MFC" class="menu" name="copiersMenu" onmouseover="highlight(event)" onmouseout="lowlightsub(event,this.name)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser Mono" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Mono</div>
<div class="menuitems" id="Laser Colour" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Colour</div>
</div>
<div id="Sharp-MFC" class="menu" name="copiersMenu" onmouseover="highlight(event)" onmouseout="lowlightsub(event,this.name)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser Mono" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Mono</div>
</div>
<div id="Brother-Printer" class="menu" name="printersMenu" onmouseover="highlight(event)"
onmouseout="lowlightsub(event,this.name)" onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser Mono" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Mono</div>
<div class="menuitems" id="Laser Colour" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Colour</div>
</div>
<div id="Konica Minolta-Printer" class="menu" name="printersMenu" onmouseover="highlight(event)"
onmouseout="lowlightsub(event,this.name)" onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser Mono" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Mono</div>
<div class="menuitems" id="Laser Colour" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Colour</div>
</div>
<div id="OKI-Printer" class="menu" name="printersMenu" onmouseover="highlight(event)"
onmouseout="lowlightsub(event,this.name)" onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser Mono" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Mono</div>
<div class="menuitems" id="Laser Colour" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser
Colour</div>
<div class="menuitems" id="Dot Matrix" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Dot
Matrix</div>
</div>

<div id="Brother-Fax" class="menu" name="faxesMenu" onmouseover="highlight(event)" onmouseout="lowlightsub(event,this.name)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser</div>
<div class="menuitems" id="Thermal Ribbon" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Thermal
Ribbon</div>
</div>
<div id="OKI-Fax" class="menu" name="faxesMenu" onmouseover="highlight(event)" onmouseout="lowlightsub(event,this.name)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser</div>
</div>
<div id="Sharp-Fax" class="menu" name="faxesMenu" onmouseover="highlight(event)" onmouseout="lowlightsub(event,this.name)"
onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Laser" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Laser</div>
<div class="menuitems" id="Transfer Ribbon" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Transfer
Ribbon</div>
</div>
<div id="Zebra-ID Card Printer" class="menu" name="idprintersMenu" onmouseover="highlight(event)"
onmouseout="lowlightsub(event,this.name)" onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Single Sided" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Single
Sided</div>
<div class="menuitems" id="Double Sided" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Double
Sided</div>
</div>
<div id="Godex-Label Machine" class="menu" name="plblMenu" onmouseover="highlight(event)"
onmouseout="lowlightsub(event,this.name)" onclick="jumpto(event)" display:none="">
<div class="menuitems" id="Thermal Ribbon" url="" onclick="resultpagesub(this.parentElement.id,this.id)">Thermal
Label</div>
</div>
<input id="btnHome" type="button" class="homebutton" onMouseOver="Lite(this.id)" onMouseOut="Dim(this.id)"
onclick="gotohomepage()" value="Home"> <input name="MFC" id="copiers" type="button" class="copiersbutton" onMouseOver="Lite(this.id);showmenu(this.id,this.name)"
onMouseOut="Dim(this.id)" value="Multi Function Centres"> <input name="Printer" id="printers" type="button" class="printersbutton" onMouseOver="Lite(this.id);showmenu(this.id,this.name)"
onMouseOut="Dim(this.id)" value="Printers"> <input name="Fax" id="faxes" type="button" class="faxesbutton" onMouseOver="Lite(this.id);showmenu(this.id,this.name)"
onMouseOut="Dim(this.id)" value="Faxes"> <input name="ID Card Printer" id="idprinters" type="button" class="idprintersbutton" onMouseOver="Lite(this.id);showmenu(this.id,this.name)"
onMouseOut="Dim(this.id)" value="ID Card Printers"> <input name="Label Machine" id="plbl" type="button" class="pbutton" onMouseOver="Lite(this.id);showmenu(this.id,this.name)"
onMouseOut="Dim(this.id)" value="P-Touch/Label Machines"> <input id="btnLCDMonitors" name="LCD Monitor" type="button" class="lcdbutton" onMouseOver="Lite(this.id);showmenu(this.id,this.name)"
onMouseOut="Dim(this.id)" value="LCD Monitors"> <input id="btnProjectors" name="Projector" type="button" class="projectorbutton" onMouseOver="Lite(this.id)"
onMouseOut="Dim(this.id)" onclick="resultpagesub('NEC-Projector','None')" value="Projectors">
<input id="btnContactUs" type="button" class="contactusbutton" onMouseOver="Lite(this.id)"
onMouseOut="Dim(this.id)" onclick="gotocontactuspage()" value="Contact Us" NAME="btnContactUs">
<input id="btnAboutUs" type="button" class="aboutusbutton" onMouseOver="Lite(this.id)"
onMouseOut="Dim(this.id)" onclick="gotoaboutuspage()" value="About Us" NAME="btnAboutUs">


</form>
</body>
</html>
 
Status
Not open for further replies.

Similar threads

Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
759
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
606
PeDa
PeDa
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
714
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
645
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top