NEED HELP QUICKLY: Sticky footer and CSS dropdown menu fail in IE6

Question

K?! 0 Junior Poster in Training

14 Years Ago

Hi all

I'm having a major problem here.
Before you read this and think "that's a stupid mistake to make", I'm on an internship and it's my first "real" website. ( I experimented before, but it's the first time I have to make a "finished product) So I hope for some understanding.

I used the following codes:

Sticky footer: http://ryanfait.com/sticky-footer/
CSS dropdown menu: http://matthewjamestaylor.com/blog/centered-dropdown-menus

and IETester for testing in different versions of IE.

The sticky footer used to work in IE6 when I first implemented it, but then I forgot about testing in different browsers when continuing the development of the website in the CMS.

My internship is finished on friday and the site still needs to be uploaded. So I need help really quickly.

What do I do, use a script and tell the site only works on IE7 and up (and every other major browser, I tested in Chrome, Firefox and Safari), or still try to solve the problem?

Here's the code:

of the homepage:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Basisschool Park</title>
    <base href="http://localhost/bsparkoefen/" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
<!-- Opnemen van de CSS bestanden -->
    <link href="assets/templates/bspark/css/raamwerk.css" type="text/css" rel="stylesheet" />
    <link href="assets/templates/bspark/css/opmaak.css" type="text/css" rel="stylesheet" />
    <link href="assets/templates/bspark/css/slimbox.css" type="text/css" rel="stylesheet" />
<!-- Opnemen van de JavaScript bestanden -->
    <script language="javascript" type="text/javascript" src="assets/templates/bspark/js/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="assets/templates/bspark/js/jflow.js"></script>
    <script language="javascript" type="text/javascript" src="assets/templates/bspark/js/mootools.js"></script>
    <script language="javascript" type="text/javascript" src="assets/templates/bspark/js/slimbox.js"></script>
</head>
<body>
    <div id="site">
            <div id="banner"></div>
            <div id="wolken"></div>
            <div class="menu" id="primairmenu">
               <ul><li class="first active"><a href="http://localhost/bsparkoefen/" title="" >De school</a><ul><li class="first"><a href="/bsparkoefen/index.php?id=6" title="" >Visie</a></li>
<li class="last"><a href="/bsparkoefen/index.php?id=89" title="" >Locatie</a></li>
</ul></li>
<li><a href="/bsparkoefen/index.php?id=5" title="" >De mensen</a></li>
<li><a href="/bsparkoefen/index.php?id=3" title="" >Inlichtingen</a><ul><li class="first"><a href="/bsparkoefen/index.php?id=15" title="" >Inschrijvingen</a></li>
<li><a href="/bsparkoefen/index.php?id=76" title="" >Voor ouders</a></li>
<li class="last"><a href="/bsparkoefen/index.php?id=77" title="" >Documenten</a></li>
</ul></li>
<li class="last"><a href="/bsparkoefen/index.php?id=2" title="" >Klassen</a><ul><li class="first"><a href="/bsparkoefen/index.php?id=24" title="" >Cocon</a></li>
<li class="last"><a href="/bsparkoefen/index.php?id=26" title="" >Eikstraat</a></li>
</ul></li>
</ul>
            </div>
           <div class="menu" id="secundairmenu">
                <ul><li class="first"><a href="/bsparkoefen/index.php?id=47" title="" >Blogs</a></li>
<li><a href="/bsparkoefen/index.php?id=14" title="" >Foto's</a></li>
<li><a href="/bsparkoefen/index.php?id=84" title="" >Links</a></li>
<li class="last"><a href="/bsparkoefen/index.php?id=73" title="" >Contact</a></li>
</ul>
            </div>
          <div class="breadcrumbs">U bevindt zich hier: <a href="index.php?id=4">Startpagina</a> <span class="B_crumbBox"><span class="B_firstCrumb"><span class="B_homeCrumb">De school</span></span> &raquo; <span class="B_lastCrumb"><span class="B_homeCrumb">De school</span></span></span></div>
           <div id="content">


            <div><script type="text/javascript">
    $(document).ready(function(){
       $(".controls").jFlow({
          slides: ".slides",
          controller: ".jFlowControl",
          slideWrapper: "#jFlowSlide",
          selectedWrapper: "jFlowSelected",
          auto: true,
          width: "100%",
          height: "220px",
          duration: 500,
          prev: ".jFlowPrev",
          next: ".jFlowNext"
       });
    });
</script>
<div class="kader volledig">
    <div class="slider">
        <div class="slides">
          <div class="slide">
            <img src="assets/images/slider/b.jpg" />
            <div class="inhoud">
                <div class="titel">Barbeque</div>
                <p>Lorem ipsum dolor sit amet
                <a href="index.php?id=3">Inlichtingen</a>
                , consectetur adipiscing elit.
                Donec a purus ac nisi egestas laoreet. Praesent imperdiet ornare enim, nec commodo nisl mollis non.
                Etiam semper varius justo, varius fermentum purus imperdiet non. Nulla facilisi.
                Proin libero elit, venenatis vitae tincidunt sed, suscipit in turpis.</p>
            </div>
        </div>
            <div class="slide">
                <img src="assets/images/slider/schoolfeest.jpg" />
                <div class="inhoud">
                    <div class="titel">Schoolfeest</div>
                    <p>Op 12 april gaat ons jaarlijkse schoolfeest door. Jullie zijn allemaal welkom vanaf 18 uur op de school zelf. De prijs bedraagt ?15.</p>
                </div>
            </div>
            <div class="slide">
                <img src="assets/images/slider/a.jpg" />
                <div class="inhoud">
                    <div class="titel">Ander evenment</div>
                    <p>Donec in arcu vitae leo molestie fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                </div>
            </div>
        </div>
        <div class="controls">
            <span class="jFlowPrev">&laquo;</span>
            <span class="jFlowControl">1</span>
            <span class="jFlowControl">2</span>
            <span class="jFlowControl">3</span>
            <span class="jFlowNext">&raquo;</span>
        </div>
    </div>
</div></div>
<p>
<img id="slogan" src="assets/templates/bspark/img/slogan.jpg" alt="Basisschool Park geeft je toekomst kleur" /></p>
<div class="volledig">
<div class="kader half links oranje">
<h1>Lorem ipsum</h1>
<h2>dolor sit amet</h2>
<h3>consectetur adipiscing</h3>
<h4>elit</h4>
<h5>In auctor consequat risus</h5>
<h6>quis condimentum neque auctor nec</h6>
<p>Nam faucibus convallis lacinia. Quisque volutpat molestie metus ut dapibus. Nunc facilisis suscipit massa tempus vulputate. Donec in diam lectus. Donec lobortis quam eu eros sollicitudin eget eleifend enim fermentum.</p>
</div>
<div class="kader half rechts geel">
<h1>Lorem ipsum</h1>
<h2>dolor sit amet</h2>
<h3>consectetur adipiscing</h3>
<h4>elit</h4>
<h5>In auctor consequat risus</h5>
<h6>quis condimentum neque auctor nec</h6>
<p>Nam faucibus convallis lacinia. Quisque volutpat molestie metus ut dapibus. Nunc facilisis suscipit massa tempus vulputate. Donec in diam lectus. Donec lobortis quam eu eros sollicitudin eget eleifend enim fermentum.</p>
</div>
</div>
<div class="volledig">
<div class="kader half links groen">
<h1>Lorem ipsum</h1>
<h2>dolor sit amet</h2>
<h3>consectetur adipiscing</h3>
<h4>elit</h4>
<h5>In auctor consequat risus</h5>
<h6>quis condimentum neque auctor nec</h6>
<p>Nam faucibus convallis lacinia. Quisque volutpat molestie metus ut dapibus. Nunc facilisis suscipit massa tempus vulputate. Donec in diam lectus. Donec lobortis quam eu eros sollicitudin eget eleifend enim fermentum.</p>
</div>
<div class="kader half rechts roze">
<h1>Lorem ipsum</h1>
<h2>dolor sit amet</h2>
<h3>consectetur adipiscing</h3>
<h4>elit</h4>
<h5>In auctor consequat risus</h5>
<h6>quis condimentum neque auctor nec</h6>
<p>Nam faucibus convallis lacinia. Quisque volutpat molestie metus ut dapibus. Nunc facilisis suscipit massa tempus vulputate. Donec in diam lectus. Donec lobortis quam eu eros sollicitudin eget eleifend enim fermentum.</p>
</div>
</div>


        </div>
<!-- Het push element dient enkel voor de footer, niets inzetten -->
        <div id="push"></div>
    </div>
    <div id="footer">
        <div class="kolommen">
            <div class="kolom" id="eerstekolom">
                <dl>
                    <dt>Website beheerder</dt>
                    <dd>Steven Verleysen</dd>
                    <dd><a href="mailto:email">email</a></dd>
                    <dt>Website door</dt>
                    <dd>Kenny Brijs</dd>
                    <dd><a href="site" target="_blank">site</a></dd>
                </dl>
            </div>
            <div class="kolom">
                <dl>
                    <dt>Directie</dt>
                    <dd>Gerd De Roeck</dd>
                    <dd><a href="email">email</a></dd>
                </dl>
            </div>
            <div class="kolom">
                <dl>
                    <dt>Afdeling Eikstraat</dt>
                    <dd><address>Eikstraat 8, 9300 Aalst</address> (<a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=nl&amp;geocode=&amp;q=Eikstraat+8,+9300+Aalst,+Belgi%C3%AB&amp;sll=50.932374,4.04049&amp;sspn=0.005747,0.016512&amp;ie=UTF8&amp;hq=&amp;hnear=Eikstraat+8,+Aalst+9300+Aalst,+Oost-Vlaanderen,+Vlaams+Gewest,+Belgi%C3%AB&amp;ll=50.938798,4.042454&amp;spn=0.022987,0.066047&amp;z=15&amp;iwloc=A" target="_blank">Google Maps</a>)</dd>
                    <dd>Tel.: 053/60.82.55</dd>
                    <dt>Kleutertuin 't Cocon</dt>
                    <dd><address>Klapstraat 10, 9300 Aalst</address> (<a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=nl&amp;geocode=&amp;q=Klapstraat+10,+9300+Aalst,+Belgi%C3%AB&amp;sll=50.932174,4.038386&amp;sspn=0.011495,0.033023&amp;ie=UTF8&amp;hq=&amp;hnear=Klapstraat+10,+Aalst+9300+Aalst,+Oost-Vlaanderen,+Vlaams+Gewest,+Belgi%C3%AB&amp;ll=50.938581,4.043999&amp;spn=0.022987,0.066047&amp;z=15" target="_blank">Google Maps</a>)</dd>
                    <dd>Tel.: 053/76.90.92</dd>
                </dl>
            </div>
            <div class="kolom" id="laatstekolom">
                <dl>
                    <dt>Tip:</dt>
                    <dd>
                        Moderne browsers zijn veiliger, sneller en geven websites beter weer.
                        Gebruik gratis <a href="http://www.mozilla-europe.org/nl/firefox/" target="_blank">Firefox</a>, <a href="http://www.google.com/chrome/?hl=nl" target="_blank">Chrome</a> of <a href="http://www.apple.com/benl/safari/" target="_blank">Safari</a>.
                    </dd>
                </dl>
            </div>
        </div>
    </div>
    <!-- SCRIPTS START -->
        <!--[if lt IE 7]><script type="text/javascript" src="assets/templates/bspark/js/iehoverfix.js"></script><![endif]-->
    <!-- SCRIPTS STOP -->
</body>
</html>

opmaak.css:

BODY
{
	background: #88D9F6;
}
#banner
{
	background-image: url(../img/banner3.png);
	background-repeat: no-repeat;
	background-position: center center;
}
#wolken
{
	background: url(../img/wolken.png) repeat-x bottom center;
}
/*Primair Menu Start*/
#primairmenu UL LI.first
{
	/*+border-radius:0 0 0 1em;*/
	border-radius: 0 0 0 1em;
	-moz-border-radius: 0 0 0 1em;
	-webkit-border-radius: 0 0 0 1em;
	-khtml-border-radius: 0 0 0 1em;
}
#primairmenu UL LI
{
	border: 5px solid #000000;
	border-right: none;
	border-top: none;
	background-color: #A6C043;
}
#primairmenu UL LI.last
{
	border-right: 5px solid #000000;
	/*+border-radius:0 0 1em;*/
	border-radius: 0 0 1em 0;
	-moz-border-radius: 0 0 1em;
	-webkit-border-radius: 0 0 1em;
	-khtml-border-radius: 0 0 1em;
}
#primairmenu UL LI A
{
	padding: 0.2em 1.5em 0.5em;
	text-decoration: none;
	color: #000;
	font-weight: bold;
	/*+border-radius:0 0 2em 2em;*/
	border-radius: 0 0 2em 2em;
	-moz-border-radius: 0 0 2em 2em;
	-webkit-border-radius: 0 0 2em 2em;
	-khtml-border-radius: 0 0 2em 2em;
}
#primairmenu UL UL LI.first
{
	/*+border-radius:0;*/
	border-radius: 0 0 0 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	-khtml-border-radius: 0;
}
#primairmenu UL UL LI
{
	background-color: #C8DA85;
	border: 5px solid #000000;
	border-top: none;
}
#primairmenu UL UL LI A
{
	padding: 0.7em 2em;
}
#primairmenu UL UL LI.last
{
	/*+border-radius:0 0 1em 1em;*/
	border-radius: 0 0 1em 1em;
	-moz-border-radius: 0 0 1em 1em;
	-webkit-border-radius: 0 0 1em 1em;
	-khtml-border-radius: 0 0 1em 1em;
}
#primairmenu UL UL LI A, #primairmenu UL LI.active LI A, #primairmenu UL LI:hover UL LI A, #primairmenu UL LI.hover UL LI A
{
/*This line is required for IE 6 and below*/
	font-weight: normal;
/*resets the bold set for the top level menu items*/
}
/*Primair Menu Stop
Secundair Menu Start*/
#secundairmenu
{
	margin-top: 5em;
	margin-left: 0;
	background-color: #C8DA85;
	border: 5px solid #000;
	border-right: none;
	/*+border-radius:1em 0 0 1em;*/
	border-radius: 1em 0 0 1em;
	-moz-border-radius: 1em 0 0 1em;
	-webkit-border-radius: 1em 0 0 1em;
	-khtml-border-radius: 1em 0 0 1em;
}
#secundairmenu H2
{
	padding: 0.3em 2em 0.5em 1em;
	font-weight: bold;
	font-size: 1em;
	margin-bottom: 0;
}
#secundairmenu A
{
	padding: 0.5em 2em;
}
#secundairmenu UL
{
	list-style-type: none;
	/*+border-radius:0 0 0.9em;*/
	border-radius: 0 0 0.9em 0;
	-moz-border-radius: 0 0 0.9em;
	-webkit-border-radius: 0 0 0.9em;
	-khtml-border-radius: 0 0 0.9em;
	z-index: 1;
}
#secundairmenu UL LI
{
	border-bottom: 3px solid #000;
}
#secundairmenu UL LI.last
{
	border-bottom: none;
}
#secundairmenu UL LI A, #secundairmenu UL LI.last A
{
	display: block;
	font-size: 1em;
	text-decoration: none;
	color: #000;
}
/*Secundair Menu Stop*/
.breadcrumbs
{
	color: #032F3E;
	background-color: #A6C043;
	border: 2px solid #068;
	/*+border-radius:2em 2em 0 0;*/
	border-radius: 2em 2em 0 0;
	-moz-border-radius: 2em 2em 0 0;
	-webkit-border-radius: 2em 2em 0 0;
	-khtml-border-radius: 2em 2em 0 0;
}
.breadcrumbs A
{
	color: #032F3E;
}
#content
{
	color: #032F3E;
	background-color: #FFF;
	border: 2px solid #068;
	border-top: none;
	/*+border-radius:0 0 2em 2em;*/
	border-radius: 0 0 2em 2em;
	-moz-border-radius: 0 0 2em 2em;
	-webkit-border-radius: 0 0 2em 2em;
	-khtml-border-radius: 0 0 2em 2em;
	padding: 2em;
}
/*HTML Elementen Start*/
H1, H2, H3, H4, H5, H6
{
	clear: both;
	margin: 0 0 1em;
}
H1
{
	font-size: 2em;
	border-bottom: 2px solid #A5BF42;
}
H2
{
	font-size: 1.6em;
}
H3
{
	font-size: 1.3em;
	color: #809531;
}
H4
{
	font-size: 1.1em;
	color: #93AB3A;
}
H5
{
	font-size: 1em;
	font-style: italic;
	color: #93AB3A;
	text-decoration: underline;
}
H6
{
	font-size: 1em;
	font-style: italic;
	text-decoration: underline;
}
P
{
/*TODO: make it big enough to contain all floating elements (license)*/
	margin-bottom: 1em;
}
IMG
{
	border: 1px solid #006587;
	/*[disabled]margin:0.5em;*/
}
BLOCKQUOTE
{
	font-style: italic;
}
ADDRESS
{
	font-style: italic;
}
#content UL, OL
{
	margin-left: 2.5em;
}
A
{
	text-decoration: underline;
	color: #4B5F01;
}
/*HTML Elementen Stop
Kaders Start*/
.kader
{
	border: 1px solid #006587;
	/*+border-radius:1em;*/
	border-radius: 1em 1em 1em 1em;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	-khtml-border-radius: 1em;
}
.oranje
{
	background-color: #F99C1A;
}
.geel
{
	background-color: #F4F42E;
}
.groen
{
	background-color: #CCF339;
}
.roze
{
	background-color: #EA6374;
}
/*Kaders Stop
Slider Start*/
.controls
{
	text-align: center;
	margin-top: 0.5em;
	font-weight: bold;
}
.jFlowControl, .jFlowPrev, .jFlowNext
{
	background-color: #A4BE41;
	padding: 0.5em;
	border: 1px solid #022E3D;
	/*+border-radius:1em;*/
	border-radius: 1em 1em 1em 1em;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	-khtml-border-radius: 1em;
}
.jFlowPrev, .jFlowNext
{
	padding: 0.2em 0.5em 0.3em;
	/*+border-radius:1em;*/
	border-radius: 1em 1em 1em 1em;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	-khtml-border-radius: 1em;
}
.jFlowSelected
{
	text-decoration: underline;
}
.titel
{
	font-size: 2em;
	border-bottom: 2px solid #A5BF42;
}
/*Slider Stop
Footer Start*/
#footer
{
	background: #A7C144 url(../img/gras.png) repeat-x top center;
}
#footer #eerstekolom
{
	border-left: 2px dashed #000000;
}
#footer .kolom
{
	overflow: hidden;
	border-right: 2px dashed #000000;
}
#footer #laatstekolom
{
	border-right: none;
}
#laatstekolom DD
{
}
/*Footer Stop
Extra's
Hoort in css voor klas template*/
#voorstelling_leerkracht
{
	clear: both;
/*Voor zorgen da kader groot genoeg is voor bevatte floating elementen*/
}
#voorstelling_leerkracht IMG
{
	float: left;
}
#voorstelling_leerkracht BLOCKQUOTE
{
	background: url(../img/quote.png) no-repeat;
	background-color: #C1E9F8;
	float: left;
	border: 2px solid #068;
	padding: 0.5em 0.5em 0.5em 60px;
	/*+border-radius:2em;*/
	border-radius: 2em 2em 2em 2em;
	-moz-border-radius: 2em;
	-webkit-border-radius: 2em;
	-khtml-border-radius: 2em;
}

raamwerk.css

/*+clearfix {*/
#content:after, .volledig:after, .half:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0;
}
#content, .volledig, .half
{
	display: inline-block;
}
#content, .volledig, .half
{
/*\*/
	display: block;
/**/
	_height: 1px;
}
/*+}*/
/*+reset {*/
*
{
	position: relative;
	margin: 0;
	padding: 0;
}
BODY
{
	font-size: 100%;
	font-family: sans-serif;
	line-height: 1.5;
	/*[empty]letter-spacing:;*/
	/*+reset-optimize:yes;*/
}
H1, H2, H3, H4, H5, H6, ADDRESS, CAPTION, CITE, CODE, DFN, TH, VAR, KBD, PRE, SAMP, TT, SELECT, INPUT, BUTTON, TEXTAREA
{
	font-size: inherit;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	#font-family: expression(this.singleExFf?this.singleExFf:(function(t)\7b return(t.singleExFf=t.parentNode.currentStyle.fontFamily)\7d )(this));
	#font-style: expression(this.singleExFs?this.singleExFs:(function(t)\7b return(t.singleExFs=t.parentNode.currentStyle.letterSpacing)\7d )(this));
	#font-weight: expression(this.singleExFw?this.singleExFw:(function(t)\7b return(t.singleExFw=t.parentNode.currentStyle.fontWeight)\7d )(this));
	#letter-spacing: expression(this.singleExLs?this.singleExLs:(function(t)\7b return(t.singleExLs=t.parentNode.currentStyle.letterSpacing)\7d )(this));
}
TH
{
	text-align: left;
}
TABLE
{
	border-spacing: 0;
}
TR, TD, TH
{
	position: static;
}
INPUT[type=hidden]
{
	display: none !important;
}
FIELDSET, IMG
{
	border: 0;
}
/*+}*/
BODY
{
	min-width: 800px;
}
#banner
{
	height: 80px;
	width: 100%;
	background-color: #FFF;
	padding-top: 12px;
	z-index: 11;
}
#wolken
{
	height: 63px;
	width: 100%;
	z-index: 11;
}
/*Primair Menu Start
Main menu settings*/
#primairmenu
{
	margin-bottom: 0;
	z-index: 10;
	font-size: 1em;
	line-height: 1em;
	clear: both;
	float: left;
	width: 100%;
	position: relative;
}
/*Top menu items*/
#primairmenu UL
{
	list-style: none;
	float: right;
	position: relative;
	right: 50%;
}
#primairmenu UL LI
{
	float: left;
	position: relative;
	left: 50%;
	top: 1px;
	margin-right: 0;
	margin-top: -63px;
	padding-top: 63px;
}
#primairmenu UL LI A
{
	display: block;
}
/*Submenu items*/
#primairmenu UL LI.first UL
{
	margin-left: 0.5em;
}
#primairmenu UL UL
{
	display: none;
/*Sub menus are hiden by default*/
	position: absolute;
	top: 2em;
	left: 0;
	right: auto;
/*resets the right:50% on the parent ul*/
	width: 100%;
	min-width: 10em;
/*width of the drop-down menus*/
	margin-top: 62px;
	margin-left: -5px;
	z-index: 4;
}
#primairmenu UL LI.last UL
{
	margin-right: 2em;
}
#primairmenu UL UL LI
{
	left: auto;
/*resets the left:50% on the parent li*/
	margin: 0;
/*Reset the 1px margin from the top menu*/
	clear: left;
	width: 100%;
	padding: 0;
}
#primairmenu UL LI.last UL
{
	left: auto;
/*reset left:0; value*/
	right: 0;
/*Set right value instead*/
}
/*Make the sub menus appear on hover*/
#primairmenu UL LI:hover UL, #primairmenu UL LI.hover UL
{
/*This line is required for IE 6 and below*/
	display: block;
/*Show the sub menus*/
}
/*Primair Menu Stop
Secundair Menu Start*/
#secundairmenu
{
	float: right;
	position: fixed;
	top: 136px;
	right: 0;
	max-width: 14%;
	z-index: 12;
}
/*Secundair Menu Stop*/
.breadcrumbs
{
	height: 1.5em;
	padding: 0 2em;
	margin: 4em 15% 0;
}
.B_firstCrumb
{
	display: none;
}
/*[clearfix]*/#content
{
	z-index: 0;
	padding-top: 0;
	margin: 0 15% 2em;
	overflow: hidden;
}
/*Kaders Start*/
.kader
{
/*TODO at licence: Let it contain all floating elements*/
	padding: 1em;
	margin: 1em 0;
	overflow: hidden;
}
/*[clearfix]*/.volledig
{
	clear: both;
}
/*[clearfix]*/.half
{
	width: 43%;
}
.links
{
	float: left;
}
.rechts
{
	float: right;
}
/*Kaders Stop*/
#slogan
{
	width: 100%;
	border: none;
}
/*Slider Start*/
.slide
{
	float: none;
	height: 220px;
}
.slide IMG
{
	height: 200px;
	width: 200px;
	float: left;
}
.slide .inhoud
{
	margin-left: 220px;
}
.jFlowControl, .jFlowPrev, .jFlowNext
{
	cursor: pointer;
}
/*Slider Stop
Klaslijst Start*/
.klaslijst .item
{
	height: 250px;
	padding-left: 0.5em;
	padding-right: 0.5em;
}
/*Klaslijst Stop*/
#contactFormulier
{
	margin-bottom: 2em;
}
/*Samenvatting blogbericht Start*/
.samenvatting_blogbericht
{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	border-bottom: 1px dotted #006587;
}
/*Samenvatting blogbericht Stop*/
#footer
{
	z-index: 11;
	width: 100%;
}
#footer .kolommen
{
	height: 100%;
	width: 85%;
	margin: 0 0 0 15%;
}
#footer .kolom
{
	height: 100%;
	width: 27%;
	float: left;
}
#footer #laatstekolom
{
	/*+placement:anchor-bottom-right 0px 0px;*/
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 19%;
}
/*Vanaf DL t.e.m. A herwerken, DL wel gepast?, A moet algemene opmaak hebben*/
#footer DL
{
	padding: 0 1em;
}
#footer DT
{
	font-weight: bold;
	text-decoration: underline;
	padding: 1em 0 0.1em;
}
#footer A
{
	color: #032F3E;
}
/*Code om de footer beneden te houden, plaats hier geen code onder*/
*
{
	margin: 0;
}
HTML, BODY
{
	height: 100%;
}
#site
{
	min-height: 100%;
	height: auto !important;
	height: 100%;
/*De negatieve waarde = height v footer en push + eventuele paddings, borders, ...*/
	margin: 0 auto -365px;
	position: relative;
}
#footer, #push
{
	padding: 65px 0 0;
	height: 300px;
/*.push must be the same height as .footer*/
}

slimbox.css (I don't think this will matter, but you never know)

/* SLIMBOX */

#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url(loading.gif) no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(closelabel.gif) no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}

I'm sorry for the messy loads of code.

Greetings, and thanks in avance, Kenny.

html-css web-design

2 Contributors
5 Replies
197 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by K?!

pritaeas 2,194 ¯\_(ツ)_/¯

14 Years Ago

I suggest you first make sure whether or not IE6 support is really required. If it isn't a requirement, well, then don't spent time on it (I see your texts are in Dutch. IE6 support is fading fast in The Netherlands).

pritaeas 2,194 ¯\_(ツ)_/¯

14 Years Ago

In IE6 the #content { overflow: hidden; } causes the small height, so you'll need to find a fix for it. Not sure what happens if you just remove it.

Edited 14 Years Ago by pritaeas because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

K?! 0 Junior Poster in Training · Answer 1 · 2010-05-05T15:53:46+00:00

Well, It's a website for a primary school, so my guess is that there will be parents with older computers and software... And of course we want them to be able to view the website too...

K?! 0 Junior Poster in Training · Answer 2 · 2010-05-06T13:10:21+00:00

An image says more than a 1000 codes.

See the attachtments:
bspark_chorme.jpg is a screen of the site in Chrome
bspark_ie6.jpg is (obviously) a screen of the site in IE6

K?! 0 Junior Poster in Training · Answer 3 · 2010-05-06T15:32:00+00:00

oh great :) thanks so much :) It works,

Now I'll need to work around another problem (a previous version of the site already existed and for some content the "content area" is too small because they used pictures that were too wide). But hiding the overflow wasn't an ideal solution so anyways :)