2 issues that arise in IE6.
1.: The color given to the content-area only is as high as the left+main height, it isn't looking at the height of the right-coluimn.
2. Only in IE6 is the footer-menu positioned to the left instead of floating right, as it does in FF and IE7.
Template:
Code: Select all
<div id="pagewrapper">
<!-- start accessibility skip links -->
<ul class="accessibility">
<li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
<li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
</ul>
<!-- end accessibility skip links -->
<hr class="accessibility" />
<!-- Horizontal ruler that is hidden for visual browsers by CSS -->
<!-- Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet "For template: Top menu + left submenu + 1 column" -->
<div id="header">
<h1>{cms_selflink dir="start" text="$sitename"}</h1>
<hr class="accessibility" />
</div>
<!-- End Header -->
<!-- Start Navigation -->
<div id="menu_horiz">
<div id="newsletter" style="float: right;">
{global_content name='newsletter'}
</div>
<h2 class="accessibility">Navigation</h2>
{menu template='simple_navigation.tpl' number_of_levels='1'}
<hr class="accessibility" />
</div>
<div id="menu_horiz2">
{menu template='extra-menu' start_page='hd-menu' show_all='1'}
<hr class="accessibility" />
</div>
<!-- End Navigation -->
<!-- Start Content (Navigation and Content columns) -->
<div id="content">
<!-- Start Sidebar -->
<div id="leftsidebar">
<!-- Start Sub Navigation -->
<div id="menu_vert">
<h2 class="accessibility">Sub Navigation</h2>
{menu template='simple_navigation.tpl' start_level='2' collapse='1'}
<br />
<br />
{menu template='extra-menu' start_page='sb-menu' show_all='1'}
<br />
<br />
<hr class="accessibility" />
</div>
<!-- End Sub Navigation -->
</div>
<!-- End Sidebar -->
<!-- Start Content Area -->
<div id="main">
<h2>{title}</h2>
{content} <br />
<!-- Start relational links -->
<!-- RK <div class="hr"></div> -->
<!-- End relational links -->
<hr class="accessibility" />
</div>
<!-- End Content Area -->
<div id="rightsidebar" align='center'>
<h4>FEATURED PROPERTIES</h4>
<br />
<div id="prop1">
{BannerText category='Prop1'}
</div>
<div id="prop2">
{BannerText category='Prop2'}
</div>
<div id="prop3">
{BannerText category='Prop3'}
</div>
<div id="prop4">
{BannerText category='Prop4'}
</div>
<hr class="accessibility" />
</div>
</div>
<!-- End Content -->
<!-- Start Footer. Edit the footer in the Global Content Block called "footer" -->
<div id="footer">
<div id="footermenu" style="float: right;">
{menu template='extra-menu' start_page='ft-menu' show_all='1'}
</div>
{valid_xhtml}
<!-- {global_content name='footer'} -->
</div>
<!-- End Footer -->
</div><!-- end pagewrapper -->
CSS:
Code: Select all
/*****************
basic layout
*****************/
body {
background-color: #000000;
color: #333;
margin:1em; /* gives some air for the pagewrapper */
}
/* center wrapper, min max width */
div#pagewrapper {
border: 1px solid black;
margin: 0 auto; /* this centers wrapper */
min-width: 1014px;
max-width: 1014px;
background-color: #9D9B9C;
/* background-color: #DADADA; */
color: black;
}
/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/
div#header {
height: 118px; /* adjust according your image size */
background: #9D9B9C url(uploads/rk:_zon_-_3col/header2.jpg) no-repeat 0px;
}
div#header h1 a {
/* you can set your own image here */
display: block;
height: 118px; /* adjust according your image size */
text-indent: -999em; /* this hides the text */
text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}
div.breadcrumbs span.lastitem {
font-weight:bold;
}
div#content {
/* background-color: #9D9B9C; */
background-color: #B3B3B3;
padding-top: 3px;
}
div#leftsidebar {
float: left;
margin-left: 0px;
margin-right: 0px;
width: 150px;
padding: 2px;
}
div#rightsidebar {
float: right;
margin-left: 3px;
margin-right: 3px;
width: 150px;
padding: 0px;
}
div#main {
float: left;
width: 700px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
background-color: #EFEFEF ;
}
div#footer {
clear:both; /* keep footer below content and menu */
color: #fff;
background-color: #4F4F4F;
height: 50px;
}
div#footer p {
font-size: 0.8em;
padding: 1.5em; /* some air for footer */
text-align: center; /* centered text */
margin:0;
}
div#footer p a {
color: #fff; /* needed becouse footer link would be same color as background otherwise */
}
