Last year the standard browser at my office was IE7, so we designed all or our pages to render properly in that, the current FF of the time, and any other browser we could get our hands on. This spring, we got pushed to IE8, and sometime after that, we made some CSS changes to our site that has produced unexpected behavior in IE7. We didn’t realize it was happening until one of our developers viewed a page in IE8 set to IE7 mode.
What’s happening is that our navigation tabs are moving to the right, and causing a horizontal scroll bar to appear.
While digging in the CSS, I noticed that the navigation div (which is within the header div) had a position: absolute; and left: 0;, however, there was no position: relative on the header div. I think someone must have taken the position: relative off the header div while trying to fix something else, and since we no longer have a copy of IE7 sitting around, they didn’t realize they broke anything.
I added the position: relative back to the header, and it seems fixed.
Well that’s how it goes Paul! I can never get anything solved unless I ask on Sitepoint, and the second I post the question, the answer presents itself in order to make the forum post a waste of time (as well as making me look like an idiot).
