menu "overlaps" link on page

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:31

menu "overlaps" link on page

Poster: Trond Ulseth
Dated: Wednesday April 28 2004 - 15:18:03 BST

Hello,

I have a strange problem (in IE 6). If you take a look at http://www.idl.no/kunder/thermobygg/index.cfm?id=8 there's a box to the right with two links, but when I mouse over the top one it does not act like a link.

The problem can also be seen at http://www.idl.no/kunder/thermobygg/index.cfm?id=12. Here there's a company logo which is linked, but if you move the mouse from top to bottom of the image you will see that there's an area of it which is not linked.

When I comment out the menu everything acts normaly. Anyone have a clue what migh be going on, and how to fix it?

Thank you
Trond Ulseth

Poster: John
Dated: Wednesday April 28 2004 - 15:25:15 BST

On quick glance, one problem I can see with the menu is it does not like to be enclosed in <div>. You actually have it inside 2 <div> tags. Use the various menu parameters to position it.

Poster: jnewton
Dated: Monday May 3 2004 - 14:34:19 BST

John,

What do you mean by

Quote:

it does not like to be enclosed in <div>.

I have my menu enclosed with <div> and it seems to work ok, with the exception of menus too close to the right edge of the window fold back to far to the left.

Thanks,

John

Poster: John
Dated: Monday May 3 2004 - 15:26:32 BST

From one of Andy's earlier posts...

Quote:

The menu is inside a <DIV> Not sure what the benefit of that is but it is causing the problem.

The menu has its own <div>s built in, among other things. Adding additional ones on the 'outside' messes up the layering and can cause all kinds of problems.

Poster: jnewton
Dated: Monday May 3 2004 - 15:48:11 BST

John,

This is the portion of code that I have my menu called in:

<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link rel="stylesheet" type="text/css" media="all" href="mlca.css" />
<script language="JavaScript" src="milonic_src.js" type="text/javascript"></script>
<script language="JavaScript" src="mmenudom.js" type="text/javascript"></script>
<script language="JavaScript" src="tooltips.js" type="text/javascript"></script>
<script language="javascript" src="scripts.js" type="text/javascript"></script>
</head>

<body>
<div id="header">
<h2>Welcome to the Maintenance and Logistics Command, Atlantic</h2>
</div>
<div id="main-menu">
<script language="JavaScript" src="menu_data.js" type="text/javascript"></script>
</div>

Are you suggesting that I don't need the <div> statements for the menu?
I'd rather use CSS that tables for formating, especially as now I'd have to do a lot of re-writing.

Thanks,

John

Poster: John
Dated: Monday May 3 2004 - 15:56:28 BST

Hi John -

First off, your JS menu calls are incorrect/incomplete. Check the install.txt that comes with the download.

As for the <div>, yes, they are not necessary. Put the _data call in a <td> or position it from within the menu itself.

Got a URL?

Poster: jnewton
Dated: Monday May 3 2004 - 18:48:17 BST

From Install.txt:

<SCRIPT language=JavaScript src="milonic_src.js" type=text/javascript></SCRIPT>
<script language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>");
</script>
<SCRIPT language=JavaScript src="menu_data.js" type=text/javascript></SCRIPT>

How are my javascript call incomplete? I know I'm not using the netscape portion (in RED), there is no need as we are a controlled environment and only use IE. No need to load extra code if it is not going to be used. As for the location of the menu_data.js, this is the area that I need the menu to appear in, thus the <div> tags. Your saying use a single cell table. This strikes me as a lot of extra code for positioning. CSS and XHTML specs are reccomending using <div> for this sort of formatting.

I wish that there was a way to provide you access, but I'm developing on our intranet which is pretty well locked down. The U.S. Coast Guard is kind of funny that way. However, I can provide code if that will help.

Thanks,

John

Poster: jnewton
Dated: Tuesday May 4 2004 - 17:39:21 BST

John,

I think that you have found the problem and posted the results in another post. It looks like Andy will have to fix it.

Anyway, back to our discussion on <div> vs <table>.

I went back and put the menu_data in a table, which takes six tags instead of the two for a <div>. The results were exactly the same and the menu works the same in both the <div> and the <table>. Perhaps in my situation the <div> tag is not causing any problems. It could aslo be the way that I have the ,div> and CSS setup as well. I rememder trying to set the position property in the CSS file to relative and having a real mess. Not setting the position property, ion the CSS file, defaults to static and it seems to work just fine. I have not tried absoulte, it might work as well.

John Newton
USCG, MLCA

Poster: Maz
Dated: Tuesday May 4 2004 - 20:34:26 BST

I use Safari and the links above do not drop submenus.

The menu is not mean't to go in a div so even if it does work now is no gaurantee it will work later, since I doubt it would be taken into account that someone had it working in a div.

In the long term you might be better placing it absolute by positioning
top= ;
screenposition="right";
left="offset=-4px"; (or however many needed)

maz

Industrial Strength JavaScript and DHTML Menus

menu "overlaps" link on page