Results 1 to 2 of 2

Thread: problem with "CSS Left and Right Frames Layout"

  1. #1
    Join Date
    Aug 2006
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation problem with "CSS Left and Right Frames Layout"

    1) Script Title:
    CSS Left and Right Frames Layout

    2) Script URL (on DD):
    http://www.dynamicdrive.com/style/la...frames-layout/

    3) Describe problem:
    I would like to use this CSS template with frame width value in percentage (no fixe width in pixel). It looks good with FF, Safari and Opera, but there is a problem with IE (6 and 7).

    I've tried to play with width values of the right and left frames, but it doesn't look great!
    If the value is "17%", it stays a blank space between left/right frames and content frame... and if the value is "16%", the scrollbar is not displayed!

    * html body{ /*IE6 hack*/
    padding: 0 17% 0 17%; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
    }

    Could you help me

    Thanks,
    Chris


    HTML Code:
    <!--Force IE6 into quirks mode with this comment tag-->
    <!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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Dynamic Drive: CSS Left and Right Frames Layout</title>
    <style type="text/css">
    
    body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
    }
    
    #framecontentLeft, #framecontentRight{
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 25%; /*Width of left frame div*/
    height: 100%;
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white;
    }
    
    #framecontentRight{
    left: auto;
    right: 0; 
    width: 25%; /*Width of right frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white;
    }
    
    #maincontent{
    position: fixed; 
    top: 0;
    left: 25%; /*Set left value to WidthOfLeftFrameDiv*/
    right: 25%; /*Set right value to WidthOfRightFrameDiv*/
    bottom: 0;
    overflow: auto; 
    background: #fff;
    }
    
    .innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
    }
    
    * html body{ /*IE6 hack*/
    padding: 0 25% 0 25%; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
    }
    
    * html #maincontent{ /*IE6 hack*/
    height: 100%; 
    width: 100%; 
    }
    
    </style>
    
    <script type="text/javascript">
    /*** Temporary text filler function. Remove when deploying template. ***/
    var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
    function filltext(words){
    for (var i=0; i<words; i++)
    document.write(gibberish[Math.floor(Math.random()*3)]+" ")
    }
    </script>
    
    </head>
    
    <body>
    
    <div id="framecontentLeft">
    <div class="innertube">
    
    <h1>CSS Left and Right Frames Layout</h1>
    <h3>Sample text here</h3>
    
    </div>
    </div>
    
    <div id="framecontentRight">
    <div class="innertube">
    
    <h3>Sample text here</h3>
    
    </div>
    </div>
    
    
    <div id="maincontent">
    <div class="innertube">
    
    <h1>Dynamic Drive CSS Library</h1>
    <p><script type="text/javascript">filltext(255)</script></p>
    <p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>
    
    </div>
    </div>
    
    </body>
    </html>

  2. #2
    Join Date
    Aug 2006
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    no idea?

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
  •