How do I code navigation drop-down to display properly in IE?

Posted on 2009-05-26
Medium Priority
Last Modified: 2013-12-08
Can anyone help me code this properly? My biggest problem is the mainnav drop-down in IE. I've checked Safari and FF for Mac and PC. It's just this IE positioning giving me a problem. I'd prefer not to hack it, but anything to get it working at this point would be nice. The subnav is also displaying different than intended, but it's not a major problem. Also, the fonts are so much bigger in IE, I'm using ems, should I be using something else to get a more accurate font display?

Template here: http://www.bentleydiamond.com/website%20may09/interiortemplate.html

Thank you!
Question by:ryan80
LVL 12

Accepted Solution

jessegivy earned 750 total points
ID: 24474553
Hi there,

It looks like you've got some poorly formed HTML here - the first UL tag (for the menu dropdown content) is not terminated!  I strongly recommend proper indentation of your HTML, which will make it easy for you to see where the unordered lists are going wrong.  Firefox and safari are famous for actually rendering invalid HTML while IE is a bit more strict.

Before I looked at your page I was assuming this was the typical positioning issues and you should be aware that select elements will NOT interact well with your menu system, below is my response for that issue which you will encounter if you use selects:

Well if you don't want to hack it I'd like to suggest either using a third party GUII library such as Flex.  Alternatively, you could design your own control which is something I've been wanting to do for years.  If you want to avoid this kind of solution, here are the "hacks" I find most dependable:

1.  The easiest (though maybe not practical) way to avoid positioning issues with SELECT elements in IE would be to simply make sure that select elements won't appear in areas where your menu will collide.

2.  Float your menu system drop down in an iFrame.
LVL 12

Assisted Solution

by:Tony van Schaik
Tony van Schaik earned 750 total points
ID: 24476590
I create my menus always with Unordered lists on this website you can find a lot of CSS dropdown menus that works in every browser: http://www.cssplay.co.uk/menus/
I'm using this in a menu in a Wordpress theme: http://www.lwis.net/free-css-drop-down-menu/ it's a CSS framework with multiple menu themes. Works great

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

When I'm searching for answers on Experts Exchange, I often use Google because it's built into my browser.  To search only on Experts Exchange, I use the "site:" search operator, which can be cumbersome to type out each time I want to run a search.…
When you put your credit card number into a website for an online transaction, surely you know to look for signs of a secure website such as the padlock icon in the web browser or the green address bar.  This is one way to protect yourself from oth…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question