Firefox and Netscape viewing problems....

Discussion in 'CSS' started by Kato_seriously, Aug 11, 2006.

0
  1. #1
    I am relatively new to CSS and the website I'm working on
    http://www.crestridgemountainmortgage.com
    views completely wrong in Firefox and Netscape.

    The header image and tab menu bar should be centered and laying on top respectively.

    What is going on to make them display that way in firefox, but display correctly in I.E.?

    Thanks,
    -Joshua
     
    Kato_seriously, Aug 11, 2006 IP
  2. Gordaen

    Gordaen Peon

    Messages:
    277
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I.E. is buggy, so generally-speaking, if you have something that works in IE and not FF, Opera, Safari, etc. it is because of an error in the markup/css. For instance: http://validator.w3.org/check?verbose=1&uri=http://www.crestridgemountainmortgage.com/

    You have a tag that doesn't exist, unclosed ul, etc. All of the browsers are going to have to guess how your page should be displayed. Work through those errors one by one and then see how the page looks when it is fully valid.
     
    Gordaen, Aug 11, 2006 IP
  3. Kato_seriously

    Kato_seriously Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I think one of the problems is I am unsure what doctype I should use....

    That being the case though, after trying multiple doctypes, the one that appears closest is HTML Transitional, although I am uncertain as to why the validator tells me <font> is undefined.

    I have corrected the alignment of the header image, but the tabs toolbar still mystifies me.

    Any other suggestions?

    Edit:I have a validated page now, but it is still not displaying the tabs menu properly. Help?
     
    Kato_seriously, Aug 11, 2006 IP
  4. briansol

    briansol Well-Known Member

    Messages:
    221
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    110
    #4
    @Which DTD to use?

    ALWAYS try for either xhtml 1.0 strict or html 4.01 strict.

    xhtml transitional can be used if you just can't get it to validate if you are using target attributes, etc. but still try to make the code as strict as possible.

    the doc type you are using:

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Code (markup):
    allows for sloppy code.

    based on your code, you can pull off an xhtml strict doctype.
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Code (markup):
    you will need to close unclossed elements (ie, <br> becomes <br />) and change your onClick to onclick. but thats about it.

    Using the firefox web developer plugin, you can clearly see that you have width issues. your inside elements are larger than your container. see screen shot.

    IE will stretch to make it fit. firefox will push it out.

    fix your widths.
    fix your heights


    and i'd also suggest that you use a page wrapper for the whole site instead of a per-element div. something like:

    <div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
    </div>
     
    briansol, Aug 12, 2006 IP
  5. Kato_seriously

    Kato_seriously Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I will try to chandge my doctype, but I think I found a solution for my firefox problem.

    #container3 {margin: 0px auto;
    width: 787px;
    position: absolute;
    top:232px;
    background: #fff;
    padding: 0;
    text-align: left;}

    body > #container3{margin: 0px auto;
    width: 787px;
    position: relative;
    top:-2px;
    background: #fff;
    padding: 0;
    text-align: left;}

    #container4 {margin: 0px auto;
    width: 787px;
    position:relative;
    background: #ffffff;
    padding: 0;
    padding-top:2em;
    text-align: left;}

    body > #container4{width:787px;
    position:relative; top:40px;}

    #bodycont {position:absolute;
    top:31px;
    width:773px;
    background:#ffffff;
    padding-top:2em;
    padding-left:.5em;
    padding-right:.5em;}

    body > #container4 > #bodycont{position:relative;
    width:773px;
    background:#ffffff;
    top:-27px;}

    It's not a hack per se, but it fixes the problem in both Netscape and Firefox so it displays correctly across all three browsers.

    It's not sloppy to do it this way is it?
     
    Kato_seriously, Aug 12, 2006 IP
  6. Kato_seriously

    Kato_seriously Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Oh man... Do I feel stupid.

    I condensed all that garbage to just:

    body > #container3{z-index:4;
    margin: 0px auto;
    width: 787px;
    position: relative;
    top:-2px;
    background: #fff;
    padding: 0;
    text-align: left;}

    *laughs* that's what I get for doing that whilst sick. Forgot all about z-index...
     
    Kato_seriously, Aug 13, 2006 IP