CODEWITHSUNDEEP
javascripthtmlcssinternet-explorer
sazr
sazr

Reputation: 25938

DocType causes divs to sit too high(Margin-top not being executed)

I am using a specific DocType in my HTML document to ensure that IE renders Arial the same way as Firefox, Chrome and Safari do.

My Problem: Because of this specific doctype, it causes some divs to sit higher up(y axis) than they should. This only occurs in IE. Do you know what I can do to fix this? Maybe a CSS reset or IE hack?

The doctype I am using that is causing this error is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I use this doctype becuase it makes IE display Arial text with the same font weight as other browsers(otherwise its different), but it also makes divs sit too high up.

Upvotes: 0

Views: 220

Answers (2)

thirtydot
thirtydot

Reputation: 228302

This doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

causes quirks mode in IE.

I am using a specific DocType in my HTML document to ensure that IE renders Arial the same way as Firefox, Chrome and Safari do.

You should just let IE9 use DirectWrite (it's "different" text rendering technique). Firefox >= version 4 also uses DirectWrite. The text rendering between IE9 (in standards mode) and Firefox should be extremely similar. If it's not, something's wrong.

If you insist on making IE9 use GDI text rendering, then there's a better solution than forcing quirks mode via an ancient doctype.

You should use any doctype that triggers standards mode, such as the HTML5 doctype:

<!DOCTYPE html>

Then, you should add this meta tag inside <head> to force IE to behave as IE8, complete with GDI text rendering:

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

This way, IE will use IE8 mode, which is a drastic step up from quirks mode (which is IE5.5).

I've already hinted at this, but I have to explicitly say it: please don't force IE8 mode just to avoid DirectWrite. Instead, embrace IE9's new and improved text rendering!

Upvotes: 1

Joseph
Joseph

Reputation: 119887

  1. use the HTML5 doctype: <!DOCTYPE html>. the doctype is just there to prevent quirksmode (and not fix all the inconsistencies). the DTD is the one that sets which HTML to use (HTML4, XHTML and so on) and tells the browser how mark-up is valid. DTD is not used in the HTML5 doctype.

  2. make sure there are no whitespaces before the < in the doctype. that includes anything from a character, space or newline. In IE, even a single character before it causes quirks mode.

  3. check if those <div>s you mentioned used negative top margins to compensate for the body padding/margin that is caused when the page is rendered in quirks mode or when styles are not reset. if so, remove them. developers tend to forget the fact that browsers render stuff inconsistently, including the fact that the body has margins.

Upvotes: 2

Related Questions