按钮未在固定位置DIV内单击？

Question

I am facing some issues due to the fixed position div at the footer.

The footer bar css styles is shown below:

.footerbar{
padding-bottom: 3px;
    background-color: #05A3AD;
    bottom: 100px;
    height: 45px;
    left: 0px;
    position: fixed !important;
    text-align: center;
    width: 100%;
    z-index: 101;
}

The issue is, button is not clicking when it is placed inside of fixed div. FYI, the button is clickable or working only at IE with the above style and not working at any other browsers.

ie)

<div class="footerbar">
    <input type='button' id='somebtn'/>
</div>

The somebtn is not clicking inside of fixed div. When I removed the fixed position and changed the bottom from 100px to 0px, the button is clicking and works fine.

I'm struggling at this point. Kindly advice me on the issue. Thanks in advance.

Answer 1

Its working fine,

• You need to close the div properly, use "/" to close the div and
• Remove "." (dot) from HTML code ie., <div class=".footerbar">

CSS:

 <div class="footerbar">
        <input type='button' id='somebtn' />
  </div>

Demo

Answer 2

Works perfectly fine in this fiddle . Just changed the class name from ".footerbar" to "footerbar" and close the div properly!

<div class="footerbar">
<input type='button' id='somebtn' value="some button"/>
</div> //this needs to be corrected!