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.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    min/max-width in IE6

    Hello - I am working on a liquid layout and the min/max-width in FF and IE7 make the page work and scale terrifically. However i cannot get the the IE6 javascript work arounds to work correctly. Any help would be greatly appreciated! Thanks so much.

    CSS
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    min-width: 740px;
    max-width: 1200px;
    width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");/*IE  Min/Max Width work around
    }
    
    b{font-size: 110%;}
    em{color: red;}
    
    
    #topsection{
    background: #EAEAEA;
    height: 130px; 
    }
    
    #topsection h1{
    margin: 0;
    padding-top: 15px;
    }
    
    #contentwrapper{
    float: left;
    width: 100%;
    }
    
    #contentcolumn{
    margin-left: 200px;
    }
    
    #leftcolumn{
    float: left;
    width: 200px;
    margin-left: -100%;
    background: #C8FC98;
    }
    
    #footer{
    clear: left;
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
    }
    
    #footer a{
    color: #FFFF80;
    }
    
    .innertube{
    margin: 10px; 
    margin-top: 0;
    }
    div.controls {
    float:right;
    font-size:80%;
    }
    div.headimg {
    float:left;
    }
    The HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Website Skeleton</title>
    <link href="test.css" rel="stylesheet" type="text/css" />
    </head>
    
    
    <body>
    <script type="text/javascript"></script>
    <div id="maincontainer">
    
    <div id="topsection"><div class="innertube">
    <div class="controls">
    <a href="#">Select Style </a>
    </div>
    <div class="headimg">
    <img src="images/Person.jpg" alt="Header Image" height="131" />
    </div>
    <h1>Header</h1>
    <h2>SUBHEADER</h2>
    </div></div>
    
    <div id="contentwrapper">
    <div id="contentcolumn">
    <div class="innertube">
    <h2>Welcome! <span class="controls"><a href="#">Edit</a>| <a href="#">Remove Module</a> | <a href="#">Show On Home Page</a></span></h2>
    <p>Lorem ipsum pri erat noluisse disputationi cu, eam eu erant elitr, in facilis detraxit nam. In posse deserunt sit, ad ius virtute probatus consequat, nam at animal detraxit. Vim congue veritus ut, ut vidit accusamus sed, ad nullam omittantur has. In qui aeterno reformidans, graeco euripidis sit ne. Te usu fabellas periculis, ei dicit vidisse sea. Ad mei suas minimum, ea malis dictas est.</p>
    
    <p>Pro iusto adipiscing et, pri homero possit no. Vis minim salutatus ei, postea nominavi at mei, cu pro deleniti delectus. Est debitis laboramus ut, iuvaret vivendo ut eos, mea cu iisque omittantur. Sit ea quidam sanctus officiis, cu sed posse idque. Ut oblique aliquyam persecuti duo, eam te mazim delectus perfecto. Ex fabellas vivendum nam.</p>
    
    <p>Pro ut eripuit salutatus, ut quis nominati pro. Pro nullam electram constituam ad, ad duis menandri partiendo sed. Euismod maiorum deserunt ei qui, cibo velit eum cu. Duis detracto eam id, assum lobortis ius ea, te tibique prodesset ius. Quis mediocritatem et nec, eum an omnes tincidunt persecuti.</p>
    
    <p>Graece quaerendum contentiones sed ad, graece vituperatoribus ignota his eu, cum cu discere placerat. Ne liber nostrud mel. In veritus fierent sea. Pri oratio expetendis at. An noster nostrum dissentiunt mei, ius esse eruditi contentiones id.</p>
    </div>
    </div>
    </div>
    
    <div id="leftcolumn">
    <div class="innertube">
    <div id="nav">
    <h2>Navigation <span class="controls"><a href="#">Edit</a></span></h2>
    <ul class="nav">
    <li id="active"><a href="#">Home</a></li>
    <li><a href="#">Calendar</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Annoucements</a></li>
    <li><a href="#">Item1</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Contact Me</a></li>
    <li><a href="#">Item Eight</a></li>
    <li><a href="#">Item Nine</a></li>
    </ul>
    </div>
    
    <div id="edit">
    <h2>Edit Tools <span class="controls"><a href="#">Edit</a></span></h2>
    <ul class="edit">
    <li><a href="#">Add New Page</a></li>
    <li><a href="#">Style Settings</a></li>
    <li><a href="#">General Settings</a></li>
    <hr/>
    <!--Controls Replaced By Images-->
    <a href="#">Larger</a> | <a href="#">Smaller</a><br/>
    <a href="#">Color:</a> Color<br/>
    <a href="#">Background:</a> Color<br/>
    </ul>
    
    </div
    ></div>
    
    </div>
    
    <div id="footer">Footer</div>
    
    </div>
    </body>
    </html>
    Thanks!

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Code:
    width: expression((document.documentElement.clientWidth < 742)? "740px" : (document.documentElement.clientWidth > 1202)? "1200px" : "auto");/*IE  Min/Max Width work around */
    Preferably in conditional comments.

  • Users who have thanked Fang for this post:

    json2001 (10-17-2007)

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    It's because you have width: 100% in #contentcontainer.

    Because of the way IE handles div sizing (overflow actually expands parent elements) that will render your rule in body ineffective.

    Move the min/max-width expression from body to #contentcontainer, and you'll be good to go short of some float tweaking. Also I would put it in a conditional comment like Fang mentioned.

  • Users who have thanked vtjustinb for this post:

    json2001 (10-17-2007)

  • #4
    New Coder
    Join Date
    Aug 2007
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Always helpful. I Appreciate it. Thanks a lot!


  •  

    Posting Permissions

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