SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Location
    Charleston, SC
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Over my head - IE 6 layout problems

    Good day,

    Problem: position of center element (substantive text) encroaches on top nav bar in IE 6.0. Firefox 2 and IE 7 seem to be working fine. Working on the template, which can be found here.

    Background: Over my head on CSS, this is my first all CSS site (but have designed dozens of html table-based layouts). Making the switch has been a bit painful, but I do like CSS concept. Anyway, I really wanted to position body content above nav within page code, have just been able to do that, but now IE 6 blows up.

    Any sage advice appreciated, there's too much going on here for me to comprehend right now as I have managed to complicate things.

    Oh, here is CSS:

    /*
    ------------------------------------------------
    PVII CSS Layout Magic
    Copyright (c) 2007 Project Seven Development
    www.projectseven.com
    08: 3Col_Fixed_Width
    ------------------------------------------------
    */

    body {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    margin: 0px;
    padding: 0;
    z-index: 6;
    font-variant:normal;
    }
    #masthead {
    color: #FFFFFF;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    height: 62px;
    z-index: 2;
    }
    #mastheadbg {
    padding: 0 0 0 120px;
    margin: 0 0 0 0;
    height: 75px;
    background-image: url(../images/temp3/bg-masthead.jpg);
    background-repeat: repeat-x;
    background-position: left top;
    z-index: -2;
    }
    #wrapper {
    width: 940px;
    margin-top: 62px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    float: left;
    left: 0px;
    background-image: url(img/temp3/fullgreen.jpg);
    background-repeat: repeat-y;
    background-position: 200px top;
    position:absolute;
    z-index: 1;
    }
    #column_wrapper {
    }
    #column_top {
    background-image: url(img/temp3/clmtopbg.jpg);
    background-repeat: no-repeat;
    height: 14px;
    margin-left: 20px;
    }
    #column_bottom {
    background-image: url(img/temp3/clm08_bottom.jpg);
    background-repeat: no-repeat;
    height: 12px;

    }
    .clearfloat {
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    }
    #center {
    width: 540px;
    float: left;
    font-family:Arial, Helvetica, sans-serif;
    }
    #left {
    width: 200px;
    float: left;
    padding:0px;
    margin-top:0px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    border-bottom-width:0px;
    letter-spacing: .2em;
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    border-right-color: #3F9A3C;
    border-bottom-color: #3F9A3C;
    border-left-color: #3F9A3C;
    position:relative;
    }
    #right {
    width: 180px;
    float: left;
    padding:0px 8px 0px 12px;
    }
    #center .content {
    padding: 24px 32px;
    font-size: 0.75em;
    line-height: 1.65em;
    margin-left: 40px;
    font-style:normal;
    }
    #center .content a:link {
    color: #B9520F;
    letter-spacing:0em;
    font-size: 1em;
    line-height: 1.65em;
    letter-spacing:inherit;
    font-style:normal;
    text-decoration:none;
    }
    #center .content a:visited {
    color: #B9520F;
    font-size: 1em;
    letter-spacing:0em;
    line-height: 1.65em;
    letter-spacing:inherit;
    font-style:normal;
    text-decoration:none;
    }
    #center .content a:hover {
    line-height: 1.65em;
    font-size: 1em;
    letter-spacing:0em;
    color: #1C4F14;
    text-decoration:none;
    font-style:normal;
    }


    #left .content {
    padding: 24px 8px 0px 10px;
    font-size: 0.75em;
    line-height: 1.5em;
    }
    #right .content {
    padding: 16px 18px 0px 18px;
    font-size: 0.75em;
    line-height: 1.5em;
    }
    #masthead .content {
    padding: 0px;
    }
    #footer .content {
    padding: 12px 0px;
    text-align: center;
    }
    #footer {
    color: #666666;
    padding: 0px;
    margin: 0 0 0 10px;
    font-size: 0.7em;
    clear: both;
    border-top: dashed #B2B2B2 1px;
    }
    .menulist {
    margin: 0px 3px 0px 3px;
    padding: 0px;
    list-style-type: none;
    background-color: ffffff;
    }
    #left a:link {
    color: #B9520F;
    text-decoration:none;
    }
    #left a:visited {
    color: #B9520F;
    text-decoration:none;
    }
    #left a:hover {
    color: #1C4F14;
    text-decoration:none;
    }


    #right a:link {
    color: #000000;
    text-decoration:none;
    }
    #right a:visited {
    color: #333333;
    }
    #right a:hover {
    color: #FFFFFF;
    }
    #wrapper .menulist a, #wrapper .menulist a:visited {
    display:block;
    color: #98753D;
    border-left:1px dotted #B9520F; border-right:1px dotted #B9520F; border-top:0px dotted #B9520F; border-bottom:1px dotted #B9520F;
    list-style-type:none;
    width:120px;
    text-align:left;
    padding:2px;
    background:#FFFFFF;
    }
    #wrapper .menulist a:hover {
    border-color: #000000;
    border-right-style: dotted;
    border-right-color: #B9520F;
    border-right-width: 1px;
    background:#F5E6C9;
    }

    #footer a:link {color: #999999;}
    #footer a:visited {color: #666666;}
    #footer a:hover {color: #418B7A;}
    .p7uberlink {
    font-weight: bold !important;
    letter-spacing: .15em;
    border-color: #000000 !important;
    }
    h1 {
    font-size: 1.8em;
    color: #9A7E3F;
    margin: 0 0 10px 0;
    }
    h2 {
    font-size: 1.6em;
    margin: 30px 0 0 0;
    }
    h3 {
    font-size: 1.25em;
    margin: 30px 0 0 0;
    }
    h4 {
    width:130px;
    padding:0px;
    margin-bottom:0px;
    margin-top:10px;
    border-top-width:1px;
    border-left-width:1px;
    border-bottom-width:1px;
    border-right-width:1px;
    border-style:solid;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    color:#FFFFFF;
    background-color:#B9520F;
    border-color:#98753D;
    letter-spacing: .2em;
    }
    .nomargintop {margin-top: 0;}
    .content p {
    margin: 1px 0;
    font-style:normal;
    text-decoration:none;
    }


    /*
    below through next comment added by SE
    */
    #searchlight {
    width: 940px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    float: left;
    left: 0px;
    background-image: url(img/temp3/fullsearchlight.jpg);
    background-repeat: no-repeat;
    background-position: 200px bottom;
    position:relative;
    /* z-index: 0; */
    }
    #logocontainer
    {
    width: 200px;
    float: left;
    */ z-index: 5; */
    }
    #center .item {
    border-bottom: 1px dashed #B2B2B2;
    font-variant: small-caps;
    }


    /*
    rounded corner box by SE
    search-this.com/2007/02/12/css-liquid-round-corners
    */


    #liquid-round {
    width:90%;
    margin:0px auto;
    background:#fff url(img/temp3/leftside.gif) repeat-y left top;
    }
    .top {
    width:100%;
    height:17px;
    background:url(img/temp3/top.gif) no-repeat left top;
    }
    .top span {
    display:block;
    position:relative;
    height:17px;
    background:url(img/temp3/top-right.gif) no-repeat right top;
    }
    .center-content {
    position:relative;
    background:url(img/temp3/rightside.gif) repeat-y right top;
    padding:2px 12px 1px 8px;
    margin: -2px 0 -40px 0;
    }
    .bottom {
    width:100%;
    height:62px;
    background:url(img/temp3/bottom.gif) no-repeat left bottom;
    }
    .bottom span {
    display:block;
    position:relative;
    height:62px;
    background:url(img/temp3/bottom-right.gif) no-repeat right bottom;
    }

    /*
    PNG clear dropshadow method below positioniseverything.net/articles/sidepages/dropshadow/dropshadow.html
    */


    /*XXXXXXXXXXXXXXXXXX Dropshadow elements XXXXXXXXXXXXXXX*/

    body .outerpair1 {
    background: url(img/temp3/upperrightfade.png) right top no-repeat;
    }
    /* .outerpair1 must be given a width contraint, via either a width,
    or by floating or absolute positioning. In this demo these are
    applied from the second class name on the .outerpair1 DIV's.
    This box also has one of the corner .png's. */


    body .outerpair2 {
    background: url(img/temp3/lowerleftfade.png) left bottom no-repeat;
    padding-top: 8px;
    padding-left: 8px;
    }
    /* .outerpair2 has padding equal to the shadow
    thickness, and also has one of the corner .png's */


    body .shadowbox {
    background: url(img/temp3/shadow.png) bottom right;
    }
    /* .shadowbox holds the main shadow .png */


    body .innerbox {
    position: relative;
    left: -8px;
    top: -8px;
    }
    /* .innerbox is made "relative" and is "pulled" up and to
    the left, by a distance equal to the thickness of the shadow.
    Because this is a relative-based shift, the box retains its
    exact dimensions without change. */


    .shadowbox img {
    border: 10px solid #fff;
    vertical-align: bottom;
    }
    /* Shadowed images should not be made "block" for eliminating the baseline
    space under the images, because this may trigger IE background bugs.
    Instead, use "vertical-align: bottom;" for this purpose. */


    /*XXXXXXXXXXXXXXXXXX Custom width constraints and extra styling XXXXXXXXXXXXXXX*/

    .floatimage {
    float: left; /* Floating causes this box to shrinkwrap around sized content elements. */
    margin: 10px 0 10px 4px;
    display: inline; /* IE doubled margin bug is defeated via this fixer rule. */
    }

    .flashbox { /* Absolute positioning also causes the shrinkwrap behavior. */
    position: absolute;
    left: 377px;
    top: 30px;
    }

    .flashbox .innerbox {
    background: #eed;
    border: 1px solid #ccb;
    }

    .absoluteimage { /* Again, absolute positioning causes shrinkwrapping. */
    position: absolute;
    left: 40px;
    top: 200px;
    }

    .textbox {
    position: absolute; /* AP once more... */
    left: 20px;
    top: 1.8em;
    }

    .textbox .innerbox {
    border: 1px solid #ccc;
    background: #e8e8e8;
    width: 330px;
    height: 210px;
    overflow: auto;
    }
    /* Unlike the other items, the .textbox content is just text without a natural
    width, and so shrinkwrapping fails, unless .innerbox is given a specific width.
    All shadowed text elements will need a width of some kind to avoid a full-width
    shadowed box, unless that is the desired effect. The width may be appied to
    div.inner, div.outerpair1, or an external wrapper element. */

    .linkbox {
    position: absolute; /* AP once more... */
    left: 10px;
    top: 6px;
    }

    .linkbox .innerbox {
    display: block;
    background: #fff;
    border: 1px solid #ccc;
    padding: 3px 5px;
    }


    /*
    END PNG clear dropshadow method
    */

    /*
    above from center.item down added by SE
    */

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Welcome to the forums.

    The main problem seems that you have duplicated some conditional comments in the middle of that list for some reason.


    With a few tweaks this seems to be working.
    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>PVII Document</title>
    <script type="text/javascript" src="http://www.searchlightinteractive.com/test/p7csslm/p7uberlink.js"></script>
    <link href="p7csslm/templateworking.css" rel="stylesheet" type="text/css" />
    <style>
    /* 
      ------------------------------------------------
      PVII CSS Layout Magic
      Copyright (c) 2007 Project Seven Development
      www.projectseven.com
      08: 3Col_Fixed_Width
      ------------------------------------------------
    */
    
    body {
        font-family: Arial, Helvetica, sans-serif;
        color: #000000;
        margin: 0px;
        padding: 0;
         z-index: 6;
        font-variant:normal;
    }
    #masthead {
        color: #FFFFFF;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        height: 75px;
         z-index: 2; 
    }
    #mastheadbg {
        padding: 0 0 0 120px;
        margin: 0 0 0 0;
        height: 75px;
        background-image: url(http://www.searchlightinteractive.com/test/images/temp3/bg-masthead.jpg);
        background-repeat: repeat-x;
        background-position: left top;
        z-index:2; 
    }
    #wrapper {
        width: 940px;
        margin-top: 62px;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
        float: left;
        background-image:url(http://www.searchlightinteractive.com/test/p7csslm/img/temp3/fullgreen.jpg);
        background-repeat: repeat-y;
        background-position: 200px top;
        position:absolute;
        z-index: 1; 
    }
    #column_wrapper {
        }
    #column_top {
        background-image:url(http://www.searchlightinteractive.com/test/p7csslm/img/temp3/clmtopbg.jpg);
        background-repeat: no-repeat;
        height: 14px;
        margin-left: 20px;
    }
    #column_bottom {
        background-image:url(http://www.searchlightinteractive.com/test/p7csslm/img/temp3/clm08_bottom.jpg);
        background-repeat: no-repeat;
        height: 12px;
    
    }
    .clearfloat {
        clear: both;
        height: 1px;
        overflow:hidden;
        line-height: 0;
        font-size: 0;
    }
    #center {
        width: 540px;
        float: left;
        font-family:Arial, Helvetica, sans-serif;
    }
    #left {
        width: 200px;
        float: left;
        padding:0px;
        margin-top:0px;
        text-align:center;
        font-family:Arial, Helvetica, sans-serif;
        font-size:1em;
        border-bottom-width:0px;
        letter-spacing: .2em;
        border-top-width: 0px;
        border-right-width: 0px;
        border-left-width: 0px;
        border-right-color: #3F9A3C;
        border-bottom-color: #3F9A3C;
        border-left-color: #3F9A3C;
        position:relative;
        }
    #right {
        width: 180px;
        float: left;
        padding:0px 8px 0px 12px;
    }
    #center .content {
        padding: 24px 32px;
        font-size: 0.75em;
        line-height: 1.65em;
        margin-left: 40px;
        font-style:normal;
        }
    #center .content a:link {
        color: #B9520F;
        letter-spacing:0em;
        font-size: 1em;
        line-height: 1.65em;
        letter-spacing:inherit;
        font-style:normal;    
        text-decoration:none;    
    }
    #center .content a:visited {
        color: #B9520F;
        font-size: 1em;
        letter-spacing:0em;
        line-height: 1.65em;
        letter-spacing:inherit;
        font-style:normal;
        text-decoration:none;
    }
    #center .content a:hover {
        line-height: 1.65em;
        font-size: 1em;
        letter-spacing:0em;
        color: #1C4F14;
        text-decoration:none;
        font-style:normal;
    }
    
    
     #left .content {
        padding: 24px 8px 0px 10px;
        font-size: 0.75em;
        line-height: 1.5em;
    }
    #right .content {
        padding: 16px 18px 0px 18px;
        font-size: 0.75em;
        line-height: 1.5em;
    }
    #masthead .content {
        padding: 0px;
    }
    #footer .content {
        padding: 12px 0px;
        text-align: center;
    }
    #footer {
        color: #666666;
        padding: 0px;
        margin: 0 0 0 10px;
        font-size: 0.7em;
        clear: both;
        border-top: dashed #B2B2B2 1px;
    }
    .menulist {
        margin: 0px 3px 0px 3px;
        padding: 0px;
        list-style-type: none;
        background-color: ffffff;
        }
    #left a:link {
        color: #B9520F;
        text-decoration:none;
    }
    #left a:visited {
        color: #B9520F;
        text-decoration:none;
    }
    #left a:hover {
        color: #1C4F14;
        text-decoration:none;
    }
    
    
    #right a:link {
        color: #000000;
        text-decoration:none;
    }
    #right a:visited {
        color: #333333;
    }
    #right a:hover {
        color: #FFFFFF;
    }
    #wrapper .menulist a, #wrapper .menulist a:visited {
        display:block;
        color: #98753D;
        border-left:1px dotted #B9520F; border-right:1px dotted #B9520F; border-top:0px dotted #B9520F; border-bottom:1px dotted #B9520F; 
        list-style-type:none;
        width:120px;
        text-align:left;
        padding:2px;
        background:#FFFFFF;
    }
    #wrapper .menulist a:hover {
        border-color: #000000;
        border-right-style: dotted;
        border-right-color: #B9520F;
        border-right-width: 1px;
        background:#F5E6C9;
    }
    
    #footer a:link {color: #999999;}
    #footer a:visited {color: #666666;}
    #footer a:hover {color: #418B7A;}
    .p7uberlink {
        font-weight: bold !important;
        letter-spacing: .15em;
        border-color: #000000 !important;
    }
    h1 {
        font-size: 1.8em;
        color: #9A7E3F;
        margin: 0 0 10px 0;
    }
    h2 {
        font-size: 1.6em;
        margin: 30px 0 0 0;
    }
    h3 {
        font-size: 1.25em;
        margin: 30px 0 0 0;
    }
    h4 {
        width:130px;
        padding:0px;
        margin-bottom:0px;
        margin-top:10px;
        border-top-width:1px;
        border-left-width:1px;
        border-bottom-width:1px;
        border-right-width:1px;
        border-style:solid;
        text-align:center;
        font-family:Arial, Helvetica, sans-serif;
        font-size:1em;
        color:#FFFFFF;
        background-color:#B9520F;
        border-color:#98753D;
        letter-spacing: .2em;    
    }
    .nomargintop {margin-top: 0;}
    .content p {
        margin: 1px 0;
            font-style:normal;
            text-decoration:none;
    }
    
        
    /* 
      below through next comment added by SE
    */
    #searchlight {
        width: 940px;
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
        float: left;
        left: 0px;
        background-image:url(http://www.searchlightinteractive.com/test/p7csslm/img/temp3/fullsearchlight.jpg);
        background-repeat: no-repeat;
        background-position: 200px bottom;
        position:relative;
    /*    z-index: 0; */
    }
    #logocontainer
    {
    width: 200px;
    float: left;
    */ z-index: 5; */
    }
    #center .item {
        border-bottom: 1px dashed #B2B2B2;
        font-variant: small-caps;
    }
    
    
    /* 
      rounded corner box by SE
    search-this.com/2007/02/12/css-liquid-round-corners
    */
    
    
    #liquid-round {
    width:90&#37;;
    margin:0px auto;
    background:#fff url(http://www.searchlightinteractive.com/test/p7csslm/img/temp3/leftside.gif) repeat-y left top;
    }
    .top {
    width:100%;
    height:17px;
    background:url(http://www.searchlightinteractive.com/test/p7csslm/img/temp3/top.gif) no-repeat left top;
    }
    .top span {
    display:block;
    position:relative;
    height:17px;
    background:url(http://www.searchlightinteractive.com/test/p7csslm/img/temp3/top-right.gif) no-repeat right top;
    }
    .center-content {
    position:relative;
    background:url(http://www.searchlightinteractive.com/test/p7csslm/img/temp3/rightside.gif) repeat-y right top;
    padding:2px 12px 1px 8px;
    margin: -2px 0 -40px 0;
    }
    .bottom {
    width:100%;
    height:62px;
    background:url(http://www.searchlightinteractive.com/test/p7csslm/img/temp3/bottom.gif) no-repeat left bottom;
    }
    .bottom span {
    display:block;
    position:relative;
    height:62px;
    background:url(http://www.searchlightinteractive.com/test/p7csslm/img/temp3/bottom-right.gif) no-repeat right bottom;
    }
    
    /* 
      PNG clear dropshadow method below positioniseverything.net/articles/sidepages/dropshadow/dropshadow.html 
    */
    
    
    /*XXXXXXXXXXXXXXXXXX Dropshadow elements XXXXXXXXXXXXXXX*/ 
    
    body .outerpair1 {
    background:url(http://www.searchlightinteractive.com/test/p7csslm/img/temp3/upperrightfade.png) right top no-repeat;
    } 
    /* .outerpair1 must be given a width contraint, via either a width, 
    or by floating or absolute positioning. In this demo these are 
    applied from the second class name on the .outerpair1 DIV's.
    This box also has one of the corner .png's. */
    
    
    body .outerpair2 {
    background:url(http://www.searchlightinteractive.com/test/p7csslm/img/temp3/lowerleftfade.png) left bottom no-repeat;
    padding-top: 8px;
    padding-left: 8px;
    }
    /* .outerpair2 has padding equal to the shadow 
    thickness, and also has one of the corner .png's */ 
    
    
    body .shadowbox {
    background:url(http://www.searchlightinteractive.com/test/p7csslm/img/temp3/shadow.png) bottom right;
    }
    /* .shadowbox holds the main shadow .png */ 
    
    
    body .innerbox {
    position: relative;
    left: -8px;
    top: -8px;
    }
    /* .innerbox is made "relative" and is "pulled" up and to 
    the left, by a distance equal to the thickness of the shadow.
    Because this is a relative-based shift, the box retains its
    exact dimensions without change. */
    
    
    .shadowbox img {
    border: 10px solid #fff;
    vertical-align: bottom;
    }
    /* Shadowed images should not be made "block" for eliminating the baseline 
    space under the images, because this may trigger IE background bugs. 
    Instead, use "vertical-align: bottom;" for this purpose. */
    
    
    /*XXXXXXXXXXXXXXXXXX Custom width constraints and extra styling XXXXXXXXXXXXXXX*/ 
    
    .floatimage {
    float: left; /* Floating causes this box to shrinkwrap around sized content elements. */
    margin: 10px 0 10px 4px;
    display: inline; /* IE doubled margin bug is defeated via this fixer rule. */
    }
    
    .flashbox { /* Absolute positioning also causes the shrinkwrap behavior. */
    position: absolute;
    left: 377px;
    top: 30px;
    }
    
    .flashbox .innerbox {
    background: #eed;
    border: 1px solid #ccb;
    }
    
    .absoluteimage { /* Again, absolute positioning causes shrinkwrapping. */ 
    position: absolute;
    left: 40px;
    top: 200px;
    }
    
    .textbox {
    position: absolute; /* AP once more... */
    left: 20px;
    top: 1.8em;
    }
    
    .textbox .innerbox { 
    border: 1px solid #ccc;
    background: #e8e8e8; 
    width: 330px;
    height: 210px;
    overflow: auto;
    }
    /* Unlike the other items, the .textbox content is just text without a natural
    width, and so shrinkwrapping fails, unless .innerbox is given a specific width.
    All shadowed text elements will need a width of some kind to avoid a full-width
    shadowed box, unless that is the desired effect. The width may be appied to 
    div.inner, div.outerpair1, or an external wrapper element. */ 
    
    .linkbox {
    position: absolute; /* AP once more... */
    left: 10px;
    top: 6px;
    }
    
    .linkbox .innerbox { 
    display: block; 
    background: #fff;
    border: 1px solid #ccc;
    padding: 3px 5px;
    }
    
    
    /* 
      END PNG clear dropshadow method 
    */
    
    /* 
      above from center.item down added by SE
    */
    
    
    
    </style>
    <script type="text/javascript" src="http://www.searchlightinteractive.com/test/p7pm/p7popmenu.js"></script>
    <style type="text/css" media="screen">
    <!--
    @import url("http://www.searchlightinteractive.com/test/p7pm/p7pmh1.css");
    -->
    </style>
     <!--[if IE 5]>
    <style>body {text-align: center;}#wrapper {text-align: left;}.menulist a {float: left; clear: both;}
    #column_wrapper {height: 1%;}</style>
    <![endif]-->
    <!--[if IE 6]>
    <style>
    #p7PMnav a {height: auto !important;}
    #p7PMnav ul a {height: 1px !important;}
    div {zoom: 1;}
    </style>
    <![endif]-->
    <!--[if lte IE 7]>
    <style>#wrapper, #footer, #masthead, #column_wrapper, #column_bottom {zoom: 1;}
    #column_bottom {font-size: 0;}</style>
    <![endif]-->
    <!--[if lte IE 6]><style>#p7PMnav ul li{float:left;clear:both;width:100%}</style><![endif]-->
    </head>
    <body id="p7bod" onload="P7_initPM(1,1,0,-20,10);P7_Uberlink('p7uberlink','p7bod')">
    <div id="wrapper">
        <div id="searchlight">
            <div id="column_top">&nbsp;</div>
            <div id="left">
                <div class="content">
                    <h3 class="nomargintop"><img src="http://www.searchlightinteractive.com/test/p7csslm/img/temp3/LOGO14-c.gif" alt="Searchlight Interactive logo" width="180" height="79" /></h3>
                    <p class="nomargintop">&nbsp;</p>
                    <p class="nomargintop">&nbsp;</p>
                    <p class="nomargintop">&nbsp;</p>
                    <div id="liquid-round">
                        <div class="top"><span></span></div>
                        <div class="center-content">
                            <!-- CONTENT BEGIN -->
                            <p>this is some text Look D, here are some <a href="templateworking.html">rounded</a> corners just for you : ) </p>
                            <p> this is some is some text</p>
                            <!-- CONTENT END -->
                        </div>
                        <div class="bottom"><span></span></div>
                    </div>
                    <p class="nomargintop">&nbsp;</p>
                </div>
            </div>
            <div id="center">
                <div class="content">
                    <div class="item">
                        <h1>Main Content </h1>
                    </div>
                    <p>A thorough evaluation of your current world view will reaffirm your web existence beyond a doubt. Upscaling your network will result in a fairly excellent systemic data interchange synchronization, thereby exploiting technical environments for mission critical broad-based systems, electronically speaking. woent concept, a few incontinent issues will require addressing to hydrate your network's hardware components. By integrating non-aligned structures into latent legacy systems, an<a href="templateworking.html"> effervescent gateway</a> will spawn, whose segments are entirely backward compatible, tangible, and of immeasurable strategic value vis a vis the theory of right-sizing conceptual framewoent concept, a few incontinent issues will require addressing to hydrate your network's hardware components. By integrating non-aligned structures into latent legacy systems, an effervescent gateway will spawn, whose segments are entirely backward compatible, tangible, and of iwoent concept, a few incontinent issues will require addressing to hydrate your network's hardware components. By integrating non-aligned structures into latent legacy systems, an effervescent gateway will spawn, whose segments are entirely backward compatible, tangible, and of immeasurable strategic value vis a vis the theory of right-sizing conceptual framewoent concept, a few incontinent issues will require addressing to hydrate your network's hardware components. By integrating non-aligned structures into latent legacy systems, an effervescent gateway will spawn, whose segments are entirely backward compatible, tangible, and of immeasurable strategic value vis a vis the theory of right-sizing conceptual frameworks - but only when thinking underneath the box. That being said, the ownership issues inherent in dominant thematic mmeasurable strategic value vis a vis the theory of right-sizing conceptual frameworks - but only when thinking underneath the box. That being said, the ownership issues inherent in dominant thematic This will cause a fundamental morphing into a well designed and largely actionable data infrastructure whose semantic content is downright fluffy. To more fully clarify the current concept, a few incontinent issues will require addressing to hydrate your network's hardware components. </p>
                    <p>&nbsp;</p>
                    <div class="outerpair1 floatimage">
                        <div class="outerpair2">
                            <div class="shadowbox">
                                <div class="innerbox"> <img src="http://www.searchlightinteractive.com/test/images/SI-logo1.jpg" alt="" width="287" height="71" /></div>
                            </div>
                        </div>
                    </div>
                    <p>By integrating non-aligned structures into latent legacy systems, an effervescent gateway will spawn, whose segments are entirely backward compatible, tangiblrdless of what Abraham Lincoln might have theorized to the contrary. We'll leave the rest to your imagination.</p>
                    <h2>Heading 2</h2>
                    <p>A thorough evaluation of your current world view will reaffirm your web existence beyond a doubt. Upscaling your network will result in a fairly excellent systemic data interchange synchronization, thereby exploiting technical environments for micurrent concept, a few incontinent issues will require addressing to hydrate your network's hardware components. By integrating non-aligned structures into latent legacy systems, an effervescent gateway will That being said, the ownership issues inherent in dominant tose semantic content is downright fluffy. To more fully clarify the current concept, a few incontinent issues will reqinherent in dominant thematic implementations of all issues described above cannot be understated or even executed, irregardless of what Abraham Lincoln might have theorized to the contrary. Wasdf</p>
                </div>
            </div>
            <div id="right">
                <div class="content">
                    <h3 class="nomargintop">Right Column </h3>
                    <h4>Section 1:</h4>
                    <ul class="menulist">
                        <li><a href="#">Sample Link 1</a></li>
                        <li><a href="#">Search Engine Marketing </a></li>
                        <li><a href="#">Sample Link 4</a></li>
                    </ul>
                    <h4>Section 2:</h4>
                    <ul class="menulist">
                        <li><a href="#">Sample Link 5</a></li>
                        <li><a href="#">Sample Link 6</a></li>
                        <li><a href="#">Sample Link 7 </a></li>
                        <li><a href="#">Sample Link 8</a></li>
                    </ul>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                </div>
            </div>
            <br class="clearfloat" />
            <div id="column_bottom">&nbsp;</div>
        </div>
    </div>
    <div id="masthead">
         <div id="mastheadbg">
            <div class="content">
                <p>&nbsp;</p>
                <ul id="p7PMnav">
                    <li><a href="#">home</a></li>
                    <li><a href="#" class="p7PMtrg">services</a>
                        <ul>
                            <li><a href="#">Link 2.1</a></li>
                            <li><a href="#" class="p7PMtrg">Link 2.2</a>
                                <ul>
                                    <li><a href="#">Link 2.2.1</a></li>
                                    <li><a href="#">Link 2.2.2</a></li>
                                    <li><a href="#">Link 2.2.3</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Link 2.3</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="p7PMtrg">case studies</a>
                        <ul>
                            <li><a href="#">Link 3.1</a></li>
                            <li><a href="#">Link 3.2</a></li>
                            <li><a href="#">Link 3.3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">about</a></li>
                    <li><a href="#">blog</a></li>
                    <li><a href="#">news</a></li>
                    <li><a href="#">resources</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="footer">
        <div class="content">Copyright 2007. (You know the drill...ask for permission...play nice, etc.)</div>
    </div>
    </body>
    </html>
    You will need to change the addresses back to relative urls because I used absolute so That I could see what was happening.

    You also had your mastbg element with a height greater than masthead!! The inner can't be bigger than the outer. Don't use negative z-indexes because they will rarely be what you want.

    The code could do with a lot of tidying up but hope that helps

  3. #3
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The coolest thing about CSS is the ability to change your mind easily throughout the development process. And because the stylesheet controls every page, you don't have to make a million changes. If you're using good code separation, it also means that if you don't like something about the appearance of the page you know EXACTLY where to fix it. It's in the stylesheet. It's a bit harder than table based layouts as you're finding, but that's exactly what all of us are here for. Bug us when you hit tough spots.
    You're already doing great, and this makes coding your webpages SO much easier and clearer. When you can use simple semantic markup, you don't even have to think about your site. Marking up the XHTML becomes almost an abstract exercise that you can do in your sleep. "This is a paragraph, and that's a list. This is a different kind of paragraph, I'll throw a class on that. I need to ID those two bits over there..." etc. I've really gotten spoiled now that I've pounded out some CSS websites. It's especially valuable when you have larger sites. CSS grows as you add new features, and differently styled sections. That doesn't change the amount of CSS much between a large site and a small site. But you are writing a LOT more webpages and have more content in a large site, and easier XHTML coding is invaluable for speeding up production and content growth.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  4. #4
    SitePoint Member
    Join Date
    Nov 2007
    Location
    Charleston, SC
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Good deal, one other issue crept in though

    Paul, thanks so much, you not only fixed that major IE 6 problem, but another I was having with a font representation.

    I went over what you did line by line, don't understand all of it, but it was a good learning experience. Now, a new (and I assume minor issue) has cropped up, my footer is appearing at the top of the page and behind the center div. I believe I have not changed anything to affect it, but I assumed it was a float or z-index problem and have been playing around with those two attributes, but to no avail. page is here http://www.searchlightinteractive.co...eworking2.html. You should be able to see the dotted line from the footer to the left and right of the center div at the top.

    Sean

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You seem to be floating your wrapper but then you have also added position:absolute which over-rules it. You seem to be over complicating things with this especially with the source order change that is acusing conflicts in IE.

    It looks like something like this will fix it.

    Code:
    #masthead {
        color: #FFFFFF;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        height: 75px;
        z-index: 0; 
            position:absolute;
            left:0;
            top:0;
            width:100&#37;;
         clear:both;
    }
    #mastheadbg {
        padding: 0 0 0 120px;
        margin: 0 0 0 0;
        height: 75px;
        background-image: url(http://www.searchlightinteractive.com/test/images/temp3/bg-masthead.jpg);
        background-repeat: repeat-x;
        background-position: 0 -1px;
    }
    #wrapper {
        width: 940px;
        margin-top: 62px;
        margin-bottom: 0;
        float: left;
        background-image:url(http://www.searchlightinteractive.com/test/p7csslm/img/temp3/fullgreen.jpg);
        background-repeat: repeat-y;
        background-position: 200px top;
        position:relative;
        z-index: 1; 
    }
    Code:
    <!--[if lte IE 7]>
    <style>#wrapper, #footer, #masthead, #column_wrapper, #column_bottom {zoom: 1;}
    #wrapper{float:none;}
    #column_bottom {font-size: 0;}</style>
    <![endif]-->
    It's not a good idea to force "layout" on every div (div {zoom:1.0})as it has implications on rendering speed and may also trigger other bugs. You should only apply "layout" when needed.

  6. #6
    SitePoint Member
    Join Date
    Nov 2007
    Location
    Charleston, SC
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, new rendition implicating your changes is at http://www.searchlightinteractive.co...eworking3.html as you can see, menu is now behind #wrapper. It seems to be an easy thing to get it back in front of #wrapper using z-index, but now z-index order of #masthead and #mastheadbg seem to be indistinguishable. In other words, layers need to be from bottom to top, 1) mastheadbg, 2) #wrapper 3) masthead.


    Also, can you further explain your comment:
    It's not a good idea to force "layout" on every div (div {zoom:1.0})as it has implications on rendering speed and may also trigger other bugs. You should only apply "layout" when needed.

    It sounds like there is an alternative. And stepping back from this, now that you are familiar with the layout, should I approach it differently somehow?

    Thanks again.

    Sean

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I didn't notice the drop down as I didn't activate the scripts when I copied the page locally. IE won't layer those elements in that order anyway so we have to change it around again.

    Code:
    #masthead {
        color: #FFFFFF;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        height: 75px;
        position:absolute;
        left:0;
        top:0;
        width:100&#37;;
        clear:both;
        background: url(http://www.searchlightinteractive.com/test/images/temp3/bg-masthead.jpg) repeat-x 0 -1px;
          z-index:1;
    }
    #mastheadbg {
        padding: 0;
        margin: 0 ;
        height: 75px;
        position:absolute;
        left:120px;
        top:0;
        clear:both;
        z-index:3;
    }
    #wrapper {
        width: 940px;
        margin-top: 62px;
        margin-bottom: 0;
        float: left;
        background-image:url(http://www.searchlightinteractive.com/test/p7csslm/img/temp3/fullgreen.jpg);
        background-repeat: repeat-y;
        background-position: 200px top;
        position:relative;
        z-index: 2; 
    }
    We move the background image into the main masthead and allow it to sit by itself on its own z-index.

    Then the mastheadbg becomes its own stacking context and allows us to have 3 layers of z-indexes rather than 2 as before. We just position the mastheadbg div on top of #masthead.

    The html is changed as follows.
    Code:
    </div>
    <div id="masthead"></div>
    <div id="mastheadbg">
        <div class="content">
            <p>&nbsp;</p>
            <ul id="p7PMnav">
                <li><a href="#">home</a></li>
                <li><a href="#" class="p7PMtrg">services</a>
                    <ul>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#" class="p7PMtrg">Link 2.2</a>
                            <ul>
                                <li><a href="#">Link 2.2.1</a></li>
                                <li><a href="#">Link 2.2.2</a></li>
                                <li><a href="#">Link 2.2.3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Link 2.3</a></li>
                    </ul>
                </li>
                <li><a href="#" class="p7PMtrg">case studies</a>
                    <ul>
                        <li><a href="#">Link 3.1</a></li>
                        <li><a href="#">Link 3.2</a></li>
                        <li><a href="#">Link 3.3</a></li>
                    </ul>
                </li>
                <li><a href="#">about</a></li>
                <li><a href="#">blog</a></li>
                <li><a href="#">news</a></li>
                <li><a href="#">resources</a></li>
            </ul>
        </div>
    </div>
    <div id="footer">
    Note that there is nothing inside #mastheadbg bow ands it is just an empty div that carries the background strip for the header.

    It sounds like there is an alternative.
    Yes just remove it
    Code:
    /*div {zoom: 1;}*/
    You seem to have layout on the elements that need it so only apply it when there are problems and not before. Read the faq on "haslayout" and read the msdn entry as to why its a bad idea to give everything layout.

    Most times you will need "layout" on a parent div that holds complicated content but you will seldom need it on the inner simple containers that make up the content.

    should I approach it differently somehow?
    I usually like my pages to be in logical order rather than trying to fit absolute headers onto place. However as you have a fixed height header there is not too much trouble with what you have done except for the layering problems. I would have placed that masthead background on the body element and saved a div in your code. You could then just shove the menu straight on top of the background image.

    Things like this are nonsense and shouldn't be used:
    Code:
                    <p class="nomargintop">&nbsp;</p>
                    <p class="nomargintop">&nbsp;</p>
                    <p class="nomargintop">&nbsp;</p>
    Use css to make space in the page and not empty elements. Don't create classnames like nomargintop as thats almost as bad as using font tags and the like. Create classnames that describes what the element is rather than the styles it holds. e.g class="warning".

    That way you can change the styles without losing semantic meaning. If later on you change the style in your .nomargintop to be margin-bottom:0 instead then it won't make a lot of sense unless you go through the html and change all the classnames as well


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
  •