Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Nav menu problem

    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
    Last edited by Spankinator; 08-09-2005 at 11:10 PM.

  • #2
    New Coder
    Join Date
    May 2005
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    *EDIT*

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

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?
    Once I thought I was wrong but I was mistaken.

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You cannot use id's more then once.

    Use suckerfishies. http://www.alistapart.com/articles/dropdowns/
    CATdude about IE6: "All your box-model are belong to us"

  • #5
    New Coder
    Join Date
    May 2005
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


    Code:
    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.
    Attached Files Attached Files


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •