Topic: Forum height has unwanted effect on height of surrounding table cells
Hi there,
this is my first post here. I've searched the forums, but couldn't find any problem similar enough to help me.
I'm integrating punBB into an existing layout (using some tables and some css).
I've placed the punBB code into the table cell that is supposed to hold the main content of the site.
This all works fine, except for one problem, best demonstrated by these links:
How I would like to see it: http://www.masincontro.nl/dev/punbb/userlist.php
How shorter pages look: http://www.masincontro.nl/dev/punbb/viewforum.php?id=1
(1024x786 res. on FireFox 1.06)
These linked files will change as I try out suggestions from this forum,
so if you don't see anything wrong, that might be it.
See how the black 'bars' at the sides of the forum stop where the forum ends at the bottom of the page?
I would like the black on the sides to continue to the bottom and under the forum should be white.
My main.tpl looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="<pun_content_direction>">
<head>
<link rel="stylesheet" type="text/css" href="http://www.masincontro.nl/dev/style1.css" />
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
</head>
<body>
<table class="content">
<tr class="top">
<td class="side"></td>
<td width="740"></td>
<td width="*"></td>
</tr>
<tr height="*" bgcolor="black">
<td class="side"></td>
<td class="main"><div id="punwrap">
<div id="pun<pun_page>" class="pun">
<div id="brdheader" class="block">
<div class="box">
<div id="brdtitle" class="inbox">
<pun_title>
<pun_desc>
</div>
<pun_navlinks>
<pun_status>
</div>
</div>
<pun_announcement>
<pun_main>
<pun_footer>
</div>
</div></td>
<td width="*" bgcolor="black"></td>
</tr>
</table>
<div id="tabs">
<img src="http://www.masincontro.nl/dev/tab_closed.gif" /><img src="http://www.masincontro.nl/dev/tab_open.gif" /><img src="http://www.masincontro.nl/dev/tab_closed.gif" /><img src="http://www.masincontro.nl/dev/tab_closed.gif" /><img src="http://www.masincontro.nl/dev/tab_closed.gif" />
</div>
<img id="logo_small" src="http://www.masincontro.nl/dev/logo_small.gif" />
<div id="M" class="MAS">Maastrichtse</div>
<div id="A" class="MAS">Academische</div>
<div id="S" class="MAS">Schermvereniging</div>
<div id="tab1" class="tabtext">Information</div>
<div id="tab2" class="tabtext">Forum</div>
<div id="tab3" class="tabtext">Calendar</div>
<div id="tab4" class="tabtext">Photogallery</div>
<div id="tab5" class="tabtext">Downloads</div>
</body>
</html>And the mentioned style1.css looks like this:
body
{
background-color: black;
margin: 0px 0px 0px 0px;
}
table.content
{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
width: 100%;
height: 100%;
border-collapse: collapse;
}
tr.top
{
height: 180px;
background-color: black;
}
td.main
{
background-color: white;
vertical-align: top;
}
td.side
{
width: 30px;
}
div#tabs
{
position: absolute;
top: 150px;
left: 27px;
}
img#logo_small
{
position: absolute;
top: 3px;
left: 50px;
}
div.MAS
{
position: absolute;
font-size: 40px;
color: white;
font-family: arial, verdana
}
div#M
{
top: 20px;
left: 300px;
}
div#A
{
top: 55px;
left: 350px;
}
div#S
{
top: 90px;
left: 400px;
}
div.tabtext
{
position: absolute;
top: 155px;
font-size: 20px;
color: black;
font-family: arial, verdana
}
div#tab1
{
left: 50px;
}
div#tab2
{
left: 200px;
}
div#tab3
{
left: 350px;
}
div#tab4
{
left: 500px;
}
div#tab5
{
left: 650px;
}If anyone can point me in the right direction, I would really appreciate that.
Things I've tried so far (unsuccesfully):
- Adding height="100%" to all the pun divs in the .tpl
- Trying to add a z-index: +1; to the table cells on the sides
- Searching base.css for any height properties
Thanks in advance,
Erik
P.S. If someone can help me make the site less messy (like by replacing the table by css) that would be appreciated aswell 