Member Avatar for Dark_Omen

i have a problem with the way my webiste looks in different browsers. In firefox it looks fine, but when I view it in IE it looks really different, can anybody explain why this happens, and if there is a way to fix the problem?
Thanks

  • 2 Contributors
  • 2 Replies
  • 125 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dark_Omen

Dani AI

Generated

A quick diagnosis that builds on and : when CSS looks fine in one browser but the layout breaks in Internet Explorer, the most common cause is the page being rendered in a different document mode (standards vs quirks). ’s advice to validate the markup was exactly the right first step; finding HTML errors at the top of the document (doctype and root markup) often explains why IE and Firefox behave differently.

What the DOCTYPE does: it tells browsers which rendering rules to apply. Modern pages should use the simple HTML5 declaration to request standards mode:

<!DOCTYPE html>

Older doctypes (HTML4/XHTML variants) or a missing/incorrect doctype can trigger quirks-mode behavior in some browsers, producing old box-model handling and other layout quirks. If you serve XHTML, be explicit about the MIME type and valid XML syntax.

Practical checklist to fix the page:

  • Put a correct doctype at the very top of the file (before any whitespace).
  • Fix the validation errors the checker found; small syntax bugs can cascade into big layout differences.
  • Use the browser’s developer tools (F12 in IE) to check the document mode and console errors.
  • If you must support old IE, prefer fixing markup first; use targeted fallbacks (conditional comments, vendor-specific tweaks) only where necessary.
  • Consider a simple CSS reset and box-sizing rules to make layout more predictable across browsers.

Useful references: read about how doctypes map to quirks/standards modes on MDN and the HTML specification on the WHATWG site for the exact doctype behavior and syntax:

Recommended Answers

All 2 Replies

Member Avatar for Dani

Different browsers have different interpretations of the HTML "standard". The best you can do is ensure that your html and css code are W3C compliant (see w3c.org). Web developers / designers spend countless countless hours trying to rectify what you're trying to do ... get their sites cross-browser compliant.

Check here for another thread related to this issue, http://www.daniweb.com/techtalkforums/thread40160.html

Member Avatar for Dark_Omen

Well I went to W3.org to see if the page was valid, my css code was, but my html wasn't. It generated a lot response, one is the doctype header. What is the purpose of the doctype header and which one whould I use? Where it listed all the problems it said if this was right then it might fix a lot of other problems, which too me did not seem like problems.
BTW if anyone wants to actually view the code and see what I am talking about for yourself, my site's at http://people.umass.edu/spullen/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.