Databases
StackOverflow2013
Postsdbo
POStrange problem: CSS-based menu behaves differently in IE "compatibility" mode
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStrange problem: CSS-based menu behaves differently in IE "compatibility" mode
    primarykey
    data
    text
    <p>Update:</p> <p>I've added a bounty to this. To claim it, I need a version of the code below that does NOT exhibit the symptoms I describe. </p> <p>Here's a simple test case. In Chrome, Firefox, and IE8 with compatibility mode off, this works as expected. However, turn on compatibility mode (toggle Tolls->Compatibility View) there's a glitch with the way some of the menu block show &amp; hide.</p> <p>To see the issue:</p> <p>Save the example to a file, and view it via web browser (note that if you simply load it from a file, you can't turn on compatibility view - it has to be delivered from a web server).</p> <p>Move the mouse from "Here" to "There" to "Everywhere", then down so that "No" is highlighted, and the 3rd level menu is displayed. Move the mouse out to the <strong>left</strong>. Only the top menu is displayed.</p> <p>Now repeat the steps. When you hit "Everywhere" the 2nd time, the 3rd level menu block is shows, but with nothing in it.</p> <p>Is there any way to prevent this from happening, even in Compatibility View?</p> <p>Sample:</p> <hr> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;test&lt;/title&gt; &lt;style&gt; #navRaw, #navRaw ul{ margin: 0; padding: 0; list-style-type: none; list-style-position: outside; position: relative; line-height: 26px; } #navRaw a{ display: block; padding: 0px 5px; color: #000; text-decoration: none; background-color: silver; line-height: 28px !important; } #navRaw a:hover{ background-color: #ccc; color: #fff; } #navRaw li{ float: left; position: relative; } #navRaw ul{ position: absolute; display: none; top: 28px; } #navRaw li ul a{ width: 220px; height: auto; float: left; } #navRaw ul ul{top: auto;} #navRaw li ul ul{ left: 230px; margin: 0px 0 0 0px; } #navRaw li:hover ul ul, #navRaw li:hover ul ul ul, #navRaw li:hover ul ul ul ul{ display: none;} #navRaw li:hover ul, #navRaw li li:hover ul, #navRaw li li li:hover ul, #navRaw li li li li:hover ul{ display: block; border: 1px solid Black; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul id="navRaw"&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;Here&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;There&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;Everywhere&lt;/b&gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;Yes&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class="showsub"&gt;&lt;a href="#"&gt;&lt;b&gt;No&lt;/b&gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;Why&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;Why not&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="menusep"&gt;&lt;a href="#"&gt;&lt;b&gt;Perhaps&lt;/b&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USchris
    1. USchris
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POStrange problem: CSS-based menu behaves differently in IE "compatibility" mode
      1. USchris
      1. VTBountyStart
    2. VO
      singulars
      1. POStrange problem: CSS-based menu behaves differently in IE "compatibility" mode
      1. USJoonas
      1. VTFavorite
    3. VO
      singulars
      1. POStrange problem: CSS-based menu behaves differently in IE "compatibility" mode
      1. This table or related slice is empty.
      1. VTUpMod
    1. COmaybe it's just me but it's not working at all for me in IE. (all versions)
      singulars
      1. POStrange problem: CSS-based menu behaves differently in IE "compatibility" mode
      1. USThomas Shields
    2. COWhat's not working? The menu, or showing the problem?
      singulars
      1. POStrange problem: CSS-based menu behaves differently in IE "compatibility" mode
      1. USchris
    3. COthe hover menu isn't working. I can't even get the sub menus to show up. I think IE's just being weird today; I've done those types of menus before and it's worked.
      singulars
      1. POStrange problem: CSS-based menu behaves differently in IE "compatibility" mode
      1. USThomas Shields
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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