CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfirefoxdatatables
Richard_G
Richard_G

Reputation: 4820

Buttons won't align properly in Firefox

Rails 4, Ruby 2, Bootstrap 3, DataTables 1.10

Buttons for pagination align properly in IE and Chrome. They won't align in Firefox. I tried using this patch for Firefox. I tried using input-group/input-group-btn. This code is generated by DataTables.

In Firebug, the funky block in the upper right corner of First refers to ALL the li elements in the HTML in reverse order. Leftmost is "last", then "next", then "previous, then "first".

Firefox:

Firefox buttons

Chrome and IE:

Chrome and IE buttons

HTML generated by DataTables for Bootstrap:

<div class="col-xs-6" style="outline: medium none;">
    <div class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full" id="adminitemstable_paginate" style="outline: medium none;">
        <ul class="pagination" style="outline: medium none;">
            <li class="fg-button ui-button ui-state-default first disabled" aria-controls="adminitemstable" tabindex="0" id="adminitemstable_first" style="outline: medium none;">
                <a href="#" style="outline: medium none;">
                    First
                </a>
            </li>
            <li class="fg-button ui-button ui-state-default previous disabled" aria-controls="adminitemstable" tabindex="0" id="adminitemstable_previous" style="outline: medium none;">
                <a href="#" style="outline: medium none;">
                    Previous
                </a>
            </li>
            <li class="fg-button ui-button ui-state-default next" aria-controls="adminitemstable" tabindex="0" id="adminitemstable_next" style="outline: medium none;">
                <a href="#" style="outline: medium none;">
                    Next
                </a>
            </li>
            <li class="fg-button ui-button ui-state-default last" aria-controls="adminitemstable" tabindex="0" id="adminitemstable_last" style="outline: medium none;">
                <a href="#" style="outline: medium none;">
                    Last
                </a>
            </li>
        </ul>
    </div>
</div>

Upvotes: 1

Views: 1229

Answers (1)

Mansukh Khandhar
Mansukh Khandhar

Reputation: 2582

you set as like this to set

.fg-button {
    float: left;
    cursor: pointer;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    text-decoration: none !important;
}

Live Demo

Upvotes: 2

Related Questions