CODEWITHSUNDEEP
htmlcssinternet-explorercross-browsercentering
Omar Juvera
Omar Juvera

Reputation: 12297

IE won't center <main> and it's content

This CSS works on firefox and chrome, but for some weird reason it wont work on IE =(

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>I hate u, ie :p</title>

    <style>
    header>nav, main, footer>nav {
        max-width: 500px;
        padding: 0em;
        margin: 0em auto;
        }
    header, footer { min-width: 100%; background-color: #c0c0c0;}

    main { background-color: yellow; }
    main>section, main>aside { display: inline-block; }
    main>section    { background-color: aqua; }
    main>aside      { background-color: pink; }
    </style>
</head>
<body>


<header>
    <nav>
    <ul><li>Header is centered =)</li></ul>
    </nav>

    <nav>
    <ul><li>Header (nemu 2) is centered =)</li></ul>
    </nav>
</header>


<main>
    <section>
    <h1>Why IE won't center me?</h1>
    </section>

    <aside>
    <p>Stackoverflow: please help me</p>
    </aside>
</main>


<footer>
    <nav>
    <ul><li>Footer is centered =)</li></ul>
    </nav>
</footer>
</body>
</html>

I'd appreciate it if you help me fix this, preferably without adding/removing elements. I'd like to keep the current semantic if possible. If not, o well...

It is worth to mention that if I do something like <main><div>...</div></main> and add main>div { margin: 0em auto;} IE (and all other browsers, as expected) center main's content. But like I mentioned, I'd like to not break the semantics.

Upvotes: 0

Views: 90

Answers (3)

hungerstar
hungerstar

Reputation: 21725

The main element is not supported in IE:

Which I believe means there is no default styling for the main element, so you will have to add it. Most reset stylesheets will do this for you for the newer, more semantic elements.

Add display: block to your CSS selector for main and it should work.

main {
    display: block;
    max-width: 500px;
    margin: 0 auto;
}

Upvotes: 0

Rob
Rob

Reputation: 15168

IE does not support the main element. To get it to work, however, you can just set main { display:block; } and it will work. This is a similar fix to the other new HTML5 elements, such as section and nav, which weren't supported but could be added by just adding that CSS.

Upvotes: 3

henningj
henningj

Reputation: 386

As I don't have enough reputation, I post my idea as an answer:

My guess is, that you have to add position: relative; for your .main.

Browsers have a default.css with default values for keys you didn't set. I think (but didn't check) the IE has different std-values than other browsers. That could cause problems.

Upvotes: 0

Related Questions