2

Okay, I'm baffled.

IE9 is displaying inconsistent page width issues on some but not all pages of a site under development.

In IE9: Going to http://sistercarmen.org/cms/ you can see what looks ROUGHLY like the right page. Actually the page is slightly too wide, and that is certainly a problem. But nothing like what's happening on the About page or the History page.

On those pages, the page gets very wide indeed. BUT, if you mouse over a link in the right column (likely need to horizontally scroll to see one) the page snaps back to the correct size.

Building a simplified test page @ jsFiddle, I could confirm that this seems to be related to display: table but that is important to me so I can serve up the Nav later in the source code. An even simpler test page shows that display:table generally works for IE9.

So ... Is this a hasLayout issue, and if so, how can I force hasLayout in IE9?

Thank you very much,

Jeremy

Jeremy Carlson
  • 1,183
  • 10
  • 17

1 Answers1

1

You're right, that is odd. For what it's worth, you page works fine in IE10.

I've not been able to find a proper solution for you in the time I have available, but in the meanwhile, have you considered applying a width or a max-width to the body text element?

[EDIT]

I can confirm that adding width:100% to the content-lead element will work around the problem.

Still not an answer to why the problem is occurring, but at least it's a work-around.

[EDIT again]

Actually, it turns out the above work-around isn't quite as good as I originally thought. The width:100% only worked for me because I was playing in the console. Doing it in CSS has no effect.

Setting a fixed width may help, or possibly using CSS calc() if a completely fixed width isn't suitable.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Thanks for your response! I'm not getting the results you are. I just tried adding `width:100%` to `.content-lead`, `.entry-content`, `#content`, on my local machine—still seeing the bug. – Jeremy Carlson Mar 26 '13 at 22:28
  • hmm, it worked for me... I started by adding `max-width:560px` to `content-lead`, then changed it to `width:560px`, and then to `width:100%`. It worked fine for me all along. But I'll have another go, see what I can see. – Spudley Mar 26 '13 at 22:31
  • hehe. Yep, you're right -- going straight to `width:100%` doesn't do it. It needed me to be playing with fixed widths first. *-sigh-* – Spudley Mar 26 '13 at 22:33
  • Your question, though, is a good one. I might just pursue fixed widths via media queries. Not sure I have a better option. – Jeremy Carlson Mar 26 '13 at 22:35
  • if your page width is fixed, just use a fixed pixel with. If your page width is flexible then a fixed width isn't going to be much use, but IE9 supports CSS `calc()`, so you could try using `calc(100% - 350px)` (or whatever the width of the side panel is). – Spudley Mar 26 '13 at 22:36
  • @Spudley your answer helped—thank you! I added a fixed width of 580px to the #content div in the example. The max-width does its job, and looks like IE9 wanted the width set first. Other browsers don't like it though, so has to be IE only. http://jsfiddle.net/eyesofjeremy/mKDNn/2/ – Jeremy Carlson Mar 26 '13 at 22:50