I am trying to implement a pagination control on the following page:
http://equiniti.hireserve-projects.com/vacancies.html
As you can see when viewed in a decent browser such as Firefox, the pagination controls will appear nicely inline as shown below:
However, when viewed in IE7 and IE8, the pagination controls appear as follows:
By default, these elements should all appear inline so I do not understand why they are overlapping in this way. The following CSS is applied to these elements:
.paginationControls a{
background: none repeat scroll 0 0 #FFFFFF;
font-size: 20px;
margin-left: 3px;
padding: 12px 10px;
color: #424242;
}
.paginationControls a:hover,
span.arrowNext:hover,
span.arrowPrev:hover,
.paginationControls a.jp-current
{
color: #ffffff;
background-color: #E41800;
}
span.arrowNext,
span.arrowPrev{
background: none repeat scroll 0 0 #FFFFFF;
color: #424242;
font-size: 20px;
margin-left: 3px;
padding: 12px 10px;
}
The following is the structure of my HTML:
<div class="pagination">
<span class="arrowPrev">« Previous</span>
<span class="paginationControls"></span>
<span class="arrowNext">Next »</span>
</div>
Could anyone explain why this is happening when spans should appear inline by default? I've tried the usual trick of ensuring that the parent element isn't floated but this doesn't make any difference in this case.
Any help would be greatly appreciated. This is in native IE7 and IE8 on a virtual machine.