splurge
02-28-2007, 02:29 AM
I have a CSS layout based on CSS Top and Bottom Frames Layout which I have adapted to include a two column layout with header and footer within the maincontent div. It is solid in Firefox, Safari and Opera - and in IE6, except that the scrollbar will not display in the right content div unless a pixel value is inserted. This is not desirable for the other browsers. Any suggestions for a hack or a fix? Page demo at http://www.splurge.com.au/indexFluid2.html
Here's the page 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>Splurge: The Cure For The Cure</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentTop, #framecontentBottom{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
background: url(images/top_gradient.gif) bottom repeat-x;
color: black;
}
#framecontentBottom{
top: auto;
bottom: 0px;
height: 80px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
background: url(images/bottom_gradient.gif) top repeat-x;
color: black;
}
#maincontent{
position: fixed;
top: 80px; /*Set top value to HeightOfTopFrameDiv*/
left: 0;
right: 0;
bottom: 80px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: hidden;
background: #fff;
width: 100%;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
/*Hacks for IE6 framecontent and maincontent*/
* html body{ /*IE6 hack*/
padding: 80px 0 80px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
}
/* Container CSS*/
#topsection{
position: absolute;
width: 100%;
background: #fff;
height: 31px; /*Height of top section*/
}
#footer{
position: absolute;
top: auto;
bottom: 0;
clear: left;
width: 100%;
height: 20px; /*Height of footer section*/
background: #EAEAEA;
color: black;
text-align: right;
padding: 0px 0;
border-top:1px solid #666;
}
#left{
position: absolute;
top: 31px; /*Height of top section*/
bottom: 20px; /*Height of footer section*/
left: 0;
width: 400px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: #fff;
color: white;
}
#content{
position: absolute;
top: 31px; /*Height of top section*/
bottom: 20px; /*Height of footer section*/
left: 400px; /*Set left value to WidthOfFrameDiv*/
right: 0;
width: auto;
height: auto;
overflow: auto;
background: #fff;
border-left:1px solid #666;
}
/*Menu styles*/
#menu {
clear:both;
border-top:1px solid #666;
border-bottom:2px solid #BC3219;
background:#fff url(images/menu.gif);
height:28px;
}
#menu li {
font-size:11px;
font: bold 12px Trebuchet MS;
}
#menu ul, ul.nobullets, .jsMenu ul {
margin:0;
padding:0;
list-style:none;
}
#menu li {
width:10%;
height:28px;
margin:0;
padding:0;
float:left;
}
#menu ul a {
display:block;
width:100%;
line-height:28px;
border-left:1px solid #7e7e7e;
height:28px;
background:#eee url(images/menu.gif);
text-align:center;
color:#666;
text-decoration:none;
}
#menu ul a span {
display:block;
width:100%;
height:28px;
border-left:1px solid #fff;
}
#menu ul a:hover, #menu ul a.selected {
cursor:pointer;
background-color:#ddd;
background-position:100% -36px;
color:#fff;
}
.valign {
min-height: 12em;
display: table-cell;
vertical-align: middle;
}
.innertube{
margin: 20px; /*Margins for inner DIV inside each column (to provide padding)*/
}
.image{
margin-top: 5px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-left: 20px;
}
.footer{
margin-top: 5px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-right: 20px;
font-size:10px;
font: normal 10px Trebuchet MS;
color: #666;
}
</style>
<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>
<![endif]-->
<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="framecontentTop">
<div class="image">
<a href="http://www.splurge.com.au/"><img src="images/splurgelogo.jpg" border="0" width="263" height="63" align="bottom" title="Go Home"></a>
</div>
</div>
<div id="framecontentBottom">
<div class="innertube">
<!--<h3>Sample text here</h3>-->
</div>
</div>
<div id="maincontent">
<div id="topsection">
<div id="menu">
<ul>
<li><a href="http://www.splurge.com.au/news/"><span>News</span></a></li>
<li><a href="http://www.splurge.com.au/dates/"><span>Live</span></a></li>
<li><a href="http://www.splurge.com.au/bio/"><span>Bio</span></a></li>
<li><a href="http://www.splurge.com.au/disco/"><span>Discs</span></a></li>
<li><a href="http://www.splurge.com.au/mp3/"><span>MP3</span></a></li>
<li><a href="http://www.splurge.com.au/lyrics/"><span>Lyrics</span></a></li>
<li><a href="http://www.splurge.com.au/pix/"><span>Pix</span></a></li>
<li><a href="http://www.splurge.com.au/buy/"><span>Buy</span></a></li>
<li><a href="http://www.splurge.com.au/links/"><span>Links</span></a></li>
<li><a href="http://www.splurge.com.au/join/"><span>Join</span></a></li>
</ul>
</div>
</div>
<div id="content">
<div class="innertube">
<b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(90)</script>
</div>
</div>
<div id="left">
<div class="valign">
<img src="images/cover.jpg" width="400" height="400">
</div>
</div>
<div id="footer">
<p class="footer">Copyright © Splurge Multimedia 2007. All rights reserved. <a href="http://www.splurge.com.au/contact/">Contact Splurge</a> | <a href="http://www.myspace.com/splurgemusic">MySpace Page</a> | <a href="http://www.splurge.com.au/sitemap.html">Site Map</a>
</div>
</div>
</body>
</html>
Here's the page 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>Splurge: The Cure For The Cure</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentTop, #framecontentBottom{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
background: url(images/top_gradient.gif) bottom repeat-x;
color: black;
}
#framecontentBottom{
top: auto;
bottom: 0px;
height: 80px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
background: url(images/bottom_gradient.gif) top repeat-x;
color: black;
}
#maincontent{
position: fixed;
top: 80px; /*Set top value to HeightOfTopFrameDiv*/
left: 0;
right: 0;
bottom: 80px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: hidden;
background: #fff;
width: 100%;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
/*Hacks for IE6 framecontent and maincontent*/
* html body{ /*IE6 hack*/
padding: 80px 0 80px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
}
/* Container CSS*/
#topsection{
position: absolute;
width: 100%;
background: #fff;
height: 31px; /*Height of top section*/
}
#footer{
position: absolute;
top: auto;
bottom: 0;
clear: left;
width: 100%;
height: 20px; /*Height of footer section*/
background: #EAEAEA;
color: black;
text-align: right;
padding: 0px 0;
border-top:1px solid #666;
}
#left{
position: absolute;
top: 31px; /*Height of top section*/
bottom: 20px; /*Height of footer section*/
left: 0;
width: 400px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: #fff;
color: white;
}
#content{
position: absolute;
top: 31px; /*Height of top section*/
bottom: 20px; /*Height of footer section*/
left: 400px; /*Set left value to WidthOfFrameDiv*/
right: 0;
width: auto;
height: auto;
overflow: auto;
background: #fff;
border-left:1px solid #666;
}
/*Menu styles*/
#menu {
clear:both;
border-top:1px solid #666;
border-bottom:2px solid #BC3219;
background:#fff url(images/menu.gif);
height:28px;
}
#menu li {
font-size:11px;
font: bold 12px Trebuchet MS;
}
#menu ul, ul.nobullets, .jsMenu ul {
margin:0;
padding:0;
list-style:none;
}
#menu li {
width:10%;
height:28px;
margin:0;
padding:0;
float:left;
}
#menu ul a {
display:block;
width:100%;
line-height:28px;
border-left:1px solid #7e7e7e;
height:28px;
background:#eee url(images/menu.gif);
text-align:center;
color:#666;
text-decoration:none;
}
#menu ul a span {
display:block;
width:100%;
height:28px;
border-left:1px solid #fff;
}
#menu ul a:hover, #menu ul a.selected {
cursor:pointer;
background-color:#ddd;
background-position:100% -36px;
color:#fff;
}
.valign {
min-height: 12em;
display: table-cell;
vertical-align: middle;
}
.innertube{
margin: 20px; /*Margins for inner DIV inside each column (to provide padding)*/
}
.image{
margin-top: 5px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-left: 20px;
}
.footer{
margin-top: 5px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-right: 20px;
font-size:10px;
font: normal 10px Trebuchet MS;
color: #666;
}
</style>
<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>
<![endif]-->
<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="framecontentTop">
<div class="image">
<a href="http://www.splurge.com.au/"><img src="images/splurgelogo.jpg" border="0" width="263" height="63" align="bottom" title="Go Home"></a>
</div>
</div>
<div id="framecontentBottom">
<div class="innertube">
<!--<h3>Sample text here</h3>-->
</div>
</div>
<div id="maincontent">
<div id="topsection">
<div id="menu">
<ul>
<li><a href="http://www.splurge.com.au/news/"><span>News</span></a></li>
<li><a href="http://www.splurge.com.au/dates/"><span>Live</span></a></li>
<li><a href="http://www.splurge.com.au/bio/"><span>Bio</span></a></li>
<li><a href="http://www.splurge.com.au/disco/"><span>Discs</span></a></li>
<li><a href="http://www.splurge.com.au/mp3/"><span>MP3</span></a></li>
<li><a href="http://www.splurge.com.au/lyrics/"><span>Lyrics</span></a></li>
<li><a href="http://www.splurge.com.au/pix/"><span>Pix</span></a></li>
<li><a href="http://www.splurge.com.au/buy/"><span>Buy</span></a></li>
<li><a href="http://www.splurge.com.au/links/"><span>Links</span></a></li>
<li><a href="http://www.splurge.com.au/join/"><span>Join</span></a></li>
</ul>
</div>
</div>
<div id="content">
<div class="innertube">
<b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(90)</script>
</div>
</div>
<div id="left">
<div class="valign">
<img src="images/cover.jpg" width="400" height="400">
</div>
</div>
<div id="footer">
<p class="footer">Copyright © Splurge Multimedia 2007. All rights reserved. <a href="http://www.splurge.com.au/contact/">Contact Splurge</a> | <a href="http://www.myspace.com/splurgemusic">MySpace Page</a> | <a href="http://www.splurge.com.au/sitemap.html">Site Map</a>
</div>
</div>
</body>
</html>