CODEWITHSUNDEEP
htmlcssinternet-explorer
Armin
Armin

Reputation: 361

IE ignoring background, padding and min-height

I've got some problems with IE. But I think pictures are worth a thousand words in this case:

Chrome, Firefox & expected result: enter image description here

IE 11 enter image description here

Why doesn't IE present it like I expect? And what can be done to solve this issue?

http://jsfiddle.net/edrpuLtk/3/

css

* {
    padding: 0;
    margin: 0;
    border: 0;
}
html, body {
    text-align: center;
    margin: 0;
    padding: 0;
}
body, header {
    background: #FFFF33;
    background-image: url(../bg1.jpg);
    background-repeat: repeat-y;
    background-size: 30%;
    background-position: right top;
}
header, main {
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
}
header {
    height: 136px;
    width: 100%;
    position: fixed;
}
main {
    min-height: calc(100vh - (136px + 80px));
    /* 100% minus (height of header plus height of footer) */
    background-color: rgba(254, 254, 254, 0.33);
    overflow: hidden;
    padding-top: 136px;
}
footer {
    width: 100%;
    height: 80px;
}
#content {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
}

html

<header>
    <p>some text</p>
</header>
<main>
    <div id="content">
         <h1>Headline</h1>
        <p>line 1</p>
        ...
    </div>
</main>
<footer>footer</footer>

Upvotes: 0

Views: 52

Answers (2)

C3roe
C3roe

Reputation: 96316

All that IE is missing is display:block for main in its browser stylesheet.

Add that “manually” via your CSS, and all is well:

main {
    display:block;
    /* rest of your formatting for main */
}

http://jsfiddle.net/edrpuLtk/4/

Upvotes: 2

Passerby
Passerby

Reputation: 10070

Extending from comment:

According to caniuse, IE still doesn't support <main> element, so you may want to use something like <div> instead.

Upvotes: 2

Related Questions