IE 11 not displaying CSS padding correctly

Question

I'm no expert in css so I could use some help here. This entry page I designed works fine in all browsers except IE 11 (and possibly earlier IE versions). http://src.wpl.ca/ IE seems to be ignoring the padding I've used to shift the "container" class down from the header and menu. I've done a search on Google and here but can't seem to find a solution.

CSS:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* CSS RESET DONE */

html,body { height: 100%; }
body {
  color: #fff;
  margin: 0 auto;
  font: 1em/1.3em Helvetica, sans-serif;
    background-color: #fff;  
}

a {text-decoration: none;}

.header {
  margin-bottom: 40px;
}
.clearfix {
  clear: both;
}

.container {
  z-index: 1;
  position: relative;
padding: 140px 40px 0 40px;
  text-align: center;
  height: 100%;
font-size: large;
}

.container p {
padding: 0 0 15px 0;
}

.container.white {
background-color: #fff;
color: #007dc3;
} 
.container.white a {
color: #7bc143;
}
.container.white a:hover {
color: #fcb034;
}

.container.blue {
    background-color: #007dc3;
color: #fff;
  }

.container.blue a {
color: #fcb034;
}
.container.blue a:hover {
color: #7bc143;
}


  .container.green {
    background-color: #7bc143;
color: #fff;
  }

.container.green a {
color: #007dc3;
}
.container.green a:hover {
color: #fcb034;
}


.container.gold {
    background-color: #fcb034;
color: #fff;
  }
.container.gold a {
color: #007dc3;
}
.container.gold a:hover {
color: #7bc143;
}

h1 {
  margin: 60px 0 60px 0;
  font-size: 40px;
  line-height: 40px;
  font-family: 'Love Ya Like A Sister', 'cursive';

}



/* Menu Styles */

