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

TW.87 · Apr 9, 2008

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!

amanxman · Apr 9, 2008

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" />


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

TW.87 · Apr 9, 2008

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!

amanxman · Apr 9, 2008

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

TW.87 · Apr 12, 2008

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.

TW.87 · Apr 15, 2008

Would anyone know what I could try to do next to get this to work?

Any help would really be appreciated.

Gigacore · Apr 16, 2008

Use DHTML Menu Builder and create the menus from scratch. It worked fine for most of the browser in my case..

http://software.xfx.net/utilities/dmbuilder

TW.87 · Apr 21, 2008

Gigacore said: ↑

Use DHTML Menu Builder and create the menus from scratch. It worked fine for most of the browser in my case..

http://software.xfx.net/utilities/dmbuilder
Click to expand...

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.

Gigacore · Apr 22, 2008

bump..

try the below free stuffs:

http://www.tamingthebeast.net/generators/dhtmlmenu.htm
http://www.coffeecup.com/free-dhtml/
http://www.freedownloadscenter.com/Programming/Java/Sothink_DHTML_Menu_Builder_Free_Version.html
http://www.freedownloadscenter.com/Web_Authoring/Misc__Web_Authoring_Tools/JS_Menu_Maker.html

TW.87 · Apr 23, 2008

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.

TW.87 · Apr 26, 2008

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.

Log in or Sign up

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

TW.87 Thread Starter

amanxman

TW.87 Thread Starter

amanxman

TW.87 Thread Starter

TW.87 Thread Starter

Gigacore

TW.87 Thread Starter

Gigacore

TW.87 Thread Starter

TW.87 Thread Starter

Sponsor

Welcome to Tech Support Guy!

Log in or Sign up

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

TW.87 Thread Starter

amanxman

TW.87 Thread Starter

amanxman

TW.87 Thread Starter

TW.87 Thread Starter

Gigacore

TW.87 Thread Starter

Gigacore

TW.87 Thread Starter

TW.87 Thread Starter

Sponsor

Welcome to Tech Support Guy!

Useful Searches