Note that there are some explanatory texts on larger screens.

plurals
  1. POScrolling the page causes issues to buttons
    primarykey
    data
    text
    <p>I just finished a website, everything was working fine (what I thought) Until I discover a huge BUG that couldn't fix:</p> <p>I have a navigation BAR (png file) and added on it buttons (simple DIVs elements), When the page is openned 1st, all is fine, but if you scroll the page a bit, the buttons aren't working as they should.</p> <p>Please check this link: (scroll the page a bit down and you'll notice that button aren't interacting anymore)</p> <p><a href="http://www.genius-solutions.net/GSIS/index.html" rel="nofollow">http://www.genius-solutions.net/GSIS/index.html</a></p> <p>But if you move the cursor a bit above the buttons, you'll find them:</p> <p>(HTML - JavaScript)</p> <p>here the CSS part:</p> <pre><code>#btn {position:absolute;left:0px;top:0px;z-index:4;} #btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;} #btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;} #btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;} #btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;} #btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;} #btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;} #html, body { background:#002a4c; overflow:scroll; width:1024px; height:768px; margin: 20px auto; /* center */ padding: 20px; } </code></pre> <p>and here the HTML part:</p> <pre><code> &lt;body &gt; &lt;div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'&gt; &lt;div id='applet_t'&gt; &lt;div id='btn'&gt; &lt;div id='btn1'&gt;&lt;/div&gt; &lt;div id='btn2'&gt;&lt;/div&gt; &lt;div id='btn3'&gt;&lt;/div&gt; &lt;div id='btn4'&gt;&lt;/div&gt; &lt;div id='btn5'&gt;&lt;/div&gt; &lt;div id='btn6'&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id='inf'&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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.
 

Querying!

 
Guidance

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