IE7 and IE8 do not honour default span behaviour

Question

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.

Answer 1

I am not able to test IE8 but please try applying:

.pagination span{
    display:inline-block
}

As I recall span tags do not render as block level elements by default. You should also specify a min-height and min-width to force a block.

Alternatively use a div instead of a span tag.