margin:auto not working in IE7

Question

I have a paging control on my site that has it's container element set to margin:auto so that the pager control are centered within the element. It works great on all browsers except for IE7. In fact, I just realized my site has several issues with IE7 and I'm trying to work through them all. However, I've been stuck on this one for some time.

Take a look at this page.

(I know there are other IE7 issues on this page, focusing on the pager controls first). If you use IE9, you can hit F12 and set the "Browser Mode" to IE7 in the menu bar. Compare it to the same page in any other browser/version.

Can anyone tell me specifically why this is happening based on the CSS/HTML I'm using? I've been trying things for what seems like hours and I'm not really getting anywhere with it.

Answer 1

The problem is that you're relying on display: table to shrink-wrap the ul to the width of the lis inside it. Unfortunately, display: table is not supported in IE7.

Switching to display: inline-block is one way to fix this.

On previous_next_container_forum ul.list_paging, remove display: table and add:

display: inline-block;
*display: inline;
zoom: 1;

The ul is now exactly as wide as the lis inside it, without the use of display: table.

To actually make it centered, you need to add text-align: center to a parent element, such as .previous_next_container_forum.