1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: Drop-Down Navigation Menu Incorrectly Displaying In Internet Explorer

Discussion in 'Web Design & Development' started by TW.87, Apr 9, 2008.

Thread Status:
Not open for further replies.
Advertisement
  1. TW.87

    TW.87 Thread Starter

    Joined:
    Dec 29, 2005
    Messages:
    308
    Hello,

    I'm currently developing a website (that you can see here) but I am having some problems at the moment with the navigation menu.

    As I said, I am still developing the website, so don't worry too much about all of the other little problems that are there.

    If you're using Internet Explorer, you'll see that the drop-down portion of the navigation menu is displaying incorrectly, as it is not wide enough to correspond with the links held within the drop-down. However, in Firefox, you'll be able to see that the width of the drop-down is as it should be.

    If someone is able to take the time to review what I've done there and see if they can determine a solution, I would greatly appreciate it.

    Thank you in advance!
     
  2. amanxman

    amanxman

    Joined:
    Mar 28, 2006
    Messages:
    690
    Can you paste the html and the css for this please - that'd help heaps....

    ideally, just paste the relevant html and css rather than the whole documents!!

    quickly looking thou, you should be able to fix it with IE specific style sheets... create a style sheet just read by IE (Internet Explorer) which puts more padding or width onto the drop down sections...

    To include a IE only style sheet, put this into the <head></head> of your page:

    <link rel="stylesheet" type="text/css" media="all" href="assets/style.css (your location of main style sheet" />
    <!--[if IE]><link rel="stylesheet" type="text/css" href="assets/ie.css (your location of IE style sheet)" /><![endif]-->

    NOTE: On the ie.css (IE style sheet) you only need to put the elements which need extra work for IE -- i.e. you don't need to copy everything from the main style sheet... IE will read main style sheet, and then read IE style sheet, and whatever is in IE style sheet will overrule anything in main style sheet...

    So an example:
    style.css:
    #main
    {
    padding: 10px 20px 10px 20px;
    }
    #sub
    {
    padding: 10px;
    }

    ie.css
    #main
    {
    padding: 10px 0px 10px 0;
    }

    You'll have Firefox having 10px 20px 10px 20px for #main, and IE will have 10px 0px 10px 0px. And both browsers will have 10px for #sub (even thou ie.css doesn't contain the #sub div it'll read from main style sheet)


    Make sense?

    But that might not be the answer, until we look at the html and css...

    ta
    amx
     
  3. TW.87

    TW.87 Thread Starter

    Joined:
    Dec 29, 2005
    Messages:
    308
    Thank you very much for your response!

    The HTML referring to the navigation menu is as follows:

    HTML:
    <td><a href="#" onclick="return NavigationSystem()" onmouseout="document.MainLink.src='../Global(Images)/Global(Image0005).png'; GlobalNavigationInactive()" onmouseover="document.MainLink.src='../Global(Images)/Global(Image0012).png'; GlobalNavigationActive(this,event,Main,'100px')" style="cursor:default;"><img alt="Main2" border="0px" height="40px" name="MainLink" src="../Global(Images)/Global(Image0005).png" width="125px" /></a></td>
    
    <td><a href="#" onclick="return NavigationSystem()" onmouseout="document.RickKellyLink.src='../Global(Images)/Global(Image0006).png'; GlobalNavigationInactive()" onmouseover="document.RickKellyLink.src='../Global(Images)/Global(Image0013).png'; GlobalNavigationActive(this,event,RickKelly,'100px')" style="cursor:default;"><img alt="Rick Kelly" border="0px" height="40px" name="RickKellyLink" src="../Global(Images)/Global(Image0006).png" width="132px" /></a></td>
    
    <td><a href="#" onclick="return NavigationSystem()" onmouseout="document.RacingLink.src='../Global(Images)/Global(Image0007).png'; GlobalNavigationInactive()" onmouseover="document.RacingLink.src='../Global(Images)/Global(Image0014).png'; GlobalNavigationActive(this,event,Racing,'100px')" style="cursor:default;"><img alt="Racing" border="0px" height="40px" name="RacingLink" src="../Global(Images)/Global(Image0007).png" width="132px" /></a></td>
    
    <td><a href="#" onclick="return NavigationSystem()" onmouseout="document.GalleriesLink.src='../Global(Images)/Global(Image0008).png'; GlobalNavigationInactive()" onmouseover="document.GalleriesLink.src='../Global(Images)/Global(Image0015).png'; GlobalNavigationActive(this,event,Galleries,'100px')" style="cursor:default;"><img alt="Galleries" border="0px" height="40px" name="GalleriesLink" src="../Global(Images)/Global(Image0008).png" width="132px" /></a></td>
    
    <td><a href="#" onclick="return NavigationSystem()" onmouseout="document.ExtraLink.src='../Global(Images)/Global(Image0009).png'; GlobalNavigationInactive()" onmouseover="document.ExtraLink.src='../Global(Images)/Global(Image0016).png'; GlobalNavigationActive(this,event,Extra,'100px')" style="cursor:default;"><img alt="Extra" border="0px" height="40px" name="ExtraLink" src="../Global(Images)/Global(Image0009).png" width="132px" /></a></td>
    
    <td><a href="#" onclick="return NavigationSystem()" onmouseout="document.SponsorsLink.src='../Global(Images)/Global(Image0010).png'; GlobalNavigationInactive()" onmouseover="document.SponsorsLink.src='../Global(Images)/Global(Image0017).png'; GlobalNavigationActive(this,event,Sponsors,'100px')" style="cursor:default;"><img alt="Sponsors" border="0px" height="40px" name="SponsorsLink" src="../Global(Images)/Global(Image0010).png" width="126px" /></a></td>
    The CSS relating to the navigation menu is as follows:

    Code:
    A.GlobalNavigationLink:Active,
    A.GlobalNavigationLink:Link,
    A.GlobalNavigationLink:Visited
    	{
    	background-color:#000000;
    	color:#6c6c6c;
    	cursor:default;
    	display:block;
    	font-family:Arial, Verdana, Tahoma, Sans-Serif;
    	font-size:11px;
    	padding-bottom:5px;
    	padding-left:10px;
    	padding-right:10px;
    	padding-top:5px;
    	text-decoration:none;
    	width:200px;
    	}
    
    A.GlobalNavigationLink:Hover
    	{
    	background-color:#ffffff;
    	color:#000000;
    	cursor:default;
    	display:block;
    	font-family:Arial, Verdana, Tahoma, Sans-Serif;
    	font-size:11px;
    	padding-bottom:5px;
    	padding-left:10px;
    	padding-right:10px;
    	padding-top:5px;
    	text-decoration:none;
    	width:200px;
    	}
    And, finally, the JavaScript relating to the menu is as follows:

    Code:
    	var Main=new Array()
    
    	Main[0]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=Main:Home">Home</a></div>'
    
    	Main[1]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=Main:News2006">News 2006</a></div>'
    
    	Main[2]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=Main:News2007">News 2007</a></div>'
    
    	Main[3]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=News:News2008">News 2008</a></div>'
    
    	var RickKelly=new Array()
    
    	RickKelly[0]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=RickKelly:Biography">Biography</a></div>'
    
    	RickKelly[1]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=RickKelly:Career">Career</a></div>'
    
    	RickKelly[2]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=RickKelly:Profile">Profile</a></div>'
    
    	RickKelly[3]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=RickKelly:Snap-Shot">Snap-Shot</a></div>'
    
    	var Racing=new Array()
    
    	Racing[0]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=Racing:Season2006">Season 2006</a></div>'
    
    	Racing[1]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=Racing:Season2007">Season 2007</a></div>'
    
    	Racing[2]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=Racing:Season2008">Season 2008</a></div>'
    
    	Racing[3]='<div><a class="GlobalNavigationLink" href="http://www.holdenmotorsport.com/" target="new"><font class="GlobalGrey" style="font-size:14px;">»</font> Holden Motorsport</a></div>'
    
    	Racing[4]='<div><a class="GlobalNavigationLink" href="http://www.hsvdt.com.au/" target="new"><font class="GlobalGrey" style="font-size:14px;">»</font> Toll HSV Dealer Team</a></div>'
    
    	Racing[5]='<div><a class="GlobalNavigationLink" href="http://www.v8supercar.com.au/" target="new"><font class="GlobalGrey" style="font-size:14px;">»</font> V8 Supercars Australia</a></div>'
    
    	var Galleries=new Array()
    
    	Galleries[0]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=Galleries:Gallery2006">Gallery 2006</a></div>'
    
    	Galleries[1]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=Galleries:Gallery2007">Gallery 2007</a></div>'
    
    	Galleries[2]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=Galleries:Gallery2008">Gallery 2008</a></div>'
    
    	Galleries[3]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=Galleries:Wallpapers">Wallpapers</a></div>'
    
    	var Extra=new Array()
    
    	Extra[0]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=Extra:ClubRK">ClubRK</a></div>'
    
    	Extra[1]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=Extra:Links">Links</a></div>'
    
    	Extra[2]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=Extra:Projects">Projects</a></div>'
    
    	var Sponsors=new Array()
    
    	Sponsors[0]='<div><a class="GlobalNavigationLink" href="/Website/-Global/Global(Assets)/Global(Directory).php?Directory=Sponsors:Sponsors">Sponsors</a></div>'
    
    	var menuwidth='200px'
    
    	var menubgcolor='000000'
    
    	var disappeardelay=0
    
    	var hidemenu_onclick="yes"
    
    	var ie4=document.all
    
    	var ns6=document.getElementById&&!document.all
    
    	if (ie4||ns6)
    
    	document.write('<div id="GlobalNavigation" style="background-color:#000000;filter:alpha(opacity=80);margin-left:7px;margin-top:1px;opacity:.8;position:absolute;text-align:left;visibility:hidden;width:'+menuwidth+';z-index:5;" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
    
    	function getposOffset(what, offsettype)
    
    	{
    
    	var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    
    	var parentEl=what.offsetParent;
    
    	while (parentEl!=null)
    
    	{
    
    	totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    
    	parentEl=parentEl.offsetParent;
    
    	}
    
    	return totaloffset;
    
    	}
    
    	function showhide(obj, e, visible, hidden, menuwidth)
    
    	{
    
    	if (ie4||ns6)
    
    	dropmenuobj.style.left=dropmenuobj.style.top=-500
    
    	if (menuwidth!="")
    
    	{
    
    	dropmenuobj.widthobj=dropmenuobj.style
    
    	dropmenuobj.widthobj.width=menuwidth
    
    	}
    
    	if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    
    	obj.visibility=visible
    
    	else if (e.type=="click")
    
    	obj.visibility=hidden
    
    	}
    
    	function iecompattest()
    
    	{
    
    	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    
    	}
    
    	function clearbrowseredge(obj, whichedge)
    
    	{
    
    	var edgeoffset=0
    
    	if (whichedge=="rightedge")
    
    	{
    
    	var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    
    	dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    
    	if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
    
    	edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
    
    	}
    
    	else
    
    	{
    
    	var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    
    	dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    
    	if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
    
    	edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    
    	}
    
    	return edgeoffset
    
    	}
    
    	function populatemenu(what)
    
    	{
    
    	if (ie4||ns6)
    
    	dropmenuobj.innerHTML=what.join("")
    
    	}
    
    	function GlobalNavigationActive(obj, e, menucontents, menuwidth)
    
    	{
    
    	if (window.event) event.cancelBubble=true
    
    	else if (e.stopPropagation) e.stopPropagation()
    
    	clearhidemenu()
    
    	dropmenuobj=document.getElementById? document.getElementById("GlobalNavigation") : GlobalNavigation
    
    	populatemenu(menucontents)
    
    	if (ie4||ns6)
    
    	{
    
    	showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
    
    	dropmenuobj.x=getposOffset(obj, "left")
    
    	dropmenuobj.y=getposOffset(obj, "top")
    
    	dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
    
    	dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
    
    	}
    
    	return NavigationSystem()
    
    	}
    
    	function NavigationSystem()
    
    	{
    
    	if (ie4||ns6) return false
    
    	else return true
    
    	}
    
    	function contains_ns6(a, b)
    
    	{
    
    	while (b.parentNode)
    
    	if ((b = b.parentNode) == a)
    
    	return true;
    
    	return false;
    
    	}
    
    	function dynamichide(e)
    
    	{
    
    	if (ie4&&!dropmenuobj.contains(e.toElement))
    
    	GlobalNavigationInactive()
    
    	else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    
    	GlobalNavigationInactive()
    
    	}
    
    	function hidemenu(e)
    
    	{
    
    	if (typeof dropmenuobj!="undefined")
    
    	{
    
    	if (ie4||ns6)
    
    	dropmenuobj.style.visibility="hidden"
    
    	}
    
    	}
    
    	function GlobalNavigationInactive()
    
    	{
    
    	if (ie4||ns6)
    
    	delayhide=setTimeout("hidemenu()",disappeardelay)
    
    	}
    
    	function clearhidemenu()
    
    	{
    
    	if (typeof delayhide!="undefined")
    
    	clearTimeout(delayhide)
    
    	}
    
    	if (hidemenu_onclick=="yes")
    
    	document.onclick=hidemenu
    Apologies if I've posted more than is needed - I wasn't sure what would and what would not be of relevance.

    I thought it might be worth looking through this first, as the navigation menu worked in Internet Explorer perfectly a little while ago - but it would seem that I've made a change since then that's done some damage. So I know the script is capable of playing nicely, but I just can't work out why it isn't at the moment.

    Thank you again for your help!
     
  4. amanxman

    amanxman

    Joined:
    Mar 28, 2006
    Messages:
    690
    try the IE style sheet business with the following:

    A.GlobalNavigationLink:Hover
    {
    background-color:#ffffff;
    color:#000000;
    cursor:default;
    display:block;
    font-family:Arial, Verdana, Tahoma, Sans-Serif;
    font-size:11px;
    padding-bottom:5px;
    padding-left:10px; - try more padding
    padding-right:10px; - try more padding
    padding-top:5px;
    text-decoration:none;
    width:200px; -- try more width
    margin: 0px; -- try forcing 0 side margins.
    }

    let us know if that helps when uve put in the IE only style...

    amx
     
  5. TW.87

    TW.87 Thread Starter

    Joined:
    Dec 29, 2005
    Messages:
    308
    Thanks for the advice with that, but I haven't had any luck, unfortunately.

    If you have any other suggestions, I would really appreciate hearing them.
     
  6. TW.87

    TW.87 Thread Starter

    Joined:
    Dec 29, 2005
    Messages:
    308
    Would anyone know what I could try to do next to get this to work?

    Any help would really be appreciated.
     
  7. Gigacore

    Gigacore

    Joined:
    Jul 19, 2007
    Messages:
    577
  8. TW.87

    TW.87 Thread Starter

    Joined:
    Dec 29, 2005
    Messages:
    308
    Thank you for the link, but it's a program that requires purchase to use completely. I know that the script I have posted above will work (as I've used it before), and no doubt the problem with it is something very minor.

    If someone can help me work this out, I would be really grateful.
     
  9. Gigacore

    Gigacore

    Joined:
    Jul 19, 2007
    Messages:
    577
  10. TW.87

    TW.87 Thread Starter

    Joined:
    Dec 29, 2005
    Messages:
    308
    Thanks very much for the links, and for the bump.

    I'll give those a go if I absolutely cannot get the navigation menu I've got working. I'm rather set on it because I know it can work, the problem it has currently is only a small one, and I really like the way it works and displays.

    If anyone is able to help me work this one out, I would really appreciate it.
     
  11. TW.87

    TW.87 Thread Starter

    Joined:
    Dec 29, 2005
    Messages:
    308
    It pays to take a moment to actually look at the code. The problem is fixed - I had overlooked something incredibly simple (there was a statement defining the width of the display at 100PX, hence the problem) - so now I am slamming my head against the keyboard, given that I've been frustrated by this for a week! Ha ha!

    Thank you for your help, everyone.
     
  12. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/701871

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice