CODEWITHSUNDEEP
htmlcssinternet-explorer-11
ScorNinja
ScorNinja

Reputation: 69

IE element percentage width/max-width bug

I have run into a problem where IE is not rendering my page correctly.

Here is the site: Cakeball Flavors

Google Chrome enter image description here

Internet Explorer 11 enter image description here

Basically I'm trying to make the main element 1000px wide, but internet explorer is failing to accomplish this. I'm utilizing max-width of 1000px and width of 100% for a fluid layout, but IE seems to be ignoring it. I've double-checked the code inspection in both browsers to ensure that nothing is overriding it.

Markup

...
<body>
  <header>
    ...
  </header>
  <main>
    <header>
      <h1>Flavors</h1>
    </header>

    <h2>Basic</h2>
    <figure>
      <img src="...">
      <figcaption></figcaption>
    </figure>
    ...
  </main>
...

Style

...
body {
  margin: auto;
  background: white;
  text-align: center;
}
main {
  width: 100%;
  max-width: 1000px;
  margin: -1rem auto -1rem;
  text-align: left;
}

Upvotes: 1

Views: 2076

Answers (1)

ScorNinja
ScorNinja

Reputation: 69

Thanks to @steveax, I was able to figure out the problem is IE's lack of support for the main element. After a further 30 minutes of research and testing I came up with a solution.

In my head tag, I added the following code above all my css links:

<script>document.createElement('main');</script>

In my stylesheet I added:

main { display: block; }

Now the page correctly renders in Internet Explorer (10 & 11 at least).

enter image description here

Upvotes: 1

Related Questions