Tutorial :Why are my drop downs not working in ie7?



Question:

If you view this page: http://www.sussexjewelers.com/product_search.php?cid=69

The drop down menus (horizontal green bar) do not drop down in ie7. They do drop down in ie6, firefox, and chrome. Also if you view the homepage the same drop downs DO work in ie7. I cannot figure out why they are not working on this page in ie7. They are pure CSS drop down menus.

Any help is appreciated.

Thanks!


Solution:1

You have a bunch of style and script tags before the actual HTML document. Those should be in the head tag of the page.

The doctype tag has to be the first tag in the source, otherwise IE will render the page in quirks mode. Other browsers may also render it in quirks mode, but it makes a lot more difference for IE. One big difference is that the box model is handled incorrectly.

Once you get the basic structure of the code correct, you should validate the html, and the css to see if there are more problems in the code. I can see right away that you have an HTML doctype but you are using XHTML tags in the code.

If the menues still doesn't work after cleaning up the code, I would guess that it's a problem with the z-index so that the menues show up but is hidden behind the main content. IE doesn't handle z-index correctly for elements that has layout.


Solution:2

Your <style> and <script> tags should be inside your <head> tag, not outside your <html> tag.

Also add a DOCTYPE

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

HTML 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  

Take your pick.


Solution:3

TonyF is right. In the future, try running this in your URL bar to see if you're actually in Standards Mode (CSS1Compat) vs Quirks Mode (BackCompat):

javascript:alert(document.compatMode)  

I have that in a bookmarklet in IE.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »