...

View Full Version : CSS drop-down menu problems in Moz



japangreg
08-24-2005, 04:59 PM
Hi, all.

Small problem buring a redesign: I'm moving all of our menu info from hard-coded table layout to a CSS-styled list, complete with drop-down function via sucker fish.

So far it's all systems go in IE. However, when I test in FF, the hover which keeps the second list displayed seems to go false when I mouse over part of the menu which covers a DIV below it. This only happens when the DIV being covered contains a link, and I do not have to mouse over the link itself to cause the error.

A quick description of how I have this set up: I have a DIV called holder; inside that, I have one called nav that contains the menu lists and is absolutely positioned and has a z-index of 1000. I then have a div called content that holds all of my other divs; content is absolutely positioned with a z-index of 1.

When the menu drops down over the divs in content, I can mouse down over the menu options all the way to the end if the div in content I'm moving over has no a links. If it does, the menu dissapears as soon as the mouse enters the div with the links.

The site is current on our test server on our LAN, so I can't post a link to it, but I can copy/past most of the code here: The menu itself:

<ul id="nav">
<li><a href="/default.asp">Home</a>
<ul>
<li><a href="#">Stuff 1</a></li>
<li><a href="#">Stuff 2</a></li>
<li><a href="#">Stuff 3</a></li>
<li><a href="#">Stuff 4</a></li>
</ul>
</li>
<li><a href="/members/default.asp">Members</a>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Upcoming events</a></li>
<li><a href="#">Etc.</a></li>
</ul>
</li>
</div>The styles:

#navigation{
background-image: url('../images/header.jpg');
background-repeat: no-repeat;
background-position: top left;
background-color: #999966;
position: absolute;
top: 66px;
margin: 0px;
width: 100%;
height: 58px;
padding: 0px;
z-index: 1000;
}

#navigation ul{
margin: 0px;
padding-top: 35px;
padding-left: 0px;
margin-left: 5px;
list-style-type: none;
text-align: left;
}

#navigation li{
float:left;
position: relative;
margin-right: 8px;
padding: 0px;
height: 25px;
}

#navigation li ul{
list-style-type: disk;
display: none;
position: absolute;
top: 25px;
left: -1px;
margin: 0px;
padding: 0px;
width: 135px;
background-color: #999966;
border: solid 1px #000000;
border-top: 0px;
}

#navigation li ul li{
float: none;
padding: 0px;
margin: 0px;
}

#navigation li:hover ul{
display: block;
}

#navigation li.over ul{
display: block;
}

#navigation a, #navigation li.current a{
padding-left: 7px;
padding-right: 7px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
font-size: 8pt;
}

#navigation li.current{
background-image: url("../images/main_style_images/nav_right_corner.gif");
background-repeat: no-repeat;
background-position: top right;
}

#navigation li.current a{
background-image: url("../images/main_style_images/nav_left_corner.gif");
background-repeat: no-repeat;
background-position: top left;
color: #000000;
text-decoration: none;
}

#navigation li.current ul{
background-color: #ffffff;
border: solid 1px;
border-top: 0px;
}

#navigation li li a:hover{
color: #000000;
}

#navigation li.current li a{
background-image: none;
color: #000000;
}

#navigation a{
padding-top: 5px;
display: block;
}

#content{
position: absolute;
top: 143px;
width: 800px;
margin: 0px;
padding: 0px;
background-color: #ffffff;
z-index: 1;
clear: left;
}

/*one of the divs causing trouble*/
#multimedia{
border: solid 1px;
position: absolute;
width: 500px;
margin: 0px 10px 10px 00px;
padding: 10px;
height: 300px;
overflow: auto;
text-align: left;
}That last div contains a few links. That's all.

I'm not sure what the problem is - I've set the z-index and clear:left 'ed the content. Anyone have a guess as to what the issue might be?

Any replies greatly appreciated.

_com
08-24-2005, 06:04 PM
Try these (multi-level) menus, they work better cross-browser, forget suckerfish for a moment (good explanations too):

<http://www.aplus.co.yu/adxmenu/examples/ >

japangreg
08-24-2005, 06:50 PM
Thanks for the reply, _com. Those menus seem to have a similar problem, except with IE. When I try them in IE and open a menu that extends down over the footer with the link, the menu vanishes.

I'll have to take a little time to read through that site and see what their approach is, but in the meantime I'd still like to find out what is wrong with my code, if anyone has any ideas. Thanks!

japangreg
08-25-2005, 04:04 PM
~bump~

mrruben5
08-25-2005, 06:54 PM
Do you have troubles with that? Check the instructions. If that fails, drop me a comment, and I will help, but only if you:

1. use standard-compliant browser mode
2. validate your HTML
3. post an example URL

You don't know what the first two means? Well, I honestly think you will have too much problems with all this stuff, especially in Internet Explorer. Please learn, and then come back. Author states it well. Got a proper doctype?

Holden1
08-25-2005, 07:09 PM
Using some of the provided links, I was able to find these:

http://www.aplus.co.yu/adxmenu/examples/netymology/
http://www.aplus.co.yu/adxmenu/examples/netymology-hs/


Now, if I could get the categories to be in 2 vertical panels like our original home page, and then have the dropdowns open towards the middle...


That, or maybe I'll rethink the entire site design.

hmmmm.

Thanks, keep the info coming...

Holden1
08-25-2005, 07:12 PM
Using some of the provided links, I was able to find these:

http://www.aplus.co.yu/adxmenu/examples/netymology/
http://www.aplus.co.yu/adxmenu/examples/netymology-hs/


Now, if I could get the categories to be in 2 vertical panels like our original home page, and then have the dropdowns open towards the middle...


That, or maybe I'll rethink the entire site design.

hmmmm.

Thanks, keep the info coming...


Oops. Sorry, I meant to put this reply over here:

http://www.codingforums.com/showthread.php?p=348722#post348722


I must have been nosing around in this thread, and forgot that it wasn't the one I started. I'll move the reply over there manually. Thanks and sorry.

japangreg
08-25-2005, 08:06 PM
Hey, MrRuben5.

I've got <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> as my doc type declaration, and my HTML is validating in my devl application (Homesite 5). I can't post up a URL as the site is currently running from my test server on our LAN (I don't want to put it out on our real server till I remove some of our more sensitive info).

I also have found that this behavior is not always constant - the site is currectly very sparse, but there appear to be only to DIVs which have this effect. Other DIVs (even those with links within them) do not cause this.

The styles for the two offenders are:

#news_box{
position: absolute;
left: 525px;
text-align: right;
margin-left: 10px;
padding: 0px;
width: 250px;
height: 275px;
overflow: hidden;
}

#news_box a{
font-size: 8pt;
}

#news_box_content{
margin: 0px;
padding-left: 10px;
padding-right: 10px;
height: 235px;
overflow: auto;
text-align: left;
}

#news_box_content a{
color: #004584;
font-size: 8pt;
text-decoration: none;
}

#news_box_content a:hover{
text-decoration: underline;
}

#news_box h1{
margin-bottom: 0px;
padding-left: 10px;
border-bottom: solid 1px #000000;
background-color: #3399CC;
color: #ffffff;
font-size: 12pt;
text-align: left;
}

#news_box_content p{
text-align: left;
color: #662426;
font-size: 8pt;
font-weight: bold;
text-decoration: underline;
margin-bottom: 0px;
margin-top: 15px;
}

#multimedia{
border: solid 1px;
position: absolute;
width: 500px;
margin: 0px 10px 10px 00px;
padding: 10px;
height: 300px;
overflow: auto;
text-align: left;
}

#multimedia img{
float: left;
width: 250px;
margin-right: 20px;
}

#multimedia h1{
font-size: 12pt;
color: #662426;
font-weight: bold;
margin-bottom: 5px;
padding: 0px;
}Anyone have any idea why this might be happening?

mrruben5
08-25-2005, 08:27 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">A DTD without url will force browsers to go in quirks mode also.

http://www.w3.org/QA/2002/04/valid-dtd-list.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

You need the above.

japangreg
08-25-2005, 09:06 PM
Thanks, MrRuben5. That had the effect of completely destroying my layout in IE; but, it is still okay in FF, so I must be doing something right. :)

However, the menu bug still continues; if no one can figure this out from my description and code examples, I'll try to get an example up on a server somewhere soon.

Thanks for the help so far!

mrruben5
08-25-2005, 10:10 PM
Obviously you like to have IE to be in what we call "quirks mode". Put a comment at the top of your page, then the doctype underneath that. Anything before the doctype will throw IE into quirksmode, while it doesn't for others.

If you develop in XHTML you can put a xml prolog instead of a comment in there and it will still be quirks mode for IE. (Yeah most of us here use xhtml)

Hope that helps.

japangreg
08-26-2005, 03:21 PM
Quirks mode is just easier, as it lets me be a bit sloppy in my work. I'm trying to get myself into the habit of using web standards, so I'll try to rework it with the correct doctype declaration. Thanks again, MrRuben5.

Still working on the drop down issue though - as always, any insight is appreciated.

japangreg
08-29-2005, 05:49 PM
...one last bump...

bazz
08-29-2005, 07:19 PM
don't forget taht with Suckerfishes menu, you need to include his small amount of JS otherwise it won't work in IE.

Bazz

mrruben5
08-29-2005, 07:22 PM
...Well we'd really have to see more of your code to help you.

don't forget taht with Suckerfishes menu, you need to include his small amount of JS otherwise it won't work in IE.

Bazz
japangreg said it worked fine in IE ;)

bazz
08-30-2005, 11:50 AM
Blimey, sorry. :o

I got mixed up between this thread and Holden1's, which also was about Suckerfish's menu.

Bazz

japangreg
08-31-2005, 04:39 PM
Hi, all.

I figured out what was causing the problem - the overflow property. Both of the DIVs that I mentioned before had an overflow: auto in their styles - I changed that to hidden and it works fine.

My only problem now is that one of the DIVs that now gets sucessfully covered by the menu was supposed to be a listing of our latest press-releases; I wanted to have it scroll as necessary to accomidate more releases/longer headlines. Now that I have to turn overflow to hidden, it no longer has that flexibility.

Anyone ever hear of this behavior before? Now that I've isolated the problem, and ideas on how to work around it?

Again, thanks for all the help so far.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum