homepage Welcome to WebmasterWorld Guest from 67.202.56.112
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

    
Calling all Firefox and Mozilla experts
Not recognizing links
humpg




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

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

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

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

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

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'
}
}

Thanks

 

MatthewHSE




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

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?)

SuzyUK




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

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

Suzy

MatthewHSE




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

Hey,

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.

humpg




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

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
Gary

createErrorMsg




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

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

DIV1
DIV2
DIV3

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

DIV1 DIV2 DIV3.

Floating to the right gives this...

DIV3 DIV2 DIV1

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

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

css:
#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...
#outer{
background-color: blue;
}
#inner {
float:left;
}

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.

cEM

humpg




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

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

Gary

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Firefox Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved