Pagination with extra space - css

Question

I have some pagination in a div and am seeing some extra space. I'm not sure where it is coming from. The extra space is green (I added a background to the container).
The URL is: http://joshrodg.com/test/inductees/page/2/
Basically, at the bottom of the page, you'll see the pagination. The code is generated, so I can't change that. I'm pretty sure it's something with the css adding the extra space.
I can put a height on the wrap and the extra space goes away, but that's cheating.
The HTML looks like:
<div id="pagi">
<div class="wrap">
<a class="prev page-numbers" href="http://joshrodg.com/test/inductees/"><span class="left"></span><span class="ion-android-arrow-dropleft"></span> Prev</a>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/">1</a>
<span aria-current="page" class="page-numbers current">2</span>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/page/3/">3</a>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/page/4/">4</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/page/15/">15</a>
<a class="next page-numbers" href="http://joshrodg.com/test/inductees/page/3/">Next <span class="ion-android-arrow-dropright"></span><span class="right"></span></a>
</div>
</div>
The CSS looks like:
#pagi {
text-align: center;
}
#pagi .wrap {
background: #00ff00;
display: inline-block;
font-size: 0;
overflow: hidden;
position: relative;
}
#pagi .page-numbers {
background: #CD1F31;
display: inline-block;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 40px;
padding: 0 10px;
position: relative;
text-decoration: none;
top: -2px;
}
#pagi .current {
background: #fff;
color: #CD1F31;
}
#pagi .next,
#pagi .prev {
background: #054872;
color: #fff;
font-family: 'Oswald', sans-serif;
font-size: 20px;
line-height: 40px;
position: relative;
text-transform: uppercase;
top: 0;
}
#pagi .next {
padding: 0 35px 0 16px;
}
#pagi .prev {
padding: 0 16px 0 35px;
}
#pagi .left,
#pagi .right {
background: #333;
border-bottom: 21px solid transparent;
border-top: 21px solid transparent;
height: 0;
position: absolute;
top: 0;
width: 0;
}
#pagi .left {
border-right: 12px solid #054872;
left: 0;
}
#pagi .right {
border-left: 12px solid #054872;
right: 0;
}
#pagi .ion-android-arrow-dropleft,
#pagi .ion-android-arrow-dropright {
display: inline-block;
font-size: 30px;
position: absolute;
top: 6px;
}
pagi .ion-android-arrow-dropleft {
left: 18px;
}
#pagi .ion-android-arrow-dropright {
right: 18px;
}
#pagi a:hover .ion-android-arrow-dropleft,
#pagi a:hover .ion-android-arrow-dropright {
color: #fff;
}
#pagi a:hover {
color: #ddd;
}
I know this is probably something simple that I'm over-looking. If someone could point me in the right direction I'd appreciate it!
The one thing I forgot to mention is everything works just fine when the fonts are the same - my guess is the size differences are causing some of the issues.
Thanks,
Josh

Answer 1

So, after investigating this issue further, my problem was being creating by the different Google Web Fonts I was using.
The page numbers use a font called Lato and the Previous and Next links use a font called Oswald.
Somehow the line heights and padding that both fonts had were conflicting and I couldn't get them to play nicely with each other.
Both the Previous and Next links and the page numbers have the same pagenumbers class assigned. Because this is generated code, that's something I can't change.
So, I removed the Oswald font, which fixed the issue...unfortunately, I wanted the font to be different, so I was thinking about other options available visually.
I also had some arrows next to the Previous and Next links. Those arrows were absolutely positioned, so none of the line height issues apply.
After thinking it over I decided to go with arrows-only!
Now, the alignment is fixed and I understand what happened.
The HTML remains unchanged:
<div id="pagi">
<div class="wrap">
<a class="prev page-numbers" href="http://joshrodg.com/test/inductees/"><span class="left"></span><span class="ion-android-arrow-dropleft"></span> Prev</a>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/">1</a>
<span aria-current="page" class="page-numbers current">2</span>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/page/3/">3</a>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/page/4/">4</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="http://joshrodg.com/test/inductees/page/15/">15</a>
<a class="next page-numbers" href="http://joshrodg.com/test/inductees/page/3/">Next <span class="ion-android-arrow-dropright"></span><span class="right"></span></a>
</div>
</div>
The CSS looks like:
#pagi {
margin: 5px 20px 25px;
text-align: center;
}
#pagi .wrap {
background: #054872;
display: inline-block;
font-size: 0;
overflow: hidden;
position: relative;
}
#pagi .page-numbers {
background: #CD1F31;
display: inline-block;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 40px;
padding: 0 10px;
text-decoration: none;
}
#pagi .current {
background: #fff;
color: #CD1F31;
}
#pagi .next,
#pagi .prev {
color: #fff;
text-transform: uppercase;
}
#pagi .next {
padding: 0 25px 0 16px;
}
#pagi .prev {
padding: 0 16px 0 25px;
}
#pagi .left,
#pagi .right {
background: #333;
border-bottom: 21px solid transparent;
border-top: 21px solid transparent;
height: 0;
position: absolute;
top: 0;
width: 0;
}
#pagi .left {
border-right: 12px solid #054872;
left: 0;
}
#pagi .right {
border-left: 12px solid #054872;
right: 0;
}
#pagi .ion-android-arrow-dropleft,
#pagi .ion-android-arrow-dropright {
display: inline-block;
font-size: 30px;
position: absolute;
top: 6px;
}
#pagi .ion-android-arrow-dropleft {
left: 18px;
}
#pagi .ion-android-arrow-dropright {
right: 18px;
}
#pagi a:hover .ion-android-arrow-dropleft,
#pagi a:hover .ion-android-arrow-dropright {
color: #fff;
}
#pagi a:hover {
color: #ddd;
}
There are other ways I could've fixed this. I could've specified a width and absolutely positioned my Previous and Next links, which would also fix this issue because of the absolute positioning.
But, I like this solution and think it is better to just not have the inferred Previous and Next links and just show the icons (pointing in their respective directions).
Thanks,
Josh