Margin: Auto not working in IE

URL: http://cyberbat.co.uk/test container margin: auto is not working, is there any other way to put it in the middle in IE.

EDIT: Check it again, the index.php was the wrong file, I replaced it with index.html .

Answers


This is a bug in IE! You just need to create a holder for <div class="page"> and set its text-align to center

.page-holder{
    text-align:center;
}
.page{
    margin:0 auto;
}
<div class="page-holder">
    <div class="page">
    page content
    </div>
</div>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Your problem is define your file type and standards. if you add to this code to top of your file it will work!


Use this on parent container for stupid browsers:

text-align: center

try using the following on the parent item.

display: flex;
align-items: center;

You have RAW php code because you didn't configure the server properly:

<?php
include('inc/settings.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Resolve that issue by applying PHP to *.html files and <?php include ?> won't show up literally. If I recall correctly, adjust this line in the .ini file to be:

AddType application/x-httpd-php .html .htm .php

Because this literal backend code is in front of the DOCTYPE, it causes quirks mode in IE and in quirks horizontal auto margins don't work properly.

You can go with the text-align:center on parent element, but that's a hack for IE and you should solve this properly by making IE render it in standards mode from my suggestion above.


Internet Explorer displays your website in quirks mode because of this bogus processing instruction at the top of markup:

<?php
include('inc/settings.php');
?>

Remove it; margin: auto works in IE6+. There's no need to do text-align: center or other unnecessary changes.


Try adding a meta record to head:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

You can download normalize.css (just google it) and link it to your project, now you can use smth like:

HTML:

    <main class="container></main>

CSS:

    .container {
      margin-left: auto;
      margin-right: auto;
      width: 600px;

Need Your Help

Logrotate to clean up date stamped files

linux oracle logrotate

I'm currently trying to work out a method of tidying up Oracle Recover log files that are created by Cron...

Android Image Dialog/Popup

android dialog android-imageview android-alertdialog

Is it possible to have just an image popup/come-up in an Android application? It's similar to an overriding the normal view of an AlertDialog so that it contains just an image and nothing else.