CODEWITHSUNDEEP
csspaginationtwitter-bootstrap-3
sanchahous
sanchahous

Reputation: 181

bootstrap3 tabindex change my css style

On my pagination list i use tabindex="" for correct output pseudo :focus tag. But when i set tabindex="" for my links my style become broken. You can check my problem visiting website hosted http://sun8.hol.es/timberhome/catalog.html In the bottom you can see my pagination, so when you click page, style broke. So how to fix broken styles? Code: HTML

                    <ul class="pagination">
                    <li><a href="#"><img src="img/catalog/ar_lt.png" alt="Ar lt" /></a></li>
                    <li><a href="#" tabindex="1">1</a></li>
                    <li><a href="#" tabindex="2">2</a></li>
                    <li><a href="#" tabindex="3">3</a></li>
                    <li><a href="#" tabindex="4">4</a></li>
                    <li><a href="#" tabindex="5">5</a></li>
                    <li><a href="#" tabindex="6">6</a></li>
                    <li><a href="#" tabindex="7">7</a></li>
                    <li><a href="#" tabindex="8">8</a></li>
                    <li><a href="#" tabindex="9">9</a></li>
                    <li><a href="#" tabindex="10">10</a></li>
                    <li><a class="more-20" href="#" tabindex="11">...20</a></li>
                    <li><a class="more-30" href="#" tabindex="12">...30</a></li>
                    <li><a class="ar-rt" href="#"><img src="img/catalog/ar_rt.png" alt="Ar lt" /></a></li>
                </ul>

CSS

    /* ************************************CATALOG-PAGINATION******************** */

.left .pagination {
    margin: 32px 0 0 116px;
    width: 489px;
    height: 44px;
    border: 1px solid #d4dfe5;
    border-bottom: 0;
    border-radius: 0;
}

.left .pagination>li>a, .left .pagination>li>span {
    border: 0;
    padding: 11px 0 0 18px; 
    font-family: "PTSans";
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #7b878d;
    background-color: inherit;
}

.left .pagination>li>a:hover, .left .pagination>li>a:focus, .left .pagination>li>span:hover,
.left .pagination>li>span:focus {
    color: #000000;
    background: inherit;
    border: 0;
    padding: 11px 0 0 18px; 
    font-family: "PTSans";
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

.left .pagination>li>a.more-20 {
    margin-left: 6px;
    padding: 11px 0 0 0;
}

.left .pagination>li>a.more-30 {
    margin-left: 6px;  padding: 11px 0 0 0;
}

.left .pagination>li:first-child>a, .pagination>li:first-child>span {
    margin: 0px 4px 0 30px; 
    padding-top: 9px;
}

.left .pagination .ar-rt {
    margin-left: 4px;
    padding: 8px 0 0 18px;
}

Upvotes: 2

Views: 527

Answers (1)

Patrik Kreh&#225;k
Patrik Kreh&#225;k

Reputation: 2683

That .left ul.navi li a:hover, .left ul li a:focus sets width to 243px and thats why design is destroyed (style.css on line 621).

SOLUTION:

Wrong: .left ul.navi li a:hover, .left ul li a:focus

ul -> ul.navi

Good: .left ul.navi li a:hover, .left ul.navi li a:focus

Upvotes: 1

Related Questions