Grow your CSS skills. Land your dream job.

CSS Dropdown and layout breaks in FF, IE

  • # July 11, 2013 at 6:17 pm

    Hi,

    I am working on a site design, and am having some serious issues to get the dropdown and layout to display consistently across browsers. Some of the nav items have to be displayed with popup submenus with variable positioning (based on the number of submenu items), so I created a separate UL for each menu item (I know, probably not the best idea, but I couldn’t figure out how to position the different submenus any other way).

    It works the way I want it to in Chrome (and in the codepen link below). In Firefox, there are some formatting issues with the nav (submenu positioning), and in IE, the dropdown rollovers do not work (submenus do not appear). In IE compatibility mode, the menu formatting is REALLY off, and also does not work.

    The HTML5 animation was done in Edge, and so I used the poster image option to replace it in older browsers (I also checked the Google Chrome Frame option, but it does not appear to do anything to allow the animation to play in older versions of IE).

    Any assistance would be greatly appreciated, specifically with the general layout (nav/layout centering problems in FF & IE compatibility mode).
    Thanks!
    Colin

    Codepen : http://codepen.io/anon/pen/HDIlA

    # July 11, 2013 at 6:47 pm

    FYI : to view the code above as a direct link (to view in another browser), go to http://everbeta.com/agencybeta2/

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

You must be logged in to reply to this topic.

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