Search code examples
csshtmldebuggingdoctype

Adding doctype for html5 (or any doctype) breaks my site


Adding a doctype to any of the photo series pages (salmon,buddy,bleach,watercolors) breaks the page and causes the divs' fixed-attachment background images to not appear .

I'm not sure if this is how this site works but if anyone could help me figure out which parts of the site aren't working outside of quirks mode (in any browser) I'd really appreciate it.

here is a live version of the site and a link to it hosted on github:

http://emilyduda.pancakeapps.com/stories.html

https://github.com/Michaelzrobin/duda-2-beta/tree/gh-pages

I know I should have started by having my doctype declared--the code has a lot of bugs and i didn't plan the website very well ,since i designed it as i coded it, and i'm new to both. I have lots of messy styles and superfluous stylesheets, and a lot of debugging and refactoring to do, but i'd like to see if i can deal with this doctype problem without having to completely recode the site, first.


Solution

  • Modern web pages are required to have a doctype. Without one you go into quirks mode and it's like 1995 all over again causing you to have a broken box model. This is why the very first thing to write onto any new page is the doctype.

    Here is a link explaining many of the different modes. Scroll down for the title "Effects" to see how quirks affects browser layout.

    Your only course of action is to bite the bullet and add the doctype and fix all your markup because you will do nothing but fight an uphill battle from here on out.