.menu-container {
  width: 100%;
  position: fixed;
  height: 100px;
  background-color: #fcb034;
  background-image:url('http://src.wpl.ca/wp-content/uploads/2014/05/TDSRC_2014_logo.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right top; 

  z-index: 2;

}


.menu {
  width: 100%;
  position: relative;
  height: 70px;
  background-image:url('http://src.wpl.ca/wp-content/uploads/2014/05/menu-background.png');
  background-repeat:repeat-x;
margin: 100px 0 0 0;
 height: 70px;

  z-index: 2;
}

.chester-circle {
position:absolute;
z-index:1;
left:20px;
top:-40px; 
}

.menu-wrap {
height: 100%; 

      margin-left: 219px;

}


.menu a {
  width: 142px;
  height: 68px;
  margin-left: -15px;
display: inline-block;
  vertical-align: middle;
}
.menu a.club {
  background: url('http://src.wpl.ca/wp-content/uploads/2014/05/Menu-the-club.png') left top no-repeat;
}
.menu a.contests {
  background: url('http://src.wpl.ca/wp-content/uploads/2014/05/Menu-Contests.png') left top no-repeat;
}
.menu a.chapter {
  background: url('http://src.wpl.ca/wp-content/uploads/2014/05/Menu-chapter.png') left top no-repeat;
}
.menu a.things {
  background: url('http://src.wpl.ca/wp-content/uploads/2014/05/Menu-things.png') left top no-repeat;
}
.menu a.tell {
  background: url('http://src.wpl.ca/wp-content/uploads/2014/05/Menu-tell.png') left top no-repeat;
}
.menu a.what {
  background: url('http://src.wpl.ca/wp-content/uploads/2014/05/Menu-what.png') left top no-repeat;
}
.menu a:hover {
  background-position: left -70px;
}

.twocol {

width: 100%;

}

.twocol h1 {text-align:center}

.twocol h2 {
margin: 30px 0 30px 0;
  font-size: 30px;
  line-height: 40px;
  font-family: 'Love Ya Like A Sister', 'cursive';

text-align:center
}


.twocol img {
margin: auto;
}

.col1 {
float: left;
width: 600px;
text-align: left;
}

.col2 {
margin-left: 600px;
text-align: left;
}

.indent {
margin-left: 20px;
}

.italics {
font-style:italic;
}

HTML:

<!DOCTYPE HTML>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>The Waterloo Public Library's </br>2014 Summer Reading Club</title>
        <link href="style-home.css" type="text/css" rel="stylesheet" media="screen,projection" />
        <link href='http://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="menu-container">
            <div class="menu">
                <div class="chester-circle">
                    <img src="images/menu-chester.png" width="155" height="155" />
                </div>
                <div class="menu-wrap">
                    <a class="club active" href="#club"></a>
                    <a class="contests" href="#contests"></a>
                    <a class="chapter" href="#chapter"></a>
                    <a class="things" href="#things"></a>
                    <a class="tell" href="#tell" ></a>
                    <a class="what" href="#what"></a>
                </div>
            </div>
        </div>
        <div id="club" class="container white">
            <h1>The Waterloo Public Library's </br>2014 Summer Reading Club</h1>
            <div class="twocol">
                <div class="col1">
                    <img src="/images/TDSRC_2014_teaser_vertical_english_1_.png">
                </div>
                <div class="col2">
                    <p class="italics">Welcome to the 2014 WPL Summer Reading Club!</p>
                    <p>Spend your summer reading and you could earn incentives (a fancy word for "cool stuff"), chances at weekly prizes as well as a chance at the stupendous (another fancy word for "really cool stuff") grand prize at the end of the summer.</p>
                    <p>
                        The club runs from July 2 to August 23. Sign up at any of our locations.
                        <a href="http://src.wpl.ca/about">For more details click here</a>
                        .
                    </p>
                    <p>
                        This summer's theme is Eureka! and all things maker. At all locations all summer long there will be
                        <a href="#things">astounding programs and events</a>
                        . Starting with The Eureka Kickoff party at McCormick July 2.
                    </p>
                    <p>
                        And there's even more! We have monthly
                        <a href="#contests">contests</a>
                        ,
                        <a href="#chapter">the Chapter Book Challenge</a>
                        ,
                        <a href="#tell">sharing your own summer stories</a>
                        , and lots more.
                    </p>
                    <h2>
                        <a href="http://src.wpl.ca/main">Enter The WPL Summer Reading Club Site For More Information</a>
                    </h2>
                </div>
            </div>
        </div>
        <div id="contests" class="container white">
            <h1>Contests</h1>
            <div class="twocol">
                <div class="col1">
                    <p class="italics">Win! Win! Win!</p>
                    <p>Every month this summer you'll have a chance to win a snazzy prize when you enter any of our contests at all our locations.</p>
                    <p class="indent">In June look for the Eureka Word Search. How many words can you find?</p>
                    <p class="indent">Then in July it's time to set out on a Scavenger Hunt.</p>
                    <p class="indent">And finally in August get out your magnifying glass for a challenging game of I Spy.</p>
                    <p>Good luck!</p>
                    <h2>
                        <a href="http://src.wpl.ca/contests">Details At Our Contest Page</a>
                    </h2>
                </div>
                <div class="col2">
                    <img src="/images/look.png">
                </div>
            </div>
        </div>
        <div id="chapter" class="container white">
            <h1>Chapter Book Challenge</h1>
            <div class="twocol">
                <div class="col1">
                    <img src="/images/book_mouse.png">
                </div>
                <div class="col2">
                    <p>
                        Thought
                        <span class="italics">Harry Potter</span>
                        was the greatest series ever written? Or did you think it was as boring as counting grains of sand in your kid brother's sandbox?
                        <span class="italics">Diary of a Wimpy Kid</span>
                        made you laugh so hard that milk spewed from your nose (and you weren't even drinking milk)? Or was it so unfunny that it made you yawn so much your jaw fell off?
                    </p>
                    <p>Did you find a hidden gem of a book that you can't wait to share with the world (or at least Waterloo)? Or did you find a book so bad you want to warn others from ever falling prey to it's horridness ever again?</p>
                    <p>Then tell us about it! Not only will you be an internet sensation but you may win a prize. A very cool, top secret prize.</p>
                    <h2>
                        <a href="http://src.wpl.ca/chapter-book-challenge">For Complete Details Check Out The Chapter Book Challenge Page</a>
                    </h2>
                </div>
            </div>
        </div>
        <div id="things" class="container white">
            <h1>Things To Do At The Library</h1>
            <div class="twocol">
                <div class="col1">
                    <p class="italics">Mooooommmmm! I'm bored!</p>
                    <p>If you're looking for something to do this summer head on over to any of our locations for amazing events and programs. From babies to tweens we have something for everyone.</p>
                    <p>Lots and lots of stories, robot building, art meets science, getting ready for kindergarten, experiments for little scientists, crime solving for budding detectives, hands on crafts, computer programming, and so much more!</p>
                    <p>How could you possibly be bored?</p>
                    <h2>
                        <a href="http://src.wpl.ca/programs">For a Complete List of All Our Programs Click Here</a>
                    </h2>
                </div>
                <div class="col2">
                    <img src="/images/mouse_trampoline.png">
                </div>
            </div>
        </div>
        <div id="tell" class="container white">
            <h1>Tell Us!</h1>
            <div class="twocol">
                <div class="col1">
                    <img src="/images/tincan_mice-2.png">
                </div>
                <div class="col2">
                    <p>It was the best of summers. It was the worst of summers.</p>
                    <p>It was a summer of swimming. It was a summer of spilled ice cream.</p>
                    <p>It was a summer of unexpected adventure. It was a summer of bee stings and mosquito bites.</p>
                    <p>What is your summer like? Fun, boring, silly, itchy? Share your stories with us.</p>
                    <h2>
                        <a href="http://src.wpl.ca/tell-us">Share Your Stories Here</a>
                    </h2>
                </div>
            </div>
        </div>
        <div id="what" class="container white">
            <h1>What To Read</h1>
            <div class="twocol">
                <div class="col1">
                    <p>
                        Read every
                        <span class="italics">Geronimo Stilton</span>
                        book? Finished
                        <span class="italics">Harry Potter</span>
                        in a weekend? Solved all the
                        <span class="italics">Hardy Boys</span>
                        ?
                        <span class="italics">Nancy Drew</span>
                        ?
                        <span class="italics">And Then It Happened</span>
                        has all happened?
                        <span class="italics">Diary of a Wimpy Kid</span>
                        is finished like Greg's dream of pumping iron?
                    </p>
                    <p>You're wandering around the shelves looking for your next read but have no idea where to look? Then check out these suggested reading lists. Hand picked by the staff just for you!</p>
                    <h2>
                        <a href="http://src.wpl.ca/suggested-books">All Our Suggestions Can Be Found Here</a>
                    </h2>
                </div>
                <div class="col2">
                    <img src="/images/chipmunkmagazine.png">
                </div>
            </div>
        </div>
    </body>
</html>

Thanks.

Solution 1

I checked in my IE 11 if this problems occurs, and although I tried hard, it didn't appear. However, you can try this things:

1. Try to hard refresh your IE (ctrl + f5)

2. Add float: left; to your .container rules.

3. Instead of writing every single tag at the begining of your css file, write *, for example:

Instead of:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, 
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, 
figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, 
time, mark, audio, video 
{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline;
}

go with:

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

I hope it helps :)

Solution 2

Or if the problem still presist you can use the following js library:

IE 11 specific CSS

For browser specific css files I would recommend:

Simple solution, just use this JS library and you can easily apply styles for every browser/os combination:

BrowserClass.js

With this you will get a class name on the body tag with the current name and version of the browser also with the used OS.

After include the file:

<script src="js/browserclass.js"></script>

For example on Windows 8.1 with the latest ie you will see:

<body class="ie ie11 win desktop">

And in your style file you can refer by: (.sass styling)

body.ie11

Note: Conditional Comments in IE only work for up to IE9!