Header CSS Frame in IE Leaves margin to right w/ width set to 100%

Discussion in 'CSS' started by balushahi, Mar 7, 2008.

  1. #1
    In IE following code doesn't stretch the header css frame to 100% width; it leaves huge margin to the right. It works perfect FF. I've got the following code for css:

    body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%;
    max-height: 100%;
    background: #fff;
    }

    #frameHeader{
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
    height: 130px; /*Height of frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    border-bottom: 2px solid navy;
    clear:both;
    }

    #framecontentLeft, #framecontentMiddle{
    position: absolute;
    top: 130px;
    left: 0;
    width: 100px; /*Width of left frame div*/
    height: 100%;
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    border-right: 2px solid #ccc;
    }

    #framecontentMiddle{
    left: 100px;
    top: 130px;
    width: 150px; /*Width of middle frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    }

    #maincontent{
    position: fixed;
    top: 130px;
    left: 250px; /*Set left value to WidthOfLeftFrameDiv*/
    bottom: 0;
    overflow: auto;
    }

    .innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
    }

    * html body{ /*IE6 hack*/
    padding: 130px 0px 0px 250px; /*Set value to (WidthofTopFrame 0 0 WidthOfLeftFrameDiv)*/
    }

    * html #maincontent{ /*IE6 hack*/
    height: 100%;
    width: 100%;
    }

    * html #frameHeader{ /*IE6 hack*/
    width: 100%;
    }
     
    balushahi, Mar 7, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Can you either post the html or link or post an image? I've been dicking with these too lately and I had zero trouble with the header, but instead with the middle part (the width of my middle ended up "shrink-wrapping" the content, and setting width to 100% made me lose the scroll-bar... still scrollable but only with mousewheel which not everyone has).

    Did you set IE6 into quirks mode like Stu does?
     
    Stomme poes, Mar 7, 2008 IP