XHTML Doctype breaks css

Posted on 2009-04-28
Last Modified: 2012-05-06
I have a website,  I'm trying to get it xhtml1.1 strict compliant.  I've run it through the w3c validator and it validates perfect.  The CSS also validates perfect.

When I include the doctype declaration, some of the css works, but some of it doesn't.  The css that doesn't work, is basically copy/pasted from the part that does work.

I realize that things may not be breaking, that it's most likely that I'm doing something wrong, but I've tried searching online for a solution and can't find anything.

I have a "development trigger" on the website that lets me make changes without affecting what other people see.

The website should look like what you see at (there is a placement issue with one of the elements in Opera, Chrome, and Safari but disregard that).
The version with the Doctype included is at

Any advise would be helpful. :-)

I have also uploaded jpgs of how things look and should look.
Question by:Tony O'Byrne
    LVL 42

    Accepted Solution

    Class  names are case-sensitive. You assigned a <div> to the class "sideBar" but your stylesheet only contains rules for the "sidebar" class.

    Why are you using the XHTML 1.0 Transitional doctype then?  It's better to use the XHTML 1.0 Strict doctype. (When used correctly, XHTML 1.1 is not compatible with IE.)
    LVL 6

    Author Comment

    by:Tony O'Byrne
    Hahahahahahahahahahah!  I can't believe I didn't see that!

    Thanks for your help. :)  After making that one change, it pretty much fully fixed the issue.  There's still colors I need to work out, but now that I've gotten the general style fixed, it shouldn't be a problem.

    I put the Transitional doctype in there to see if it had anything to do with the "strictness".  I just forgot to change it back.

    I'll keep your XHTML 1.1 suggestion in mind also.  Thanks for your help Kravimir!

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    WCAG audit tools 1 39
    Reduced with of radio button in the page 2 29
    Left menu with a header image 6 23
    HTML5 and Javascript 3 23
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    Read about why website design really matters in today's demanding market.
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    733 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now