Question

So, this is an odd one…

I’ve got basic pagination code:

<div class="pagination">
    <a href="#" class="prev">&lt;</a> <a href="#">1</a> <a class="current">2</a> <a href="#">3</a> <a href="#" class="next">&gt;</a>
</div>

And I want it all centred, so I’m using inline-block on the anchor tags. Simple enough, stripped down CSS code:

.pagination{text-align:center; margin-bottom:20px;}
.pagination > a{display:inline-block; vertical-align:middle; margin:0 2px 0 1px;}
.ie7 .pagination > a{zoom:1;}
.pagination .next,
.pagination .prev{width:26px; height:38px; text-indent:-9999px; overflow:hidden;
background:url(../images/page-arrows.png) no-repeat;}
.pagination a{width:37px; height:31px; line-height:32px; font-size:15px; font-weight:bold; color:#7e7e7e;
background:url(../images/page-numbers.png) left top no-repeat;}

Problem is that, NOTHING is displaying in IE7 (at least IE7-mode of IE9). I’m well aware of the display-inline bugs that IE7 has, but those only apply to elements that aren’t inline by default. I’ve added in a zoom:1 anyway though for good measure.

If I put a background colour on the .pagination wrapper, that wrapper does indeed show up with the background colour, but the elements inside just aren’t showing!

I’ve tried the usual IE ‘fixes’ …position:relative, zoom:1, height:1% on any and every element, but not luck.

What am I missing?!

Answer 1

After some experimenting in JSFiddle I’ve managed to discover that the problem relates to this particular rule

.pagination .prev {text-indent:-9999px; } 

Disabling this fixes the issue but is not ideal as you would then have the text charecter appear on top of your background images.

Interestingly enough your .next does not cause the same issue. with that in mind added an   to either side of your paging control (so your center alignment dosnt get skewed) and it seems to of fixed the problem.

<div class="pagination"> 
    &nbsp; 
    <a href="#" class="prev">&lt;</a> <a href="#">1</a> <a class="current">2</a> <a href="#">3</a> <a href="#" class="next">&gt;</a> 
    &nbsp;
</div>

JSFiddle available here (background images replaced with solid colors for obvious reasons)