...

View Full Version : min/max-width in IE6



json2001
10-17-2007, 07:33 PM
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


@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



<!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!

Fang
10-17-2007, 08:58 PM
width: expression((document.documentElement.clientWidth < 742)? "740px" : (document.documentElement.clientWidth > 1202)? "1200px" : "auto");/*IE Min/Max Width work around */

Preferably in conditional comments.

vtjustinb
10-17-2007, 09:16 PM
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.

json2001
10-17-2007, 09:48 PM
Always helpful. I Appreciate it. Thanks a lot!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum