Databases
StackOverflow2013
Postsdbo
POCSS overlay menu not working in firefox
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS overlay menu not working in firefox
    text
    copied!<p>I have this code</p> <p>style.css</p> <pre><code>.row { position: fixed; top: 0; left: 0; bottom: 0; height: 22px; width: 100%; background: black; color: white; padding: 0px; } .content { margin-top: 22px; padding: 10px; } div.navigation span.left { float: left; text-align: left; font-weight: bold; width: 49%; } div.navigation span.right { float: right; text-align: right; font-weight: bold; width: 49%; } .menu { position: fixed; top: 0; left: 0; bottom: 0; height: 100%; width: 100%; background: black; color: white; padding: 10px; opacity:0.9; display: ; } </code></pre> <p>navigation.htm</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"&gt; &lt;title&gt;Home&lt;/title&gt; &lt;link rel="StyleSheet" href="style.css" type="text/css"&gt; &lt;script type="text/javascript"&gt; function dispHandle(obj) { if (obj.style.display == "none") obj.style.display = ""; else obj.style.display = "none"; } &lt;/script&gt; &lt;/head&gt; &lt;body onload="dispHandle(uni);"&gt; &lt;div class="navigation"&gt; &lt;div id="container" style="width: 100%;"&gt; &lt;div class="row"&gt; &lt;span class="left"&gt;&lt;a onmouseover="dispHandle(uni)"&gt;Activities&lt;/a&gt;&lt;img style="width: 18px; height: 18px;" alt="" src="images/void.png"&gt;&lt;/span&gt; &lt;span style="font-weight: bold;" class="right"&gt;&lt;img style="width: 18px; height: 18px;" alt="" src="images/volume.png"&gt;&lt;img style="width: 18px; height: 18px;" alt="" src="images/bluetooth.png"&gt;&lt;img style="width: 18px; height: 18px;" alt="" src="images/wireless.png"&gt;&lt;img style="width: 26px; height: 18px; font-style: italic;" alt="" src="images/battery.png"&gt;&lt;iframe src="http://free.timeanddate.com/clock/i2vrnsgh/fcfff/tct/pct/ftb" allowtransparency="true" frameborder="0" height="18" width="86"&gt;&lt;/iframe&gt;&lt;img style="width: 18px; height: 18px;" alt="" src="images/user.png"&gt;Demi Lovato&amp;nbsp;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="uni"&gt; &lt;div style="text-align: center;" class="menu"&gt; &lt;br&gt; &lt;img onclick="dispHandle(uni)" style="border: 0px solid ; width: 48px; height: 48px;" alt="" src="http://demilovato.sourceforge.net/images/close.png"&gt;&lt;br&gt; &lt;br&gt; &lt;div align="center"&gt; &lt;table style="text-align: left; width: 410px; height: 268px;" border="1" cellpadding="2" cellspacing="2"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td style="vertical-align: top; text-align: center;"&gt;&lt;a href="index.htm"&gt;&lt;img style="border: 0px solid ; width: 48px; height: 48px;" alt="" src="images/Home.png"&gt;&lt;/a&gt;&lt;br&gt; Home&lt;br&gt; &lt;/td&gt; &lt;td style="vertical-align: top; text-align: center;"&gt;&lt;a href="Downloads.htm"&gt;&lt;img style="border: 0px solid ; width: 48px; height: 48px;" alt="" src="images/Downloads.png"&gt;&lt;/a&gt;&lt;br&gt; Downloads&lt;br&gt; &lt;/td&gt; &lt;td style="vertical-align: top; text-align: center;"&gt;&lt;a href="Screenshots.htm"&gt;&lt;img style="border: 0px solid ; width: 48px; height: 48px;" alt="" src="images/Screenshots.png"&gt;&lt;/a&gt;&lt;br&gt; Screenshots&lt;br&gt; &lt;/td&gt; &lt;td style="vertical-align: top; text-align: center;"&gt;&lt;a href="Links.htm"&gt;&lt;img style="border: 0px solid ; width: 48px; height: 48px;" alt="" src="images/Links.png"&gt;&lt;/a&gt;&lt;br&gt; Links&lt;br&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="vertical-align: top; text-align: center;"&gt;&lt;a href="FAQ.htm"&gt;&lt;img style="border: 0px solid ; width: 48px; height: 48px;" alt="" src="images/FAQ.png"&gt;&lt;/a&gt;&lt;br&gt; FAQ&lt;br&gt; &lt;/td&gt; &lt;td style="vertical-align: top; text-align: center;"&gt;&lt;a href="Contact.htm"&gt;&lt;img style="border: 0px solid ; width: 48px; height: 48px;" alt="" src="images/Contact.png"&gt;&lt;/a&gt;&lt;br&gt; Contact&lt;br&gt; &lt;/td&gt; &lt;td style="vertical-align: top; text-align: center;"&gt;&lt;a href="About.htm"&gt;&lt;img style="border: 0px solid ; width: 48px; height: 48px;" alt="" src="images/About.png"&gt;&lt;/a&gt;&lt;br&gt; About&lt;br&gt; &lt;/td&gt; &lt;td style="vertical-align: top;"&gt;&lt;br&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;br&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Its suppose to be able to mouse over Activities and it shows a full screen css menu and then close by clicking the X I do this by a show hide javascipt function. Two problems are when I load it in firefox it does not work yet it works in all other browsers I tried it in (Safari, Chrome, Rekonq) Also how can I hide it by default instead of onload?</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