CSS: Styling for Internet Explorer

There have been many an article written concerning this subject; so, just consider this yet another anti-IE rant among the others.  And, oh, I could go over the long list of why Internet Explorer sucks. Or why it's slow, or insecure, or etc.  But, I'm going to focus on one thing.

And one thing only.


div {
margin: 0px auto;
width: 400px;
}

For those in the know, that's CSS (Cascading Style Sheets) which is used to style HTML.  Now, for those that have tried to style anything before, you'd know that that snippet of code does the following:

• Sets the width of the element to 400 pixels.
• Tells the browser to render the element with a margin (or space around the element) of 0 pixels on the top and bottom, and auto on the left and right.

When you tell the browser to auto the margin of the left and right sides of the element, you are telling it to center the element.  Like so:

Look at me!

That should render correctly, except for you fuckers using Internet Explorer.  Thus, I need to do some insane work-around for you assholes. You see, IE doesn't correctly render the "margin:0px auto;" line.  Instead, you have to do: "text-align: center;"  But not for the element you want to center.  Ohhhhh no.  That would be too simple. You need to apply it to the PARENT element.  And then, because you aren't an idiot, you want the text to align properly in your element, so you need to apply "text-align: left;" to your element.

So, to recap.  You need to wrap your element in another element.  Apply "text-align:center" to that parent element.  Then apply "text-align:left" to your element.

God, I hate IE.