Wednesday, 21 August 2013

Content should easily fit in div (sticky footer), but is displayed with huge amounts of space in height

Content should easily fit in div (sticky footer), but is displayed with
huge amounts of space in height

I am making a sticky footer. The content should fit easily the height of
the div, but it doesn't. Huge spaces are displayed between lines, and rows
are also stretched (without me asking them to be) in height. Part of the
problem arises when I put at the start of the 'parenting' php file. When I
remove this declaration things are turning more as expected (yet not
completely). Does anyone know which fault I made in the CSS or HTML? Your
help is much appreciated!
This is the URL http://www.vergunningenboer.nl/1-ontwerp/01.php
This is the Sticky footer CSS:
#footer_container { bottom:0; height:260px; overflow:auto; left:0;
position:fixed; width:100%; }
#footer { line-height:260px; margin:0 auto; width:100%; opacity:1.0;
filter:alpha(opacity=100); }
This is the CSS for the table, the content for the footer:
table.icons { height:30px; cellpadding:2px; margin:0px 0px;
background-color:#000000; border:0px solid black; opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */ }
And this is the HTML of the table, the content of the footer:
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
<h2>ontwerp</h2>
<table cellpadding="0" class="icons">
<tr height="30px">
<td><a href="01.php" class="icons">
<img src="01.jpg" class="icons" width="70"></a></td>
<td>
etc.
<img src="17.jpg" class="icons" width="70"></a></td>
<td><a href="18.php" class="icons">
<img src="18.jpg" class="icons" width="70"></a></td>
<td></td>
<td></td>
</tr>
<tr colspan="20"><td><a
href="http://www.vergunningenboer.nl/2-vergunningstekeningen/01.php">Vergunningstekeningen</a></td></tr>
<tr colspan="20"><td><a
href="http://www.vergunningenboer.nl/3-bestektekeningen/01.php">Bestektekeningen</a></td></tr>
<tr colspan="20"><td><a
href="http://www.vergunningenboer.nl/4-uitvoering/01.php">Uitvoering</a></td></tr>
<tr colspan="20"><td><a
href="http://www.vergunningenboer.nl/5-opgeleverd/01.php">Opgeleverd</a></td></tr>
</table>
</div>
</div>
<!-- END: Sticky Footer -->

No comments:

Post a Comment