Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Why in IE, but not NS?

    Hey All,

    I have stripped my CSS design to the bare minimum and can't even get the main window (framework) to center correctly. Is there something I'm doing wrong here? And even more so, is there specific things I should do when designing this to accomodate Netscape (7) as well as IE?

    Thanks.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

    <html>
    <head>
    <title>consumer credit</title>

    <style type="text/css">

    html, body {
    text-align:center;
    height:100%;
    margin:0px;
    padding:0px;
    background-image: url(images/background.gif);
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;
    color: #333333;
    }

    #framework {
    width:760px;
    height:100%;
    text-align:left;
    margin:2px;
    border: 1px solid #ccc;
    border-width: 0 1px;
    background:white;
    }

    #topHeader {
    width:100%;
    height:150px;
    text-align:center;
    margin:0px;
    padding:2px;
    }

    #nav {
    width:100%;
    height:20px;
    text-align:center;
    margin:0px;
    padding:2px;
    /*border:1px solid #ccc;*/
    }

    #sectionHeader {
    width:565px;
    height:125px;
    text-align:left;
    margin:5px;
    padding:2px;
    border:1px solid #ccc;
    float:left;
    }

    #catSection {
    width:160px;
    height:125px;
    text-align:center;
    margin:5px;
    padding:2px;
    border:1px solid #ccc;
    }

    #quoteSection {
    width:739px;
    height:75px;
    text-align:center;
    margin:10px;
    padding:0px;
    border:1px solid #ccc;
    }

    #quoteContent
    {
    text-align: center;
    margin-top: -33px;
    margin-left: -369px;
    position: relative;
    top: 50%;
    left: 25%;
    width:730px;
    height:67px;
    }

    #mainContent {
    width:565px;
    height:500px;
    text-align:left;
    margin:0px 5px 5px 5px;
    padding:2px;
    border:1px solid #ccc;
    float:left;
    }

    #mainBody {
    width:555px;
    text-align:left;
    margin:0px;
    padding:4px;
    }

    #rightContent {
    width:160px;
    height:125px;
    text-align:center;
    margin:5px;
    padding:2px;
    border:1px solid #ccc;
    }

    p {
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;
    color: #333333;
    }

    </style>

    </head>
    <body>

    <div id="framework">
    <div id="topHeader">header image</div>
    <div id="nav">nav</div>
    <div id="catSection">cat</div>
    </div>

    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, first of all, you're not using a valid DOCTYPE. You need to use a complete XHTML DOCTYPE to use IE in "standards mode". Otherwise, you're just getting "Quirks mode" which uses the jacked-up box model of IE 5.x.

    That's most likely your problem. Use a valid DOCTYPE, then design your page for Mozilla (since it's the most compliant browser out there right now), and then work backwards to the less compliant browsers (usually Mozilla, then Opera, then IE/Win).

    Doing it that way will nearly always save you headache.

  • #3
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    I'm new to the DOCTYPE statements with XML/XSL, so what tag should I be using exactly? And how does that tag affect my page in NS when I've removed the XML/XSL code?

    Designing in Mozilla does make sense. How does it differ from NS?

    Thanks.

  • #4
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    I've tried the following DOCTYPES without any luck. And this is just the above, barebone code where I want the page centered:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">


    Any ideas?

  • #5
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    To futher complicate things .. I'm now just trying to validate the file. I get a "unable to extract a character encoding labeling from any of the valid sources for such information. Without encoding information it is impossible to validate the document."




    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
    <title>consumer credit</title>

    <style type="text/css">

    html, body {
    text-align:center;
    height:100%;
    margin:0px;
    padding:0px;
    background-image: url(images/background.gif);
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;
    color: #333333;
    }

    #framework {
    width:760px;
    height:100%;
    text-align:left;
    margin:2px;
    border: 1px solid #ccc;
    border-width: 0 1px;
    background:white;
    }

    #topHeader {
    width:100%;
    height:150px;
    text-align:center;
    margin:0px;
    padding:2px;
    }

    #nav {
    width:100%;
    height:20px;
    text-align:center;
    margin:0px;
    padding:2px;
    /*border:1px solid #ccc;*/
    }

    #sectionHeader {
    width:565px;
    height:125px;
    text-align:left;
    margin:5px;
    padding:2px;
    border:1px solid #ccc;
    float:left;
    }

    #catSection {
    width:160px;
    height:125px;
    text-align:center;
    margin:5px;
    padding:2px;
    border:1px solid #ccc;
    }

    #quoteSection {
    width:739px;
    height:75px;
    text-align:center;
    margin:10px;
    padding:0px;
    border:1px solid #ccc;
    }

    #quoteContent
    {
    text-align: center;
    margin-top: -33px;
    margin-left: -369px;
    position: relative;
    top: 50%;
    left: 25%;
    width:730px;
    height:67px;
    }

    #mainContent {
    width:565px;
    height:500px;
    text-align:left;
    margin:0px 5px 5px 5px;
    padding:2px;
    border:1px solid #ccc;
    float:left;
    }

    #mainBody {
    width:555px;
    text-align:left;
    margin:0px;
    padding:4px;
    }

    #rightContent {
    width:160px;
    height:125px;
    text-align:center;
    margin:5px;
    padding:2px;
    border:1px solid #ccc;
    }

    p {
    font-family: Verdana, Arial, sans-serif;
    font-size: 10px;
    color: #333333;
    }

    </style>

    </head>
    <body>

    <div id="framework">
    <div id="topHeader">header image</div>
    <div id="nav">nav</div>
    <div id="catSection">cat</div>
    </div>

    </body>
    </html>

  • #6
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Okay .. I added:

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

    And it validates. Phew.

    But NS still can't center the content.

  • #7
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In the CSS for the "framework" div, change margin:2px; to margin:2px auto;

    That will tell the margins on the top and the bottom to be 2 pixels each. It will also tell the right and left margins to be whatever they need to be (hence "auto") to center the content.

  • #8
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    margin: x auto doesn't work in IE. You'll need to use horizontal margins and absolute positioning to get that effect.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #9
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    So will that work across the board? If it's absolute, won't it get messed up when resizing the window?

  • #10
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't think so... this page has the method if you're interested.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #11
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Thanks .. that works in NS and IE right now. It's screwed up some other DIV's I have right now, but it should be something I can make work.

    One question: What's the point of this:

    body>#content {
    margin-left:-380px; /* Correct value. */

    margin-left is already declared in #content, so why does it need to be duplicated?

  • #12
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    -150px isn't the right value.

    in IE5: width = 300px. width/2 = 150px.
    in correct browsers: width = 10px padding + 300px + 10px padding = 320px. width/2 = 160px.

    body>#content hides the correct measurements from IE5, and as it has higher specificity, it overrules the -150px and Mozilla takes the -160px measurement.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #13
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Ah .. that makes sense.

    So I'm working on realigning the rest of the page, now that I have the centering done. Just as an FYI, here is how the page looks before and after:

    BEFORE:

    www.witchkraftracing.com/xml/secondary.asp

    AFTER:

    www.witchkraftracing.com/xml/secondarytest.asp

  • #14
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by me'
    margin: x auto doesn't work in IE. You'll need to use horizontal margins and absolute positioning to get that effect.
    It seems to work just fine. I use it on my own website without any problems. I just tried it with Kraft's code, and it worked fine.

    What would the problem be?

  • #15
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, it works in IE6 in 'standards' mode, but not at all in IE5.5 or IE5.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •