Databases
StackOverflow2013
Postsdbo
POCSS Drop Down Menus won't display in proper area using IE (all versions)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Drop Down Menus won't display in proper area using IE (all versions)
    text
    copied!<p>I have a CSS drop down menu implemented into a website I am working on. It works flawlessly in any browser except for IE. </p> <p>With IE, the drop downs will appear in a completely different area of the page, making it impossible to click on the links before the hover disappears. I included the code from my <code>.css</code> and <code>.html</code> (changed nav structure to basic for here) files below. This nav is placed into my site's layout via a PHP include, so the area my nav bar is displayed is centered and 230px from the top of the main page. </p> <p>When I use the <code>DOCTYPE</code> strict mode it will work as expected, however I have other issues then which I can't change, so I'd rather not use a <code>DOCTYPE</code> at all (else I'll be forced to recode the ENTIRE site)</p> <p>I'm sure there has to be some type of work around for this... even if it doesn't display exactly the same in IE, I just need it to be usable! </p> <p>Any help is greatly appreciated!! I've spent weeks trying to sort this headache...</p> <p><strong>CSS FILE:</strong></p> <pre><code>#catnav { padding: 0; clear: both; height: 32px; width: 980px; background: #000; position: absolute; top: 230px; z-index: 100; } #nav { list-style: none; margin: 0; padding: 0; position: relative; z-index: 100; } #nav ul { margin: 0; padding: 0; } #nav li { float: left; margin: 0; padding: 0; list-style: none; position: relative; } #nav a { display: block; line-height: 32px; margin: 0 0px; padding: 0; font-size: 12px; color: #fff; font-weight: bold; } #nav li a:hover { color: #fff; text-decoration: underline; display: block; } #nav li ul { list-style: none; position: absolute; width: 0px; left: -999em; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } #nav li li { float: left; margin: 0; padding: 0; width: 120px; } #nav li li a { width: 129px; height: 24px; line-height: 24px; color: #000; border-bottom: 1px solid #000; background: #c5c5c5; margin: 0; padding: 5px 20px 5px 15px; } #nav li li a:hover { border-top: 1px solid #131f27; background: #8f7c58; padding: 5px 20px 5px 15px; } #nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */ position: static; } </code></pre> <p><strong>HTML FILE:</strong></p> <pre><code>&lt;script type="text/javascript"&gt;&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!-- sfHover = function() { if (!document.getElementsByTagName) return false; var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i&lt;sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--&gt;&lt;!]]&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="css.css"&gt; &lt;div id="catnav"&gt; &lt;div id="nav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" title="Title 1"&gt;Title Link 1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;li&gt;&lt;a href="#" title="Title Link 2"&gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" title="Title"&gt;Title Link2 &lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#" title="Title 3"&gt;Title Link 3&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" title="Sub Link 1"&gt;Sub Link 1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#" title="Title 4"&gt;Title 4&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" title="Title"&gt;Sub Link 1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#" title="Title 5"&gt;Title Link 5&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" title="Title 6 "&gt;Title Link 6&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" title="Title 7"&gt;Title Link 7&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>How can I make it so that IE will at least display these drops downs under their titles rather than <code>230px</code> below and to the right of them?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload