I’m having trouble with my WordPress site not displaying correctly in Internet Explorer 8. The website works fine in other browsers like Firefox, Chrome and Safari, but when people visit using IE8 the layout completely breaks.
My site runs WordPress version 2.8 with a custom theme that has a main content area and two sidebar widgets on the right side. In IE8, the sidebars just vanish and only the center content shows up.
I already tried adding the IE7 compatibility meta tag to force older rendering mode:
But this didn’t fix the problem. The sidebars are still missing when viewed in IE8.
Has anyone dealt with similar WordPress layout problems in Internet Explorer 8? What CSS fixes or workarounds did you use to make the sidebars appear properly?
Check your theme’s CSS for any min-width or max-width properties on the sidebar containers. IE8 has known bugs with these properties that can cause entire sections to disappear instead of just not applying the width constraints. I had a WordPress 2.8 site where removing min-width from the sidebar wrapper completely solved the vanishing sidebar problem. Also make sure your sidebar divs have explicit width values in pixels rather than percentages, since IE8 calculates percentage widths differently than other browsers and this can push sidebars below the main content where they become invisible. You might also want to add display: inline-block; to your floated sidebar elements as IE8 sometimes needs this extra nudge to properly position floated content alongside the main column.
I encountered this exact problem when I upgraded to WordPress 2.8 last year. The issue was actually related to hasLayout property in IE8. Try adding zoom: 1; to your sidebar CSS - this triggers hasLayout and forces IE to properly render the elements. Also check if you’re using any CSS3 properties that IE8 doesn’t support, as they can cause the entire element to disappear rather than just ignore the unsupported property. Another thing to verify is whether your theme’s CSS file has proper DOCTYPE declaration at the top of your HTML, since IE8 is very strict about this and will fall back to quirks mode if it’s missing or malformed.
sounds like a float clearing issue to me. ie8 handles floated divs differently than other browsers. try adding overflow: hidden; to your main container div or maybe check if your sidebar css has proper width values that dont exceed the container.