Validation OK, yet page displays differently in IE and FF?

Discussion in 'CSS' started by StevenHu, Feb 21, 2007.

0
  1. #1
    I successfully validated my 4.01 Transitional HTML and my CSS in the validators on W3C's site. The CSS validator had several inconsequential warnings about color, but no errors. Yet on Firefox the formatting does not work at all, but IE renders the page correctly.

    If I remove the Doctype, both browsers render the page correctly.

    How can FF not render it correctly if it validated correctly, but can read the CSS just fine if the Doctype is removed?

    Here's the test page with the Doctype (no formatting in FF): http://www.rc10.com/z.htm
    Same page, only no Doctype: http://www.rc10.com/za.htm

    Thanks,
    Steve
     
    StevenHu, Feb 21, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    I can see no reason for the problem. Try making the href a relative address, to see if that makes a difference, i.e. 
    
<link rel="stylesheet" 
      type="text/css" 
      href="misc/css/associatedcssCHECKED.css">
    Code (markup):
    You might also change :hover, et al, to a:hover. The modern browser will apply the pseudo classes to every element. IE only knows about the pseudo classes on the a element.

    cheers,

    gary
     
    kk5st, Feb 21, 2007 IP
  3. AndrewR

    AndrewR Peon

    Messages:
    108
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Just for future reference:

    Though your site might validate, it doesn't necessarily mean it's good code. It's the same vice versa. If you look at bigger sites like MSN, Yahoo, Google, etc, their sites don't validate, but I can assure you they work in nearly every browser.
     
    AndrewR, Feb 21, 2007 IP
  4. Instant Minority

    Instant Minority Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    validation is really only half the battle - broswers like the mozilla systems and opera, etc are based solely on CSS standars set by W3C, but IE has its own set of standards.

    however, it doesn't seem like your problem here is your CSS code at all, but the DOCTYPE you are using.

    with my sites, i construct using only CSS and div blocks, like you would with a table, etc - it seems to be the most common method. the doctype tag i would use for this is:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    essentially what seems to be happening with your page is the standards are being mixed. IE will read this tag and say "whatever" then load your style sheet, etc.

    however, firefox being it is built to standards, will not use your style sheet data if the way you are using it is not in compliance with how your DOCTYPE tag says you are using it.

    essentially make sure you used the right DOCTYPE tag.
     
    Instant Minority, Feb 23, 2007 IP