0

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.

Neysor
  • 3,893
  • 11
  • 34
  • 66
Scott
  • 13,735
  • 20
  • 94
  • 152
  • 1
    Can you possibly re-create your problem on jsfiddle or something, so we do not have to sift through hundreds of lines of code on your website? – Logan Serman Apr 07 '12 at 04:09
  • I was thinking someone would probably just use IE developer tools (like Firebug) to inspect the code/styles rather than actually reading the source. I'm sure it's just something simple that I'm missing. – Scott Apr 07 '12 at 04:12
  • The only difference I see in IE7 vs other browsers are rounded edges and the filters on the top of each page. Nothing I see has an issue with `margin: auto`. Which element specifically has the problem? Maybe I am just missing it... – Logan Serman Apr 07 '12 at 04:21
  • all works correctly for me, maybe your IE7 is in quirks mode – SergeS Apr 07 '12 at 04:21
  • @SergeS Yeah, the only time `margin: auto` fails is if you set IE7 to quirks mode. It looks fine otherwise. – Logan Serman Apr 07 '12 at 04:22
  • Hmm, yeah the filters I knew about (that was the other issue on this page). What is "quirks mode" and how do I take IE7 out of it (maybe answer this as an actual SO answer so I can accept it if it works). I'm just setting IE9 to "IE7 Browser Mode" in developer tools. The element I'm having issues with are the paging controls at the bottom of the page. – Scott Apr 07 '12 at 04:26
  • I've answered your question, but for future reference.. [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackexchange.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link-to-it) – thirtydot Apr 07 '12 at 04:42

1 Answers1

5

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.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349