Grow your CSS skills. Land your dream job.

[Solved] IE menu and horizontal scroll issue.

  • # August 3, 2009 at 6:50 pm

    Hi this is the first time posting. I’m having two problems one is a problem that is global to all browsers and the other is only occurring in IE 7 and lower. You can view the site at http://www.academicmusicschool.com I am a teacher at the school and I offered to do this to gain more experience in the web world.

    Anyways, the IE problem: The nested menu that I have created is hiding behind main content. In other words my submenus are essentially useless and hidden in versions of IE lower then 8. In versions lower then 7 the menu will not show at all upon hovering over the main menu. I have done an all HTML/CSS version of the menu (No Javascript). As for trouble shooting I have try z-index with no luck. I have also try pulling out my hair but that doesn’t do much either.

    The second problem seems that I have horizontal scroll but there is no text to make this happen. There seems to be some blank space on the side of the screen. This problem is occuring in all browsers that I am aware of.

    On top of the above I have validated the HTML to the best of my abilities.

    Thanks for the help,
    Jordan

    # August 4, 2009 at 1:43 pm

    Seems like the page is currently unavailable, is that just temporary?

    # August 4, 2009 at 2:01 pm

    Try adding this in the head section for the menu problem:

    Code:

    I’m not seeing a horizontal scrollbar.

    # August 4, 2009 at 4:38 pm

    I can see the horizontal scroll bar, and I’ve located the source of part of the problem. The CSS IDs #plumbPianos and #directory have a width of 749px that push out towards the right, that’s is what gives you the scroll bar. You have to rewrite the code for how you display the links in your footer.

    # August 4, 2009 at 5:03 pm
    "immel" wrote:
    I can see the horizontal scroll bar, and I’ve located the source of part of the problem. The CSS IDs #plumbPianos and #directory have a width of 749px that push out towards the right, that’s is what gives you the scroll bar. You have to rewrite the code for how you display the links in your footer.

    You’re absolutely right. I’m on a large monitor (1920) and I never thought to resize the window down. :oops:

    # August 4, 2009 at 11:32 pm

    Thanks for the thoughts. I originally thought it was fine as well and then I tried to resize to see what a smaller screen might see. Low and behold a horizontal scroll problem.

    Thanks for the help. I will input the suggestions in the morning and see how things work. I’ll be sure to let you all know how it turns out.

    # August 5, 2009 at 10:26 pm

    So I’ve had a chance to try out the solutions suggested.

    The horizontal scroll problem has been solved in Firefox, Safari and IE 8 thanks for the tip. The horizontal problem still seems to be occurring in IE 7. I’m not concerned with IE 6 as I hoping most people will have upgraded by now.

    But more importantly the menu problem still persists. I tried implementing the google hack but had no luck. I will keep trying to find a solution myself. Please keep posting ideas as I am interested to see what people think is the problem.

    # August 6, 2009 at 12:57 am

    Try removing float: left; from #menu ul.

    # August 6, 2009 at 11:22 pm

    This is a tricky one for some reason. I’ve removed the float as you said but still the menu is hidden behind the content in IE 7.

    I’ll keep messing with it until something works. Please keep those suggestions coming.

    # August 6, 2009 at 11:49 pm

    So I’ve fixed it. It’s a compromise as I had to remove the jqury script that makes the nice rounded corners. Thanks for the help from all.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".