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

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.
T

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!
 
A

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
 
T

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!
 
A

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
 
T

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.
 
T

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.
 
T

TW.87

Thread Starter
Joined
Dec 29, 2005
Messages
308
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.
 
T

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.
 
T

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.
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

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 807,865 other people just like you!

Latest posts

Staff online

Members online

Total: 427 (members: 5, guests: 422)
Top