Issue With Css In Ie

Discussion in 'HTML & Website Design' started by chaferoc, Feb 1, 2013.

  1. #1
    i'm working on a website that looks perfect in firefox and chrome, but doesn't look right in internet exporer. after going over everything line by line, i still can't figure out what's wrong. i am new here and would appreciate any help. i will in return help others as often as possible. here is the link.

    http://www.umfoundation.com/planning/
     
    Solved! View solution.
    chaferoc, Feb 1, 2013 IP
  2. #2
    The core of your problem isn't in the CSS -- it's in the HTML.... very first line in fact.
        <!----------------HEADER----------------------------------------> 
    Code (markup):
    You CANNOT have the page outputting ANYTHING before your doctype, or IE is in quirks mode -- and in quirks mode several things behave differently, MOST IMPORTANTLY it's using a different box model....

    In "standards mode" -- aka what the CSS2 specification says, the total width of an element is width plus padding, where the area for content equals width.

    in "quirks" rendering IE behaves like IE 5 -- aka what the CSS2 DRAFT specification didn't really even say how to handle it, so Microsoft GUESSED -- treating width as the total element width, with the available area for content being width MINUS padding.

    Though the page really is filled with issues -- The tranny doctype saying the code is in transition from 1997 to 1998 practices, the stupid malfing mm_swap javascript asshattery from that steaming pile of bull known as Dreamweaver -- said script basically doing CSS' job, some form of jquery bull on a page I can't even find anything that warrants the presence of scripting in the first place, multiple H1's in a pre-5 document, general nonsensical use of heading tags, definition list around elements that aren't list items OR terms+definitions, static presentation inlined in the markup, comment placements that even AFTER fixing the one before the doctype would STILL quite possibly trip rendering bugs like disappearing content, and of course endless pointless DIV for nothing.

    ... and that's before talking the legibility concerns of the bandwidth wasting webfonts with that whole bloated slow 'typekit' mess, fixed width layout, basically wasting over a megabyte in 24 files to send less than 2k of plaintext and 2 content images.

    Oh, and the footer is completely buggered here in every browser -- unless your intent was to have all those links be hidden against the background in some form of oddball SEO cloaking abuse? (I think it's just broken).

    Laundry list of how not to build a site -- I would suggest tossing the entire codebase and starting over with actual semantic markup, ease up on the DIV, ease up on the pointless redundant comments for nothing, and give separation of presentation from content in an actual recommendation doctype a try.
     
    deathshadow, Feb 2, 2013 IP
  3. chaferoc

    chaferoc Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    Thank you for the help. It was the first line after all. I will remove the stupid comments. I can't do anything about the rest of the site as we paid someone to do it and it was approved over my head. The footer isn't broken for me by the way. Perhaps removing the commenting will improve it for others.
     
    chaferoc, Feb 4, 2013 IP
  4. Synastute

    Synastute Greenhorn

    Messages:
    96
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #4
    It's a compatibility issue, you have to correct it through code.
     
    Synastute, Feb 5, 2013 IP