As a new designer, I recently created my own WordPress theme that functions perfectly on FireFox, Chrome, and Opera. However, I encountered an issue with InternetExplorer (I'm using Windows 7 with IE 11).
It appears that InternetExplorer 11 does not recognize the max-width CSS property. Here is the CSS in question:
.vi-container {
margin: 0 auto;
position: relative;
width: 100%;
}
.vi-content {
margin: 0 auto;
max-width: 1200px;
overflow: hidden;
}
The HTML code looks something like this:
<div class="vi-container">
<header class="vi-header">Header stuff</header>
<main class="vi-content" itemtype="http://schema.org/Blog" itemprop="mainContentOfPage" itemscope="" role="main">
<article class="post-content-wrap" itemtype="http://schema.org/BlogPosting" itemprop="blogPost" itemscope=""></article>
<!-- more articles with contents -->
<aside class="vi-sidebar" itemtype="http://schema.org/WPSideBar" itemscope="" role="complementary"></aside>
</main>
</div>
The max-width of 1200px is being completely disregarded by InternetExplorer. You can observe this by loading my webpage in IE and comparing it to other browsers. For example:
Here is an example JSfiddle link: http://jsfiddle.net/z4s01yxz/
I have come across similar discussions on StackOverflow regarding max-width issues in IE but haven't been able to resolve it myself. Hence, I am seeking assistance. I hope someone can help me with this. Thank you in advance.
The current issue lies in how the webpage expands to fill the entire width in InternetExplorer because the max-width property is being ignored. You can view this image for a visual comparison: i.imgur.com/kGr8wk1.jpg
P.S: Apologies for any language mistakes.