IE completely ignores CSS rules

Works perfect on Opera, Safari, FF and Chrome but when it comes to IE, CSS doesn't work.

The website does not align to the center on IE, as well as the button background along with the width and height being completely ignored.

In IE, everything is currently aligned to the left too (default setting I'm guessing).

Here's my CSS:

#header {
width: 556px;
margin-right: auto;
margin-left: auto;
height: 140px;
background-image: url(bg.jpg);
}
#footer {
bottom: 0px;
width: 556px;
height: 60px;
background-image: url(footer.png);
margin: auto;
}


#body {
width: 556px;
height: 25';
background-repeat: no-repeat;
background-position: center center;
background-image: url(bg2.png);
height: 500px;
margin: auto;

}
.button {
width: 400px;
background-image: url(button2.png);
height: 149px;
}
#footerholder {
bottom: 0px;
position: fixed;
text-align: center;
width: 100%;
}

Thank you.

Fix this random quote and see if that does it. Otherwise, give us a line to the site please.


height: 25';

Actually you should remove the height line ( in bold red ) entirely since you have already designated a height of 500px


#body {
width: 556px;
height: 25';
background-repeat: no-repeat;
background-position: center center;
background-image: url(bg2.png);
height: 500px;
margin: auto;

}

Thanks guys, problem solved for everything except the alignment. Can't believe I didn't see that mistake.

Anyway, for the alignment, I thought I should have a wrapper and well..problem solved once again. This is what I used for the wrapper:

#wrapper {
width: 100%;
text-align: center;

It fixed EVERYTHING.

Once again thanks for spotting the mistake in the CSS.

Why must IE be so complicated?

Why must IE be so complicated?

IE is very picky about invalid code. The other browsers seem to skip over mistakes a bit easier. The validator (http://validator.w3.org/)can help spot these things for you, if you're not using it.

Dave

Hello,


The website does not align to the center on IE
Thanks guys, problem solved for everything except the alignment. Can't believe I didn't see that mistake.

Anyway, for the alignment, I thought I should have a wrapper and well..problem solved once again. This is what I used for the wrapper:

#wrapper {
width: 100%;
text-align: center;

It fixed EVERYTHING.

Once again thanks for spotting the mistake in the CSS.

Why must IE be so complicated?

If IE does not align to the center with margin:auto but need a text-align center to a wrapper in order to center properly, it's a sign that it is running in Quirks mode.

Have you a valid Doctype on the very top of your document ? If not, adding a doctype should solve the problem without any need of the text-align:center wrapper.

If you allready have a doctype, make sur you don't have any comment or space before the doctype or that you don't use the BOM in your document encoding.