CODEWITHSUNDEEP
htmlcssinternet-explorer
Nick
Nick

Reputation: 9373

IE goes haywire with formating other broswers fare fine

I have made a simple page for a sound board that I made. I use Chrome actively and it looks how I would like it. I've tested it in Safari, Firefox, and, Chrome. Here is a picture of the site, at http://nkonecny.com/monkeyislandsb: enter image description here

As you can see in IE9 the margin is completely wrong, there is a broken image looking box at the top right, and towards the bottom the second Ad and footer are gone. I would post code but I slightest clue of where the problem lies so I thought it would be easier to direct to my site and view the source. Please let me know if this needs more clarification.

Upvotes: 0

Views: 61

Answers (3)

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

I'd recommend using a reset style sheet to ensure that the base styles on all browsers are the same. A good way of doing this is to use normalize.css (http://necolas.github.com/normalize.css/), as it doesn't mess around too much.

Looking at your site, it also renders in quirks mode - that's because the first line isn't the doctype, but a comment.

Upvotes: 1

Ry-
Ry-

Reputation: 224963

You have a comment before your DTD:

<!-- http://blogs.msdn.com/b/ie/archive/2011/05/13/unlocking-the-power-of-html5-lt-audio-gt.aspx -->
<!DOCTYPE HTML>

<!DOCTYPE html> must be the very first thing, or IE will go into Quirks Mode, i.e. IE6 rendering.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

Remove the HTML comment from before the DOCTYPE. Putting anything before the DOCTYPE triggers Quirks Mode in IE.

Also, that broken image thing is coming from your <img> tag, whatever that's there for...

Upvotes: 4

Related Questions