I´m very new designer and created my own WordPress theme and it works as expected on FireFox, Chrome and Opera. The problem arrives with InternetExplorer (i´m using Windows 7 with IE 11).
Seems that InternetExplorer 11 don't understand the max-width CSS. I have this CSS:
.vi-container {
margin: 0 auto;
position: relative;
width: 100%;
}
.vi-content {
margin: 0 auto;
max-width: 1200px;
overflow: hidden;
}
The HTMl code is something like:
<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 1200px is totaly ignored by InternetExplorer. You can see it in live loading my webpage in IE and other browser to compare. For example: http://www.vozidea.com/limpia-la-base-de-datos-wordpress-con-wp-sweep
And here an example JSfiddle: http://jsfiddle.net/z4s01yxz/
I found other articles into StackOverflow about max-width issues on IE, but couldn't achieve a fix bymyself, that's why i´m requesting help. Hope that someone can give me a hand with this, thanks in advance.
The actual problem is that in InternetExplorer the webpage expands to fill all the width because max-width is ignored. You can check this image to see the difference: i.imgur.com/kGr8wk1.jpg
P.S: Sorry for my bad english.
I think your problem is not coming from max-width
but from main
element...
The main
element is not fully supported by IE11 (source).
2 solutions :
<main>
element to a <div>
. Demo : http://jsfiddle.net/z4s01yxz/2/
main { display: block; }
to your CSS. Demo : http://jsfiddle.net/z4s01yxz/1/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With