Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.
By eyos on
I've just deloped a new theme for my drupal. However there seems to be something strange with the footer placement. In IE6 and older browsers the footer gets displayed correct (at the bottom of each page) and nicely moves down when content is overflowing. In IE7 however this is not the case the footer div remains at the same place on the page. So when the content section is big it overlaps with the footer. In this case the footer gets displayed on top of the content div. I've enclosed my page.tpl.php and CSS file, could anyone give some advice on what I'm doing wrong?
<?php
// give <body> tag a unique id depending on PAGE PATH
$uri_path = trim($_SERVER['REQUEST_URI'], '/');
$uri_bits = explode('/', $uri_path);
if ($uri_bits[0] == '') {
$body_id = 'front';
} else {
$body_id = str_replace('/','-', $uri_path); // use dashes to replace slashes in the URI
}
$body_id = 'page-'.$body_id; // add 'page-' to the front of the id
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php print $title; ?></title>
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
</head>
<body >
<p></p>
<br/>
<br/>
<div class="container" >
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.#version=5,0,30,0" height="80" width="180">
<param name="movie" value="http://www.lexicon.nl.sites.eyos.nl/themes/lexicon/images/logoanimatie.swf">
<param name="quality" value="best">
<param name="play" value="true">
<embed height="80" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" src="http://www.lexicon.nl.sites.eyos.nl/themes/lexicon/images/logoanimatie.swf" type="application/x-shockwave-flash" width="180" quality="best" play="true">
</object>
</div>
<div class="menu-container">
<?php print $sidebar_left ?>
</div>
<div class="content-container" id="<?php print $body_id ?>">
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php print $help ?>
<?php print $messages ?>
<?php print $content ?>
<table border="0" padding="0">
<tr>
<td width="300"><a id="plaatje_ol" href="onlineleren"></a></td><td><a id="plaatje_cedeo" href="http://www.cedeo.nl"></a></td>
</tr>
</table>
</div>
</div>
<div class="footer"><? print $footer_message ?><img src="http://www.lexicon.nl.sites.eyos.nl/themes/lexicon/images/bottom.gif" alt="" width="800" height="51" /></div>
<?php print $closure ?>
</body>
</html>
And the css...
/* $Id: style.css,v 1.13 2006/04/03 22:20:48 unconed Exp $ */
/*
** HTML elements
*/
body {
margin: 0;
padding: 0;
color: rgb(68, 68, 68);
background-color: #fff;
font: 12px Arial, Helvetica, Verdana, sans-serif;
}
tr.odd td, tr.even td {
padding: 0.3em;
}
body.mceContentBody {
background-image:none;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0.5em;
}
h1 {
font-size: 1.0em;
}
h2 {
font-size: 1.2em;
}
h3, h4, h5, h6 {
font-size: 1.1em;
}
p {
margin-top: 0.5em;
margin-bottom: 0.9em;
}
a {
text-decoration: none;
font-weight: normal;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #cc0000;
text-decoration: none;
}
ul.menu li {
padding-top: 3px;
padding-bottom: 3px;
color: #aa0000;
background-color: #ccccce;
margin: 0px 0px 2px 0px;
list-style-type: none;
}
ul.menu li ul li {
padding-top: 3px;
background-color: #f8cccb;
padding-bottom; 3px;
}
ul.menu li ul {
margin-top: 4px;
margin-bottom: -5px;
padding-top: 2px;
padding-bottom:0px;
background-color: #fff;
}
/*
ul.menu li ul a.active {
background-image:url(images/bluearrow.gif);
background-repeat:no-repeat;
padding:0 0 0 1.3em;
background-position:left;
}
ul.menu li a.active {
background-image:url(images/bluearrow.gif);
background-repeat:no-repeat;
padding:0 0 0 1.3em;
background-position:left;
}
*/
ul.menu li ul a:link {
font-weight: normal;
color: #000000;
}
ul.menu li ul a:visited {
font-weight: normal;
color: #000000;
}
ul.menu li ul a:hover {
font-weight: normal;
color: #ff0000;
}
ul.menu {
/*padding-top: 0px;*/
padding-left:0;
margin-left:0;
}
fieldset {
border: 1px solid #ccc;
}
pre {
background-color: #eee;
padding: 0.75em 1.5em;
border: 1px solid #ddd;
}
table {
/* make <td> sizes relative to body size! */
font-size: 1em;
}
.form-item label {
font-size: 1em;
color: #222;
}
.item-list .title {
font-size: 0.9em;
color: #bbb;
}
.links {
margin-bottom: 0em;
}
.comment .links {
margin-bottom: 0em;
}
/*
** Page layout blocks / IDs
*/
.menu {
text-align: right;
font: 12px Arial, Helvetica, Verdana, sans-serif;
}
.site-name {
margin: 0.6em 0em 0em 0em;
padding: 0em;
font-size: 2em;
}
.site-name a:link, .site-name a:visited {
color: #fff;
}
.site-name a:hover {
color: #369;
text-decoration: none;
}
.site-slogan {
font-size: 1em;
color: #eee;
display: block;
margin: 0em 0em 0em 0em;
font-style: italic;
font-weight: bold;
}
.breadcrumb {
margin-bottom: .5em;
font-size: 0.7em;
}
.messages {
background-color: #eee;
border: 1px solid #ccc;
padding: 0.3em;
margin-bottom: 1em;
}
.error {
border-color: red;
}
/*
** Common declarations for child classes of node, comment, block, box, etc.
** If you want any of them styled differently for a specific parent, add
** additional rules /with only the differing properties!/ to .parent .class.
** See .comment .title for an example.
*/
.title, .title a {
font-weight: bold;
font-size: 1.2em;
color: #111;
margin: 0 auto 0 auto; /* decrease default margins for h<x>.title */
}
.submitted {
color: #999;
font-size: 0.8em;
}
.links {
color: #999;
}
.links a {
font-weight: bold;
}
.block, .box {
padding: 0 0 1.5em 0;
}
.block {
border-bottom: none;
padding-bottom: 0.75em;
margin-bottom: 1.5em;
}
.block .title {
margin-bottom: .25em;
}
.box .title {
font-size: 1.1em;
}
.node {
margin: .5em 0 2em 0;
}
.sticky {
padding: .5em;
background-color: #eee;
border: solid 1px #ddd;
}
.node .content, .comment .content {
margin: .5em 0 .5em 0;
}
.node .taxonomy {
color: #999;
padding: 0;
}
.node .picture {
border: 1px solid #ddd;
float: right;
margin: 0.5em;
}
.comment {
border: 1px solid #abc;
padding: .5em;
margin-bottom: 1em;
}
.comment .title a {
font-size: 1.1em;
font-weight: none;
}
.comment .new {
text-align: right;
font-weight: bold;
font-size: 0.8em;
float: right;
color: red;
}
.comment .picture {
border: 1px solid #abc;
float: right;
margin: 0.5em;
}
/*
** Module specific styles
*/
.block-forum h3 {
margin-bottom: .5em;
}
.calendar a {
text-decoration: none;
}
.calendar td, .calendar th {
padding: 0.4em 0;
border-color: #888;
}
.calendar .day-today {
background-color: #69c;
}
.calendar .day-today a {
color: #fff;
}
.calendar .day-selected {
background-color: #369;
color: #fff;
}
.calendar .header-week {
background-color: #ccc;
}
.calendar .day-blank {
background-color: #ccc;
}
.calendar .row-week td a:hover {
background-color: #fff; color: #000;
}
.container {
width: 800px;
position: relative;
left: 50%;
margin-left: -400px; /* half the width of the div */
background-image: url(images/background.gif);
background-repeat: repeat-y;
}
.menu-container {
float: left;
margin-top: 31px;
margin-bottom: 100px;
width: 150px;
}
.content-container {
margin-top: 31px;
margin-left: 180px;
width: 450px;
height: auto;
height: 400px;
min-height: 400px;
background-image: url(images/trainerklein.jpg);
background-repeat: no-repeat;
}
/**>.content-container p {
margin-top: -400px;
}*/
.footer {
background-image: url(images/background.gif);
font: 10px Arial, Helvetica, Verdana, sans-serif;
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px; /* half the width of the div */
}
li#Communicatie {
background-color: #cfcbe4;
}
li#Talen {
background-color: #f8cccb;
}
.content-container#page-digisupport {
background-image: url(images/studenteklein.jpg);
}
.content-container#page-talen {
background-image: url(images/zalenmanklein.jpg);
}
.content-container#page-referenties {
background-image: url(images/accountmanklein.jpg);
}
.content-container#page-welkom a#plaatje_ol {
display: block;
width: 224px;
height: 41px;
background-image: url(images/onlinelogo.gif);
}
.content-container#page-welkom a#plaatje_cedeo {
display: block;
width: 107px;
height: 49px;
background-image: url(images/cedeologo.gif);
}
.content-container#page-front a#plaatje_ol {
display: block;
width: 224px;
height: 41px;
background-image: url(images/onlinelogo.gif);
}
.content-container#page-front a#plaatje_cedeo {
display: block;
width: 107px;
height: 49px;
background-image: url(images/cedeologo.gif);
}
.tabs{
font: 12px Arial;
font-weight: none;
}
ul.primary {
border-collapse: collapse;
padding: 0 0 0 1em;
white-space: nowrap;
list-style: none;
margin: 0px;
margin-top: 5px;
margin-bottom: 5px;
height: auto;
line-height: normal;
border-bottom: 1px solid #bbb;
}
ul.primary li {
display: inline;
}
ul.primary li a {
background-color: #ddd;
border-color: #bbb;
border-width: 1px;
border-style: solid solid none solid;
height: auto;
margin-right: 0.5em;
padding: 0 1em;
text-decoration: none;
}
ul.primary li.active a {
background-color: #fff;
border: 1px solid #bbb;
border-bottom: #fff 1px solid;
}
ul.primary li a:hover {
background-color: #eee;
border-color: #ccc;
border-bottom-color: #eee;
}
ul.secondary {
border-bottom: 1px solid #bbb;
padding: 0.1em 1em 0.5em 0em;
margin: 5px;
}
ul.secondary li {
display: inline;
padding: 0 1em;
border-right: 1px solid #ccc;
}
ul.secondary a {
padding: 0;
text-decoration: none;
}
ul.secondary a.active {
border-bottom: 0px solid #999;
font-weight: none;
}
Comments
Screenie
Hello again. I'm still very interested in some tips for dealing with this issue. I made a screen dump of the problem in IE and uploaded it to this location. Any thoughts on the problem?
Hello eyos
[edit]
oupsy