Question

I’ve got a list that I’m paginating using some javascript. Everything works absolutely fine in all the browsers I have tested it in, however, one of the directional navigation buttons drops down in IE7 (not in IE8).

The markup looks like this:

<div id="index_qa_nav" class="pagination_nav">
    <a class="previous_link" href>Prev</a>
    <a class="page_link first active_page" href style="display: inline-block;">1</a>
    <a class="page_link" href style="display: inline-block;">2</a>
    <a class="page_link" href style="display: inline-block;">3</a>
    <a class="page_link" href style="display: inline-block;">4</a>
    <a class="page_link last" href style="display: inline-block;">5</a>
    <a class="next_link" href>Next</a>
</div>

And the CSS looks like this:

.pagination_nav {
    text-align: center;
    clear:both;
}

.pagination_nav .previous_link {
    float: left;
    margin-left: 12px;
    height: 16px;
    width: 11px;
    background: url(/gfx/pajination/pagination_arrows.png) no-repeat;
    text-indent: -9999px;
}

.pagination_nav .next_link {
    float: right;
    margin-right: 12px;
    height: 16px;
    width: 11px;
    background: url(/gfx/pajination/pagination_arrows.png) no-repeat -11px;
    text-indent: -9999px;
}

.pagination_nav .page_link {
    margin-bottom: 8px;
    margin-right: 4px;
    width: 9px;
    height: 11px;
    text-indent: -9999px;
    white-space: nowrap;
    background: url(/gfx/pajination/dots.png) no-repeat 0 1px;
}

.pagination_nav .active_page {
    width: 11px;
    height: 11px;
    background: url(/gfx/pajination/dots.png) no-repeat -8px;
}

Now I can’t seem to figure out why the float:right link won’t float on the same level as the links that are float:left. If someone could explain to me why this happen (and why it only happens in IE<7), I would be very grateful. This has been a pain in my butt for far too long.

Answer 1

A reason why this might happen is that the .page_link elements that appear in the markup between .previous_link and .next_link cause the browser to calculate the layout incorrectly.

Since the two links will be floated to each side in the end no matter what (so you know that the presence of .page_link elements should not affect the layout), you can simply move .next_link up in the markup and place it just after .previous_link. The end result will be the same in more modern browsers, but the reordering should help IE7 to reach the same conclusion when laying out the page.