Use Bodhi Linux—It's awesome!

hasLayout.net

Share |

No Auto Margin Center Pseudo-Bug

Affected Versions

This bug affects: IE8, IE7, IE6

Symptoms

side margins set to value `auto` do not center a block-level element

Date of the Tutorial

Sun Aug 9 06:28:29 2009

Description

So you're hacking away your precious little page... set left and right margins to value auto along with proper width; everything's spiffy in all the browsers but IE. What gives? Let's glance at the demo

Demo

Due to the nature of the bug, the demo is available on a separate page

HTML Code:
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>No Auto Margin Center Bug - hasLayout.net by Zoffix Znet</title>

<h1>Center Meh!</h1>
CSS Code:
h1 {
    width: 100px;
    margin: 0 auto;
}

The reason I called this bug "pseudo-bug" is because people who know what they are doing (providing they haven't been awake for 27 hours straight and did not abuse any substances) will never come across this "bug". In fact, this isn't really a bug in the affected versions so much as it's the affected versions rendering as their older relatives. Spotted the problem yet?

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Pseudo Bug)

Date of the Solution

Sun Aug 9 06:42:54 2009

Fixed Versions

All of the affected

Description

If you have a sharp eye, you probably spotted the problem already - no DOCTYPE! What does this mean? Affected IEs go into quirks mode and start rendering like their old ancestors because they think your page was coded long time ago and isn't ready for the newer, less buggy rendering.

Due to the nature of the bug, fixed demo is available on a separate page

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

<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>No Auto Margin Center Bug Fixed Demo - hasLayout.net by Zoffix Znet</title>

<h1>Center Meh!</h1>
CSS Code:
h1 {
    width: 100px;
    margin: 0 auto;
}

We've added the doctype and now everything works as it should. Keep in mind that having comments and other junk before the doctype can also trow IE in quirks mode. A simple test to see which mode your page is in, simply run this code in your location bar: javascript:alert(document.compatMode). If the message says BackCompat, it means quirky behaviour.

Comments

Create new comment

  • Theis

    Mon Oct 25 15:00:09 2010

    This post really got me on track. My problem was that IE9 for some reason got confused by a comment I had at the top of my html!

  • TFSLO

    Sat Aug 7 08:57:24 2010

    Thanks for the tip.. I was going through a tutorial for a css editor - style master - and could not see why my page did not do as it should - the demo page did not have the doctype.. your tip pointed out the obvious (that I was missing)

  • Rony

    Thu Mar 25 16:06:52 2010

    Useful post. Really saved my day :)

  • Zoffix Znet

    Fri Aug 21 23:09:18 2009

    Ok, you are the second person reporting that. I would assume there's some kind of a bug lurking, but I can't reproduce it :\

  • aprian

    Fri Aug 21 15:04:07 2009

    Hmm could be something wrong with my IE8. So when opened the fixed demo for the first time the h1 is centered, but when i hit F5 (refresh the browser) the h1 will go to the left.
    Any idea how could that happen?. Damn i hate this IE8!.

  • Zoffix Znet

    Wed Aug 19 06:21:05 2009

    Not sure what you mean, bud. Fixed demo is centered no matter how many times I refresh :/

  • aprian

    Wed Aug 19 03:20:18 2009

    When the page first load, the h1 is centered, but when you refresh the browser then the element will go to the left ... :(

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book:

Support Wikipedia