Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

max-width not working for IE 11

Tags:

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.

like image 385
Zeokat Avatar asked Mar 01 '15 14:03

Zeokat


1 Answers

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 :

  • Change your <main> element to a <div>. Demo : http://jsfiddle.net/z4s01yxz/2/
  • Add main { display: block; } to your CSS. Demo : http://jsfiddle.net/z4s01yxz/1/
like image 59
Guy Avatar answered Nov 15 '22 18:11

Guy