0

I have a lightbox-style div with scrolling content that I am trying to restrict to a reasonable size within the viewport. I also want this div to be horizontally centered. This is all easy in Fx/Chrome/IE9.

My problem is that IE8 ignores the absolute positioning which I use to size the content, and the rule margin: 0 auto which I use to horizontally center the lightbox.

  1. Why?
  2. What are my options for workarounds?

EDIT: The centering issue is fixed by setting text-align:center on the parent element, but I have no idea why that works since the element I want to center is not inline. Still stuck on the absolute positioning stuff.

HTML:

<div class="bg">
  <div class="a">
    <div class="aa">titlebar</div>
    <div class="b">
      <!-- many lines of content here -->
    </div>
  </div>
</div>

CSS:

body { overflow: hidden; height: 100%; margin: 0; padding: 0; }
/* IE8 needs ruleset above */

.bg {
 background: #333;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  height: 100%; /* needed in IE8 or the bg will only be as tall as the lightbox */
}

.a {
 background: #eee; border: 3px solid #000;
  height: 80%; max-height: 800px; min-height: 200px;
  margin: 0 auto; 
  position: relative;
  width: 80%; min-width: 200px; max-width: 800px;
}

.aa { 
  background: lightblue;
  height: 28px; line-height: 28px; 
  text-align: center;
}

.b { 
  background: coral;
  overflow: auto;
  padding: 20px;
  position: absolute;
  top: 30px; right: 0; bottom: 0; left: 0;
}

Here's a demo of the problem: http://jsbin.com/urikoj/1/edit

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
tuff
  • 4,895
  • 6
  • 26
  • 43
  • This similar question has already been answered [here](http://stackoverflow.com/a/815350/1762224). – Mr. Polywhirl Nov 10 '12 at 22:13
  • 1
    No, I don't think so. First, that question only addresses one of my issues. Second, the answers don't contain anything relevant to me beyond "It is a bug in IE". I already have a width set on my to-be-centered element, as the accepted answer suggests, and I am not working with an input or inline element. And the fix suggested in the highest rated answer doesn't solve either of my problems. – tuff Nov 10 '12 at 22:25
  • My sites using `margin: 0 auto` and `position: absolute` are perfectly fine in IE 8. – Sparky Nov 11 '12 at 03:12

4 Answers4

3

I found out what's going on, and it's not the doctype, nor anything about the code that needs changes.

It's that jsbin's edit page doesn't support IE8 - the exact same demo viewed in full* is styled correctly in IE8.

In edit mode, jsbin seems to apply quirks mode or something odd like that when viewed in IE9 with IE8 browser mode and IE8 document standards. Surprisingly, the demo also works with IE7 browser mode and document standards (quirks mode off).

*the link goes to a later revision, but the only change was to remove all the attributes from the <html> tag - I had added these for testing. So, the demo is fine without those attributes, and with the html5 doctype.

tuff
  • 4,895
  • 6
  • 26
  • 43
  • Are you saying that you didn't even test it in a real IE 8 browser before coming here? There is no substitution for the real browser version as you may have just learned and that's why MS provides free HD images for testing in VPC. – Sparky Nov 11 '12 at 03:08
  • Bottom line, nothing was wrong with your original code, just how you were testing it, if I understand correctly? – Sparky Nov 11 '12 at 03:09
  • Yes, that's correct. And Sparky, so far I've only read recommendations of compatibility mode as reliable, and no warnings against. The purpose of the free images is for testing, but the purpose of compatibility mode is...? Also, I (and you neither, I think?) don't know if the edit page would have worked in real IE8 anyway. As far as we both know, the issue was not real vs. emulated IE8 - it was edit vs full mode in jsbin. – tuff Nov 11 '12 at 06:05
  • The difference is that the free images are the actual real browser versions, nothing is simulated. With all the bugs in IE over the years, it's impossible to expect a simulator built into a buggy browser to be 100% accurate in reproducing results. Why else would developers go through the trouble of downloading and installing hard drive images if we could simply trust compatibility mode? Sorry, there is no easy way to accurately test all IE versions. – Sparky Nov 11 '12 at 16:54
  • Quote: _"As far as we both know, the issue was not real vs. emulated IE8 - it was edit vs full mode in jsbin."_ ~ That's even worse, because your OP let us believe the problem was with your page in IE 8, not with running code within a code simulator's preview box while in IE 8 compatibility mode. Talk about a compounding of errors. – Sparky Nov 11 '12 at 17:02
  • There is really very little about the term "compatibility mode" that should have led one to expect a "simulator" or "emulator". It's about IE trying to provide support for webpages where code is not quite "compatible" or up to spec. If your code is already up to spec, you can't expect "IE 8 compatibility mode" to reproduce the bugs of IE 8... only the standards of IE 8. See http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx and http://msdn.microsoft.com/en-us/library/jj676916(v=vs.85).aspx – Sparky Nov 11 '12 at 18:40
  • More clarification for your edification: [**Quote MS:** _"In order to help web designers and web developers test their websites in older versions of Internet Explorer, we've provided the following VHD with Windows set up with the specified version of Internet Explorer."_](http://www.microsoft.com/en-us/download/details.aspx?id=11575#overview) – Sparky Nov 11 '12 at 18:45
0

I once fixed this issue by:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:x2="http://www.w3.org/2002/06/xhtml2">
Mohd Moe
  • 577
  • 3
  • 9
  • Unless real-IE8 interprets this differently than IE9 in IE8 mode, it doesn't work to solve either problem :( – tuff Nov 10 '12 at 22:27
  • I have real IE8 and it works fine, dont have IE9 so I have not tested it on IE9 in IE8 mode – Mohd Moe Nov 10 '12 at 22:41
  • @tuff [THIS POST](http://stackoverflow.com/questions/3988034/centering-div-with-ie) may help – Mohd Moe Nov 10 '12 at 22:44
  • Well, none of the doctype fixes work (again, testing in IE9 using IE8 mode), but setting the parent to `text-align: center` does. Which is still baffling, as a div is not an inline element. – tuff Nov 10 '12 at 22:47
  • There isn't any browser that recognizes the XHTML 2 namespace... even if there was, this wouldn't really have an effect on page rendering since the default namespace is still XHTML 1. – BoltClock Nov 11 '12 at 03:37
0

Make sure your page is declared as HTML5

<!DOCTYPE html>
themissionmars
  • 107
  • 9
-1

The problem with the vertical aling in IE<9 should be solved with this:

.bg {
  text-align: center;
}

.a {
  text-align: left;
}

But I don't know what's going wrong with the absolute position

Devin Burke
  • 13,642
  • 12
  • 55
  • 82
Vicent Ibáñez
  • 439
  • 1
  • 6
  • 10