weird pagination css issue

[Chadi]

Sample:
http://www.talkjesus.com/polls/45186-new-ideas-features-talk-jesus-forums-april-2013-a-3.html

(This is replicated globally)

The pagination on top is vertically all aligned. However, the one on the bottom is not aligned. The "<< first" and "<" boxes are slightly lower than the rest of the numbers in the row.

I cannot figure out why, I use inspect element tool in Chrome and do not see any difference, both using same code.

Hopefully someone will catch on to what I'm missing. Thanks

[fxdigi-cash]

I would say it is possibly the css... are you using the same css for both id="pagination_top" and bottom one?? or different??

also I could suggest using the same id="pagination_top" at the bottom instead of having two different lists... you can remove any other things the way you like from id="pagination_top" after coping it down though...

explain a little please

Update: quick question, how come this code "float";

.above_postlist, #above_postlist {
float: left;

is different than this one:


.below_postlist .pagination_bottom {
float: right;

[Chadi]

Above

.above_postlist, #above_postlist {
width:100%;
position:relative;
{vb:stylevar left}:0;
float: {vb:stylevar right};
height: {vb:math {vb:stylevar padding}*3};
margin-top: {vb:math {vb:stylevar padding}/2};
margin-bottom: 6px;
/*height: {vb:math {vb:stylevar control_content_font.fontSize}{vb:stylevar control_content_font.units} + {vb:stylevar control_content_padding.paddingTop}{vb:stylevar control_content_padding.units} + {vb:stylevar control_content_padding.paddingBottom}{vb:stylevar control_content_padding.units} + {vb:stylevar padding}};*/
_height: 1%;
_zoom: 1;
}

.above_postlist .pagination_top .pagination, .above_postlist .pagination_top .postpagestats {
float: {vb:stylevar right};
clear:{vb:stylevar left};
vertical-align:middle;
font-size: 16px;
color: {vb:stylevar body_color};
_display:inline;
}

.pagination_top .pagination {
margin-{vb:stylevar left}: {vb:stylevar padding};
position: relative;
top: -3px;
}

Below

.below_postlist {
display:block;
clear:both;
position: relative;
float: {vb:stylevar right};
margin-top: 45px;
margin-bottom: 1em;
width: 100%;
}

.below_postlist .pagination_bottom {
float: {vb:stylevar right};
margin-top: 5px;
width: 100%;
}

.below_postlist .pagination_bottom .pagination {
float: {vb:stylevar right};
clear: {vb:stylevar left};
margin-{vb:stylevar left}: {vb:math {vb:stylevar padding}/2};
position: relative;
margin-bottom: 1em;
}

I can't figure this out.

[fxdigi-cash]

ok, I guess you can simply un-comment the bottom code and copy this one you have and whatsoever inside it:
<div id="above_postlist" class="above_postlist"></div>

and place exactly on the place where the bottom pagination code is....

it shouldn't take you more than 1 minute to do that... :)

[Chadi]

Sorry but uncomment what bottom code exactly? Not sure what you're referring to.

--------------- Added 1369620848 at 1369620848 ---------------

Hey I figured out what you meant ;)

Thanks for your help friend, appreciate it!