Skip navigation
Design054atAlphagraphics
Design054atAlphagraphics Calculating status...
Currently Being Moderated

Dynamic Menu buggy in IE8 and below - How to fix?

Apr 12, 2012 8:40 AM

Tags: #menu-problems #ie-problems

Hi friends,

I have created a site and use the Dynamic Menu module to do the navigation.  They look ok in Chrome and Firefox but when open IE8 and previous versions, the menus are pushed off farther to the right and stick for a long time.  There is also a mysterious horizontal rule above my menu in these versions of IE also!  I cannot figure out how to fix.. however my customer is relatively unhappy.  Perhaps due to my intermediate nature as a web developer

Any clues or suggestions would be fantastic:

 

www.visionquestdallas.com

 

http://www.screencast.com/t/iYVPmIvsa

768 Views   10 Replies   Latest reply: Design054atAlphagraphics, Apr 20, 2012 6:50 AM
 
Replies
  • Liam Dilley
    4,013 posts
    Feb 28, 2012
    Currently Being Moderated
    1. Liam Dilley,
    Apr 12, 2012 3:03 PM   in reply to Design054atAlphagraphics
    Report

    Hey there,

    You got to get the coding and css right.

    IE 8 and IE7 have issues with how it renders stuff, IE7 does not clear floats correctly for example.

    With a menu you need to ensure the li parent element of dropdowns has a position relative and the ul child is absolute positioned for example. I often see only the latter. Padding will often thow you out for IE7 and IE8 due to their box modal. You should use line height for vertical centering over top bottom padding.

     
    |
    Mark as:
  • Katharine@CCEDesign
    Currently Being Moderated
    2. Katharine@CCEDesign,
    Apr 13, 2012 6:40 AM   in reply to Liam Dilley
    Report

    I've got a similar problem at the moment. But this is with the most basic Dynamic Menu possible (due to probs with Oxo template and floats/backwards compatibility). I may redo the menu later, but for now I just need to get this last bit working.

     

    So, the submenus aren't appearing directly under their parent item. Plus they change position depending on what browser I'm using, as well as what size the screen is!

    I've fiddled with the offset settings in the Dynamic Menu so that it is approximately right in IE with a maximised window, but it isn't really good enough.

     

    Is one of the styles somehow affecting it? It works when I put it on a blank page:

    http://www.f2fcommunications.com.au/test1.html

     

    And in the body of a page based on the template:

    http://www.f2fcommunications.com.au/test2.html

     

    But not when it's where it's supposed to be!

     
    |
    Mark as:
  • Design054atAlphagraphics
    Currently Being Moderated
    3. Design054atAlphagraphics,
    Apr 13, 2012 6:54 AM   in reply to Katharine@CCEDesign
    Report

    I also have created this in the most simple way - I don't hand code any of

    my dynamic menus so I'm not really sure how to proceed.....

    If I were going to change the characteristics, would I need to find the

    style sheet that BC assigned to it and go edit the tags myself?

     
    |
    Mark as:
  • Katharine@CCEDesign
    Currently Being Moderated
    4. Katharine@CCEDesign,
    Apr 13, 2012 9:51 PM   in reply to Design054atAlphagraphics
    Report

    You can do a fair bit within the dynamic menus themselves, have a look at the options.

     
    |
    Mark as:
  • Liam Dilley
    4,013 posts
    Feb 28, 2012
    Currently Being Moderated
    5. Liam Dilley,
    Apr 13, 2012 10:48 PM   in reply to Katharine@CCEDesign
    Report

    Check out the guide I wrote on V2 stuff here:
    http://forums.adobe.com/docs/DOC-1903

     
    |
    Mark as:
  • Design054atAlphagraphics
    Currently Being Moderated
    6. Design054atAlphagraphics,
    Apr 16, 2012 6:12 AM   in reply to Katharine@CCEDesign
    Report

    Yes, I utilize the options in the dynamic menus but that does not affect

    how it looks in IE7 and 8, Katharine.

     
    |
    Mark as:
  • Design054atAlphagraphics
    Currently Being Moderated
    7. Design054atAlphagraphics,
    Apr 17, 2012 7:29 AM   in reply to Liam Dilley
    Report

    I am still not sure what to do -- I did not hand code the menu's.  If I

    should change something in modulestylesheets.css can you tell me what that

    is?

     
    |
    Mark as:
  • Carol - BCGurus.com
    Currently Being Moderated
    8. Carol - BCGurus.com,
    Apr 19, 2012 10:51 AM   in reply to Design054atAlphagraphics
    Report

    I would recommend outputing the dynamic menu in an unordered list. You can do this if you open up the dynamic menu in the back-end and under the menu details, set the menu type as "CSS (HTML Only)". You will have more felxibility when it comes to styling the menu.

     

    I created an example menu that had a similar style to yours and wrote some CSS if you would like to use that as a starting point for styling the unordered menu list and dropdown. This may not work perfectly with your site but - again - a starting point. You can see what I did here - https://gist.github.com/2421348

     

    In my example, note that I wrapped the dynamic menu module tag in <div id="menu">

     

    Let me know where this gets you!

     

    Carol | www.bcgurus.com/Business-Catalyst-Templates for only $7

     
    |
    Mark as:
  • Liam Dilley
    4,013 posts
    Feb 28, 2012
    Currently Being Moderated
    9. Liam Dilley,
    Apr 19, 2012 3:19 PM   in reply to Design054atAlphagraphics
    Report

    You need to look at the code examples everyone is giving you and work with your CSS and not the style options in the admin.

     
    |
    Mark as:
  • Design054atAlphagraphics
    Currently Being Moderated
    10. Design054atAlphagraphics,
    Apr 20, 2012 6:50 AM   in reply to Liam Dilley
    Report

    Thank you, trying that this morning.  Just have never built one by hand

    before but luckily have a starting point now.  Disappointed though that the

    BC tool that creates it for you isn't compatible with older versions.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points