pagination button alignment issue

[jonasPS]

Hi all, 

 

I'm almost done with the redesign of my prestashop. I just noticed a small display issue with chrome. The pagination buttons are not aligned in chrome but they are in safari and firefox (see screenshot).

 

Here is the code that I changed in the global.css for the pagination:

 

Any idea?

 

/* pagination **************************************************************/
form.pagination {display:none;}

div.pagination {
margin:10px 0;
float:right;
}

ul.pagination {list-style-type:none;}
ul.pagination li {display: inline-block;}
ul.pagination a{
padding:5px 7px !important;
border:1px solid #ccc;
-moz-border-radius: 2px !important;
-webkit-border-radius: 2px !important;
border-radius: 3px !important;
font-weight:regular;
font-size:11px;
color:#7A57A3;
background: #fff;
cursor: pointer;
}

ul.pagination span {
padding:5px 7px !important;
border:1px solid #ccc;
-moz-border-radius: 2px !important;
-webkit-border-radius: 2px !important;
border-radius: 3px !important;
font-weight:regular;
font-size:11px;
color:#CCC;
background: #fff;
}

ul.pagination a {
text-align:right;
}

ul.pagination a:hover {}

ul.pagination .current span {
text-align:center;
color:#888;
border:1px solid #fff
}
ul.pagination li.disabled span {color:#ccc}

#pagination_previous, .pagination_previous {float:left; margin:0 10px;}
#pagination_next, .pagination_next {float:right; margin:0 10px;}

.ie7 #pagination_previous, .ie7 .pagination_previous,
.ie7 #pagination_next, .ie7 .pagination_next {float:none}

ul.pagination .pagination_previous a,ul.pagination .pagination_previous span,
ul.pagination .pagination_next a, ul.pagination .pagination_next span {
padding:0 8px;
width:auto;
}
#pagination_previous, .pagination_previous span,
#pagination_next, .pagination_next span {
color:#ccc;
border:1px solid #eee
}

/****************************************************************************/

 

[dioniz]

Is it possible to see your site?

[jonasPS]

Still too soon.

Any idea for my problem?

 

I was thinking also, maybe we can just find a work around playing with the alignment of the different blocks but I don't really know how to do so.

 

Anyone?

[jonasPS]

Hi there,

I found a work around. So it turns out that when you use the command display:inline-block, for some reason chrome breaks a line and the next block is displayed on the next line. I just change it to that, I hope this will help you too...

/* pagination **************************************************************/
form.pagination {display:none;}

div.pagination {
margin:10px 0;
position: relative;
float:right;
min-width:230px;
}

ul.pagination {list-style-type:none;}
ul.pagination li {
display: inline-block;
margin-bottom:10px;
vertical-align:top;
}

ul.pagination a{
padding:5px 7px !important;
border:1px solid #ccc;
-moz-border-radius: 2px !important;
-webkit-border-radius: 2px !important;
border-radius: 3px !important;
font-weight:regular;
font-size:11px;
color:#7A57A3;
background: #fff;
cursor: pointer;
}

ul.pagination span {
padding:5px 7px !important;
border:1px solid #ccc;
-moz-border-radius: 2px !important;
-webkit-border-radius: 2px !important;
border-radius: 3px !important;
font-weight:regular;
font-size:11px;
color:#CCC;
background: #fff;
}

ul.pagination a {
text-align:right;
}

ul.pagination a:hover {}

ul.pagination .current span {
text-align:center;
color:#888;
border:1px solid #fff
}

ul.pagination li.disabled span {color:#ccc}

#pagination_previous, .pagination_previous {float:left; margin:0 10px;}
#pagination_next, .pagination_next {float:right; margin:0 10px;}

.ie7 #pagination_previous, .ie7 .pagination_previous,
.ie7 #pagination_next, .ie7 .pagination_next {float:none}

ul.pagination .pagination_previous a,ul.pagination .pagination_previous span,
ul.pagination .pagination_next a, ul.pagination .pagination_next span {
padding:0 8px;
width:auto;
}

#pagination_previous, .pagination_previous span,
#pagination_next, .pagination_next span {
color:#ccc;
border:1px solid #eee
}

/****************************************************************************/

See the result

www.mimbeli.fr

Edited March 26, 2014 by jonasPS (see edit history)