Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Calling all Firefox and Mozilla experts

Not recognizing links



2:44 pm on Nov 12, 2004 (gmt 0)

10+ Year Member

I put this post up a little while back, and had only one person give this an attempt (thanks for trying BonRouge). And I have been banging my head against the wall for 2 weeks now. If anyone can help I would really appreciate it.

Here it goes:

I have a submenu that when you click on it a layer appears making it like a dropdown menu. There are a total of 4 buttons in Firefox and mozilla the first 3 are not even recognized as a link, but the fourth one is, when you click on it the submenu appears. Also behind all this the background I have set up is not showing up. If this doesn't make sense I can sticky mail the URL if anyone would like to see the page live.

Here is the HTML for all four menu buttons:

1:<a href="#" onclick="toggleSub('sub_product_mth'); return false" onmouseover="MM_showHideLayers('flyout_math1','','hide','hideflyout_sub','','hide')">
<img src="images/ed_layout/prod_menu_btns/str_menu_math.gif" alt="Math Series" border="0" />

2:<a href="#" onclick="toggleSub('sub_product_hlth'); return false" onmouseover="MM_showHideLayers('flyout_math1','','hide','flyout_math2','','hide','hideflyout_sub','','hide')">
<img src="images/ed_layout/prod_menu_btns/str_menu_hlth.gif" alt="Health Series" border="0" />

3:<a href="#" onclick="toggleSub('sub_product_lang'); return false" onmouseover="MM_showHideLayers('flyout_hlth2','','hide','flyout_hlth3','','hide','hideflyout_sub','','hide')">
<img src="images/ed_layout/prod_menu_btns/str_menu_lang.gif" alt="Language Series" border="0" />

4:<a href="#" onclick="toggleSub('sub_product_test'); return false" onmouseover="MM_showHideLayers('flyout_hlth2','','hide','flyout_hlth3','','hide','flyout_lang2','','hide','hideflyout_sub','','hide')">
<img src="images/ed_layout/prod_menu_btns/str_menu_test.gif" alt="Testing Series" width="173" height="41" border="0" />

And here is the Javascript to toggle the submenu on and off:

function toggleSub(submenu) {
if (document.getElementById(submenu).style.display == 'block') {
document.getElementById(submenu).style.display = 'none'
} else {
document.getElementById(submenu).style.display = 'block'



6:26 pm on Nov 12, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I'm not understanding the problem fully, I don't think, but I do believe we need a bit more of your HTML code to be able to help troubleshoot. Particularly, what are your links "nested" in? (Table, div, list, other, none?)


1:05 pm on Nov 15, 2004 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

If you take just the "menu" code out of the page and build it in a seperate page, is it working then?

the fact that the first 3 links are "not recognised" suggests that there is something on the existing page that is "overlapping" them e.g. a div with a higher natural stacking order (z-index )

and then if this "list" is floating it could be that the background is not showing because there is nothing in the container.. (floats are removed from the flow)

However first step would be to get the menu working independently from the layout and also try plain text content in the "menu" and main content areas and see what happens...



1:25 pm on Nov 15, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member


I looked at the source code of the page you stickied me, but unfortunately there's a ton of relevant code involved and I don't have time at the moment to go through it all. I think your first step should be to simplify things. Like SuzyUK said, get your menu to work independently of any page layout. When it's working, just copy and paste the menu code where you want it on the page.

Incidentally, you can probably find "better" ways of getting the effect you want. Check out the Suckerfish Dropdowns article at A List Apart for starters.


4:55 pm on Nov 15, 2004 (gmt 0)

10+ Year Member

Well it was a float problem, Didn't quite understand what SusyUK meant by floats are removed from the flow but I took the floats off two layers and did a little repositioning and it worked fine. (I'm new to this CSS thing)

But in doing so I have another problem. basically this is one layer containing 2 more layers. A Drop down menu on the left with flyout submenus and to the right of this is the Main body layer to hold the content for the page. Now when I click on the menu to see the submenu dropdown it is pushing my main body layer down.

Any Idea on how I can stop this from happening.

I may have to move this over too the CSS forum. But I thought I would ask you folks here first in case you looked at what I have done already.

CSS Dazed and Confused


9:50 pm on Nov 15, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I'm new to this CSS thing.

A Drop down menu on the left with flyout submenus.

These statements really ought to be mutually exclusive, by which I mean you are attempting to create an awfully complicated CSS feature for a beginning CSSer. I'm not saying you shouldn't try, just understand that frustration is par for the course, and even more so if you're bringing one of CSS's hardest implementations (drop menus) into play.

Didn't quite understand what SusyUK meant by floats are removed from the flow

All elements in the source code are considered 'in the document flow.' Unless they are explicitly removed from the flow, they stay there, meaning that they interact with other elements on the page in a normal way.

For instance, the default setting/behavior for the <div> element is as a block level element, meaning under normal circumstances, <div>s will stack vertically in the order they appear in the source code...


Removing items from the flow prevents them from interacting in normal ways with other elements, allowing you to move and shunt them around as you see fit, without it breaking the flow of the page.

Absolute positioning is the most popular way to remove elements from the flow. Abs pos elements have NO interaction with other stuff on the page and can be explicitly placed anywhere you like.

Floated elements are also removed from the flow, but retain limited interaction with other elements. First they are placed in their normal flow spot, then are lifted out and moved in their float direction until they hit the edge of their container or another float. Floating div1 div2 and div3 to the left gives this result...


Floating to the right gives this...


Non-floated inline boxes respond to floats by not aloowing their content to pass beneath one, so that a floated element cannot cover up text. Instead it wraps around the float. But otherwise, floats have no interaction with other elements because they are 'not in the flow.'

SuzyUK was referring to the fact that, because floats are removed from the flow, they do not influence the size of their container.

Consider this: an out div with a blue background contains a normal, in-flow div with a transparent background and height of 50px...

<div id="outer">
<div id="inner"></div>

#outer {
background-color: blue;
#inner {
height: 50px;

Because inner is a normal, in-flow, nested div, when it's height increases, so does the height of #outer. Since #outer's height increases, it's blue background color is dragged down and shows through all of the content in #inner.

However, if you change the css to this...
background-color: blue;
#inner {

Since #inner is now floated (and out of the flow), it does not affect the height of #outer, so #outer's background no longer shows through. Basically, #outer does not know that it has any content, because it's only content (#inner) has been lifted out of it and floated. So #outer snaps shut like a clam.

Not really relevant to your post now, since you've found a solution, but thought I'd share it by way of explanation anyway.



12:46 pm on Nov 16, 2004 (gmt 0)

10+ Year Member

Thanks alot, that was an excellent explanation and one that I can use very often.



Featured Threads

Hot Threads This Week

Hot Threads This Month