position:relative causing error

Question

I am having a page which contains set of buttons at the footer(bottom). When I open the page for the first time I get the buttons as below:

Now, sometimes the first three buttons gets hidden and I get the page as :

I am not getting what could go wrong? Interestingly, when I inspect the button and change any property, the buttons get aligned immediately. Strange but true. Code for li elements:

li
{
    position: relative;
    top: 7px;
    left: 10px;
    display: block;

    float: left;
    margin-right: 10px;
}

Now when I remove the position relative then it does not gets hidden but ya, it reaches the top of the page.

Something Like this

Update : I assume it is because of position:relative, can I change my code without position relative? Or with position:absolute?

Fiddle

Answer 1

Try this css:

    .details .action-bottom {
    height: 29px;
    background: #739DDD;
    border: 2px solid #01296E;
    border-top: 1px solid #666;
    margin: 0px 0 0 0;
}
.details .action-bottom ul {
    list-style: none;
    margin:0;
    padding:0;
}
.details .action-bottom li {
  display: inline-block !important;
  float: left !important;
  padding: 6px !important;
  position: inherit;
}

Update Live