CSS file: http://pastebin.com/tBvGjhTX
HTML file: http://pastebin.com/r5YUTHgp

I have a div with following rules:

{
    width: 75%;
    margin: 5% auto;
}

Obviously works everywhere except Microsoft Internet Explorer 0.5 to Edge. While in every normal browser, box takes 75% of width and is centered horizontally. But Microsoft be like "screw that", and in Internet Explorer box takes 100% the width of the parent. Any other dependencies, removing them or keeping them doesn't change anything.

Add this to your stylesheet.

html, body { width: 100% }

Didn't work :(

According to your pastebin snippet you don't use a doctype. Is this also the case in your page?

Ah, good you reminded me, I added <!DOCTYPE html>.
However, that still does not solve the problem.

Yes. I know it works with Internet Explorer 9+ normally. That's why I used it. Because I expected it to work, and it doesn't. I don't know what part does or does not work with it.

okay, i've found the issue. In head.php you have a CSS reset and the css rule that sets the new HTML5 elements to display: block misses the main tag, so add the main tag there and it will center in IE. Below I've added the main tag so you can see what I'm talking about :)

article,aside,details,figcaption,figure,footer,header,hgroup,menu,main,nav,section{display:block}

Instead you can also add display: block in your own stylesheet of the main CSS rule.

Yep, it works.

Still pretty stupid though, every single browser does it, except IE... I don't know what I expected.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.