SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    page layout breaks in IE 6 & 7

    I am working on a html page designed using CSS. The page does not show properly in IE 6 & 7. Attaching the files in a CC.zip folder. Please open page.html. Also contains 3 images showing how the page is rendered in IE 6 & 7, Firefox. Check out the form data section. Firefox renders correctly. If you compare the firfox with the IE6 and 7 images you will clearly know the difference.

    -Shivanand
    Attached Files Attached Files

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi there Shivanand, Welcome to SitePoint!

    To begin with you are having a haslayout issue with your forms .roundboxcontent . The simplest way for an element to gain a layout is for it to have a dimensional CSS property applied—for example, a width or height.

    Locate your pane.css and give a height to .roundboxcontent, 1% will trigger IE and keep other browsers safe.

    pane.css
    Code:
    .roundboxcontent{
    padding:7px 17px 7px 17px;
    height:1%;
    }
    Your #tabList (navbar) is having bottom-border problems in IE7, the reason for that is the lack of the universal reset at the top of your skin.css
    The reset simply zeros out all default margins and paddings and gets all browsers on the same playing field.

    It looks like this * { margin:0; padding:0} and should be placed first in all your stylesheets.

    Locate your skin.css and add the reset to the top of it and then readjust your paddings in the #tabWrapper

    skin.css
    Code:
    * {margin:0; padding:0;}
    -
    - skip
    -
    - to 
    -
    - tabs
    
    /* TABS */
    #tabWraper{
        padding-top:20px;
        border-top:3px solid #fe8502;
    }
    * html #tabWraper{
        padding-top:20px;  /*change this to 20px also or remove completely*/
    }
    You are having a width problem in IE6 also, it is out of view on the right. It is hiding your password form.

    And you are still having a left padding problem with your Form Headings in IE6.

    I'll look at them later if I get a chance, or someone else may be able to come behind me and sort them out.

    Hope that Helps

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow amazing. It worked perfectly. Thanks a lot. I need your help to solve the width problem in IE6.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Ok, I got IE6 sorted out. Basically all I had to do was give a width:auto; on the header and footer on your IE6 only * html syntaxes.

    e.g. the footer

    * html #footer{
    width: auto;
    height:43px;
    }

    I made a lot of other changes on padding and postioning, rather than list them all I will just post the revised skin.css and I will highlight all the changes in red as best as I can remember. If you want to see exactly what was changed just compare it to the original.

    You have four stylesheets, I'm not sure if they all need the universal reset at the top or not. I don't think it would hurt though!

    skin.css

    Code:
    * {margin:0; padding:0;} /*Universal Reset*/
    html {
        height:100%; 
        max-height:100%;
        padding:0;
        margin:0; 
        border:0; 
        font-size:11px; 
        font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
        color:#000000;
        /* hide overflow:hidden from IE5/Mac */ 
        /* \*/ 
        overflow: hidden; 
        /* */ 
    }
    
    body {
        height:100%;
        max-height:100%;
        overflow:hidden;
        padding:0;
        margin:0;
        border:0;
    }
    
    #header {
        position:absolute;
        margin:0;
        top:0;
        left:0;
        display:block;
        width: 99.1%; /*99.1 lines up FF & IE7*/
        height:125px;
        font-size:4em;
        z-index:5;
        overflow:hidden;
        border:5px solid #d8d8d8;
        border-bottom:0px;
    }
    
    * html #header{
        width: auto;
    }
    
    #header #topbarMiddle{
        line-height:75px;
        height:75px;
        background-color:#004a66;
        vertical-align:middle;
        color:#a0d967;
        padding-left:10px;
        font-size:20px;
        font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
    }
    
    #header #topbarLeft{
        padding-left:5px;
        height:75px !important;
        background-image:url(../images/bg/head-top-left.gif);
        background-repeat:no-repeat;
        background-position:left top;
        white-space:nowrap;
        border-bottom:1px solid #FFFFFF;
        background-color:#d8d8d8;
    }
    
    #header #topbarRight{
        padding-right:5px;
        height:75px !important;
        background-image:url(../images/bg/head-top-right.gif);
        background-repeat:no-repeat;
        background-position:right top;
        white-space:nowrap;
        background-color:#d8d8d8;
    }
    
    #leftColumn{
        position:absolute;
        left:0;
        top:130px;
        bottom:43px;
        width:200px;
        background:#ffffff;
        z-index:4;
        overflow:auto;
        border-left:5px solid #d8d8d8;
        border-right:1px dashed #d8d8d8;
    }
    
    * html #leftColumn{
        height:100%;
        top:0;
        bottom:0;
        width:200px;
        border-top:125px solid #fff;
        border-bottom:43px solid #fff;
        color:#000000;
    }
    
    #leftColumn .inner{
        padding:10px;
    }
    
    #leftColumn h1{
    COLOR:#A0D967; 
    padding: 4px 10px;
    background-color:#004A66;
    }
    
    #leftColumn p{
    background-color:#eeeeee;
    padding: 10px 10px;
    margin-top:0px;
    }
    
    .contentTopBar{
        padding-bottom:5px;
    }
    
    #contentColumn{
        overflow:auto;
        overflow-x:hidden;
        position:absolute;
        z-index:3;
        top:130px;
        left:200px;
        bottom:43px;
        right:0;
        background:#ffffff;
        border-right:5px solid #d8d8d8;
        padding-right:10px;
        padding-left:10px;
    }
    
    * html #contentColumn{
        top:-1px;
        right:0;
        bottom:0;
        left:0;
        padding-left:15px;
        height:100%;
        width:auto;
        overflow:auto;
        overflow-x:hidden;    
        position:absolute;
        z-index:3;
        border-top:125px solid #fff;
        border-bottom:43px solid #fff;
        border-left:194px solid #fff;
    }
    
    #contentColumn .inner{
        padding:10px;
    }
    
    .privacy{
    position:absolute;
    margin-top:50px;
    display:block;
    width:98%;
    }
    
    .privacyNoScrollPage{
    position:absolute;
    bottom:0px;
    display:block;
    width:98%;
    }
    
    .pageid{
    float:left;
    width:70%;
    }
    
    .footerlogo{
    float:right;
    }
    
    #footer {
        position:absolute;
        margin:0;
        bottom:0;
        left:0;
        display:block;
        width:99.1%; /*99.1 lines up FF & IE7*/
        height:38px;
        font-size:1em;
        z-index:5;
        overflow:hidden;
        color:#fff;
        border:5px solid #d8d8d8;
        border-top:0px;
    }
    
    * html #footer{
        width: auto;
        height:43px;
    }
    
    #footer #footerMiddle{
        line-height:35px;
        height:35px;
        background-color:#004a66;
        vertical-align:middle;
        color:#ffffff;
        padding-left:10px;
        font-size:12px;
        font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
    }
    
    #footer #footerLeft{
        padding-left:5px;
        height:35px !important;
        background-image:url(../images/bg/footer-bottom-left.gif);
        background-repeat:no-repeat;
        background-position:left bottom;
        white-space:nowrap;
        border-top:1px solid #FFFFFF;
        background-color:#d8d8d8;
    }
    
    #footer #footerRight{
        padding-right:5px;
        height:35px !important;
        background-image:url(../images/bg/footer-bottom-right.gif);
        background-repeat:no-repeat;
        background-position:right bottom;
        white-space:nowrap;
        background-color:#d8d8d8;
    }
    
    #footer #footerWraper{
        border-top:3px solid #fe8502;
    }
    
    /* TABS */
    #tabWraper{
        padding-top:20px;
        border-top:3px solid #fe8502;
    
    }
    
    * html #tabWraper{
        padding-top:20px; /*this can be removed*/
    }
    
    #tabList{
        padding: 3px 0;
        padding-left:200px;
        margin-left: 0;
        border-bottom: 1px solid #6e6e78;
        font: bold 12px Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
    }
    
    #tabList li{
        list-style: none;
        margin: 0;
        display: inline;
    
    }
    
    #tabList li a{
        padding: 3px 0.5em;
        margin-left: 3px;
        border: 1px solid #6e6e78;
        border-bottom: none;
        background: #eeeeee;
        text-decoration: none;
        color: #6e6e78;
    }
    
    #tabList li a:link {
        color: #6e6e78;
    }
    
    #tabList li a:hover{
        color: #a0a0a4;
    }
    
    #tabList li a#selected{
        background: #ffffff;
        border-bottom: 1px solid #ffffff;
    }
    You have a tough layout to work with, almost everything is position:absolute;

    I got it looking the same in all browsers the best I could, it's all very close though.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot. But another issue. Scroll bar doesn't show up in IE6. What could be the reason?

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I got it fixed, I post the code shortly!

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Ok, your going to have to put IE6 into quirks mode to make your layout work. We need to change the doctype to do that, paste the following code in your page.html , just like it is all the way through your closing </head> tag.

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Basic Profile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- force quirks mode with the xml prologue -->
    <link rel="stylesheet" href="styles/basicstyles.css" />
    <link rel="stylesheet" href="styles/pane.css" />
    <link rel="stylesheet" href="styles/layout.css" />
    <link rel="stylesheet" href="styles/skin.css" />
    </head>
    Now we need to fix a couple of things in your skin.css again, paste these over the matching selectors. The overflow-y:scroll; is optional, it does work without it. It may add a little security though!

    Code:
    * html #contentColumn{
        top:-1px;
        right:0;
        bottom:0;
        left:0;
        padding-left:10px; /*change this back to 10 from 15 or remove it all*/
        height:100&#37;;
        width:auto;
        overflow:auto;    
        position:relative; /*IE6 needs this*/
        z-index:3;
        border-top:125px solid #fff;
        border-bottom:43px solid #fff;
        border-left:194px solid #fff;
        overflow-y:scroll; /*for added security in IE6, it will work without it*/
    }
    
    -
    -
    now
    skip
    down
    to
    the
    footer
    -
    -
    
    * html #footer{
        width: auto;
        height:43px;
        bottom:-1px;
    }
    Here is the complete skin.css just in case
    Code:
    * {margin:0; padding:0;}
    
    html {
        height:100%; 
        max-height:100%;
        padding:0;
        margin:0; 
        border:0; 
        font-size:11px; 
        font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
        color:#000000;
        /* hide overflow:hidden from IE5/Mac */ 
        /* \*/ 
        overflow: hidden; 
        /* */ 
    }
    
    body {
        height:100%;
        max-height:100%;
        overflow:hidden;
        padding:0;
        margin:0;
        border:0;
    }
    
    #header {
        position:absolute;
        margin:0;
        top:0;
        left:0;
        display:block;
        width: 99.1%;
        height:125px;
        font-size:4em;
        z-index:5;
        overflow:hidden;
        border:5px solid #d8d8d8;
        border-bottom:0px;
    }
    
    * html #header{
        width: auto;
    }
    
    #header #topbarMiddle{
        line-height:75px;
        height:75px;
        background-color:#004a66;
        vertical-align:middle;
        color:#a0d967;
        padding-left:10px;
        font-size:20px;
        font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
    }
    
    #header #topbarLeft{
        padding-left:5px;
        height:75px !important;
        background-image:url(../images/bg/head-top-left.gif);
        background-repeat:no-repeat;
        background-position:left top;
        white-space:nowrap;
        border-bottom:1px solid #FFFFFF;
        background-color:#d8d8d8;
    }
    
    #header #topbarRight{
        padding-right:5px;
        height:75px !important;
        background-image:url(../images/bg/head-top-right.gif);
        background-repeat:no-repeat;
        background-position:right top;
        white-space:nowrap;
        background-color:#d8d8d8;
    }
    
    #leftColumn{
        position:absolute;
        left:0;
        top:130px;
        bottom:43px;
        width:200px;
        background:#ffffff;
        z-index:4;
        overflow:auto;
        border-left:5px solid #d8d8d8;
        border-right:1px dashed #d8d8d8;
    }
    
    * html #leftColumn{
        height:100%;
        top:0;
        bottom:0;
        width:200px;
        border-top:125px solid #fff;
        border-bottom:43px solid #fff;
        color:#000000;
    }
    
    #leftColumn .inner{
        padding:10px;
    }
    
    #leftColumn h1{
    COLOR:#A0D967; 
    padding: 4px 10px;
    background-color:#004A66;
    }
    
    #leftColumn p{
    background-color:#eeeeee;
    padding: 10px 10px;
    margin-top:0px;
    }
    
    .contentTopBar{
        padding-bottom:5px;
    }
    
    #contentColumn{
        overflow:auto;
        overflow-x:hidden;
        position:absolute;
        z-index:3;
        top:130px;
        left:200px;
        bottom:43px;
        right:0;
        background:#ffffff;
        border-right:5px solid #d8d8d8;
        padding-right:10px;
        padding-left:10px;
    }
    
    * html #contentColumn{
        top:-1px;
        right:0;
        bottom:0;
        left:0;
        padding-left:10px;
        height:100%;
        width:auto;
        overflow:auto;    
        position:relative; /*IE6 needs this*/
        z-index:3;
        border-top:125px solid #fff;
        border-bottom:43px solid #fff;
        border-left:194px solid #fff;
        overflow-y:scroll; /*for added insurance in IE6, it will work without it*/
    }
    
    #contentColumn .inner{
        padding:10px;
    }
    
    .privacy{
    position:absolute;
    margin-top:50px;
    display:block;
    width:98%;
    }
    
    .privacyNoScrollPage{
    position:absolute;
    bottom:0px;
    display:block;
    width:98%;
    }
    
    .pageid{
    float:left;
    width:70%;
    }
    
    .footerlogo{
    float:right;
    }
    
    #footer {
        position:absolute;
        margin:0;
        bottom:0;
        left:0;
        display:block;
        width:99.1%;
        height:38px;
        font-size:1em;
        z-index:5;
        overflow:hidden;
        color:#fff;
        border:5px solid #d8d8d8;
        border-top:0px;
    }
    
    * html #footer{
        width: auto;
        height:43px;
        bottom:-1px;
    }
    
    #footer #footerMiddle{
        line-height:35px;
        height:35px;
        background-color:#004a66;
        vertical-align:middle;
        color:#ffffff;
        padding-left:10px;
        font-size:12px;
        font-family:Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
    }
    
    #footer #footerLeft{
        padding-left:5px;
        height:35px !important;
        background-image:url(../images/bg/footer-bottom-left.gif);
        background-repeat:no-repeat;
        background-position:left bottom;
        white-space:nowrap;
        border-top:1px solid #FFFFFF;
        background-color:#d8d8d8;
    }
    
    #footer #footerRight{
        padding-right:5px;
        height:35px !important;
        background-image:url(../images/bg/footer-bottom-right.gif);
        background-repeat:no-repeat;
        background-position:right bottom;
        white-space:nowrap;
        background-color:#d8d8d8;
    }
    
    #footer #footerWraper{
        border-top:3px solid #fe8502;
    }
    
    /* TABS */
    #tabWraper{
        padding-top:20px;
        border-top:3px solid #fe8502;
    
    }
    
    * html #tabWraper{
        padding-top:20px;
    }
    
    #tabList{
        padding: 3px 0;
        padding-left:200px;
        margin-left: 0;
        border-bottom: 1px solid #6e6e78;
        font: bold 12px Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
    }
    
    #tabList li{
        list-style: none;
        margin: 0;
        display: inline;
    
    }
    
    #tabList li a{
        padding: 3px 0.5em;
        margin-left: 3px;
        border: 1px solid #6e6e78;
        border-bottom: none;
        background: #eeeeee;
        text-decoration: none;
        color: #6e6e78;
    }
    
    #tabList li a:link {
        color: #6e6e78;
    }
    
    #tabList li a:hover{
        color: #a0a0a4;
    }
    
    #tabList li a#selected{
        background: #ffffff;
        border-bottom: 1px solid #ffffff;
    }

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! Is quirks mode rendering recomended? What are the implications it will have if used. How can I avoid quirks mode rendering in IE 6?

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    What are the implications it will have if used
    You can do a google search for "quirks mode" and it will give you more info than I can here. If I understand correctly, all good browsers are ignoring the xml prologue above your doctype and only IE6 is going into quirks mode.

    This layout is very similar to yours and uses that xml prologue in the doctype. It is one Pauls demos and he really does not encourage using it any longer.

    Thanks! Is quirks mode rendering recomended?
    We sure try to avoid it anytime we can, but I honestly saw no other way to make your layout work in IE6. What I had said in one of my previous posts was that: "You have a tough layout to work with, because almost everything is position:absolute;"

    There may be others around here with more knowledge about IE6 than me, they may have another solution. You may have to start a new thread to get attention though.


    How can I avoid quirks mode rendering in IE 6?
    Another way to handle IE6 is to use expressions that have javascript in them. Your site basically just has a fixed header, footer, and left sidebar.
    I recently had this thread that dealt with a similar layout. Paul had helped me out with it and gave links to several of his fixed position demos that work without quirks mode.

    At the end of the thread Paul had said:
    I think these days with ie8 on the horizon we can at least start to concentrate on the good browsers and let ie6 have the basic stuff only.
    I totally agree, IE6 has caused problems for far to long and it is time to just give it enough to work. That should give people the incentive to upgrade their browser.

    Here is a Fixed Demo that I made from the thread above. It has a fixed header, fixed sidebars, and a fixed footer. Using position:fixed; for good browsers and position:absolute; with expressions for the header and footer in IE6. The sidebars scroll in IE6 though. It gets just enough to work. If you view the source you will see the expressions for IE6.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will go through the links you have sent. Thanks Ray for all your help.


Bookmarks

Posting Permissions

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