View Full Version : Nav menu problem

08-09-2005, 10:05 PM
I posted about a week ago about a couple problems with the site I am working on. I did get the layout almost done (with FF it looks perfect), but it doesn't work in IE.

When you hover over the buttons in the nav menu, a sublist drops down, but when you go to hover over the sublist, it goes away. I have tried setting the z-index on the nav menu, but it doesn't seem to make a difference. There is another problem with the scrolling in FF. It does scroll, but not all the way to the bottom of the page where it is supposed to end. :(

Now, for IE, my #content div doesn't layout where it is supposed to. It is way up further than it should be. I'm not sure why.

Here is the links. If I could get any help I would appreciate it. Thanks!
Main Page - www.matrixti.com/test/index.html
Scrollable Page - www.matrixti.com/test/pharm.html

08-10-2005, 01:05 AM

Sorry I forgot to upload my CSS. Here it is. Thanks.

Tristan Gray
08-10-2005, 02:04 PM
Well the first thing I would say is to get your layout sorted out because IE is about 90% of the browser share give or take and the site does not display even readably in IE 6.

I cannot get your buttoms to display any submenu at all even for an instant. You need to adjust your iframe so that it is in the space designated for it by your template rather than continuing into your banner etc. I am guessing you are probably using percentages and not fixed properties for your iframe position and height correct?

08-10-2005, 11:02 PM
You cannot use id's more then once.

Use suckerfishies. http://www.alistapart.com/articles/dropdowns/

08-11-2005, 10:06 PM
I've changed the menu items to use classes instead of id's mrruben. Thanks for that. The menu layout is fine in FF and in IE.

Still though, in FF the submenu's display but I still can't hover over them. In IE the hover doesn't work because of the known hover bug.

In my code below, I thought this would change the display to show the subnavlist, which it does, but I can't hover over the items in the subnavlist.
However, if i remove the li:hover, all the submenus are not hidden and always displayed, and I can hover over them no problem.

I'm not using an IFrame either. I've absolute positioned all the divs except the content div so that it is the only scrollable portion of the page, and everything else is always visible. I set the content to have a margin-top: 170px; and a height of 100%, but it doesn't seem to want to scroll all the way down. If you highlight and scroll all the text down, you will see that there is more text than when you scroll down with the scrollbars.

ul.subnavlist {
display: none;

ul.subnavlist li {
float: none;

ul.subnavlist li a {
padding: 0px;
margin: 0px;

ul.navlist li:hover ul.subnavlist { /* NOT SURE ABOUT THIS ONE */
display: block;
position: fixed;
font-size: 8pt;
padding-top: 0px;

ul.navlist li:hover ul.subnavlist li a {
display: block;
width: 157px;
border: none;
padding: 2px;
background-image: url(images/button.png);
background-repeat: none;

Sorry if I am being a pain with this. I've been reading about CSS a lot now but still have difficulty. I really do appreciate the help. Thanks.

Here's an updated CSS.