Margin in IE is not working

Question

I have created a free report and it is working too fine in mozilla firefox but having alot of issues in MS IE.

Please give me any solution for this please.

Here is the link of the website which is looking messed up in IE.

i set its main #container

#container {
   width: 840px;
   margin: 10px auto;
   display: block;
}

but not working. :(

I saw that in firefox margin are: 10px auto; what are you missing? — DonCallisto, Feb 16 '12 at 10:56
Which version of MS IE? There are differences between IE6, 7, 8 and 9. — T. Junghans, Feb 16 '12 at 10:57
@DonCallisto Yes, please take a look this in IE .. its having problem — Muzammil, Feb 16 '12 at 11:01
IE displays your site in Quirks mode. Make sure your html is valid and see if you can switch to a newer doctype. — ZippyV, Feb 16 '12 at 11:03
Are you using a DOCTYPE that that triggers Standards-Mode in IE? — Amol Chavan, Feb 16 '12 at 11:04
@4M01 For some reason his HTML4 transitional doctype doesn't trigger standards mode in IE. — ZippyV, Feb 16 '12 at 11:06

score 2 · Answer 1 · edited May 23 '17 at 11:56

2

IE is displaying your page in Quirksmode which is why margin: auto will not work.

You can check if IE is running in Quirksmode by reading the answer on this post: How to tell if a browser is in "quirks" mode?

You'll find a list of IE Quirksmode limitations here: http://www.quirksmode.org/css/quirksmode.html

You will need to change your Doctype to make IE run in strict mode. For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

edited May 23 '17 at 11:56

Community

answered Feb 16 '12 at 11:05

T. Junghans

really helpfull, but having some more error in the like ,, heading is showing under the book, but it should show left side. – Muzammil Feb 16 '12 at 12:14
I'm not quite sure why but I'm guessing this is also a cause of quirks mode. Somehow the floats aren't performing right. Also see http://stackoverflow.com/questions/1443007/cannot-get-float-left-right-to-work-for-a-div-in-internet-explorer. Giving div.book-preview a width of 230px will correct this, however I strongly suggest you update your doctype. – T. Junghans Feb 16 '12 at 12:30
i update the doc type to locally, but not on server. – Muzammil Feb 16 '12 at 12:35
@Muzammil Best choice of doctype :-) – T. Junghans Feb 16 '12 at 12:39
i have 1 more question, as we have firebug for mozilla, is there any tool for IE same as firebug? – Muzammil Feb 16 '12 at 12:40
There's the IE developer toolbar. http://www.microsoft.com/download/en/details.aspx?id=18359 It's not as powerful as firebug, but it does help quite a bit. – T. Junghans Feb 16 '12 at 12:45

score 0 · Answer 2 · answered Feb 16 '12 at 11:05

For IE6 you're going to want to add text-align: center; to the element parent to the container which you are using margin: auto;

For example if you had:

<body>
<div id="wrap">

You could try:

body {text-align: center;}
#wrap {width: 1000px; margin: auto;}

2 Answers2