The white bar on top of the banner is caused by the margin-top and padding-top attributes assigned to the class topbkg.
Additionally, the margin and padding attributes for the html and the body tag are not zero out of the box.
Further, the nesting of your HTML table is invalid. Needs improvement, but here is a slight correction already:
template.html:<!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" lang="fr" xml:lang="fr" dir="{LANG_DIR}">
<head>
<title>{TITLE}</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<link rel="stylesheet" href="themes/subsilver/style.css" media="screen" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<table align="center" width="98%" >
<tr>
<td>
<table align="center" width="98%" class="topbkg" >
<tr>
<td>
<td align="center" border="0" valign="middle"><a href="http://www.clubcalibra.net/"><img src="http://www.clubcalibra.net/styles/subsilver2/imageset/phpbb2_logo.jpg"</a></td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="border: 1px solid #666666; background-color: #ffffff;">
<table align="center" width="98%" cellspacing="0" cellpadding="0">
<tr>
<td><br /> {SUB_MENU}
</td>
<td><div align="right">{SYS_MENU}</div></td>
</tr>
</table>
<table width="98%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
{ADMIN_MENU}
{GALLERY}
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
style.css:
html, body {
/* scroll bar colours for IE only*/
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
margin:0px;
padding:0px;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
body {
background-color : #FFFFFF;
}
font, th, td, p {
font-family : Verdana, Arial, Helvetica, sans-serif;
}
th {
color: #006699;
font-size: 10px;
font-weight : bold;
height: 28px;
background-image: url(images/cellpic3.gif);
border: 1px solid #ffffff;
}
a {
color: #006699;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #006699;
}
hr {
height : 1px;
border : 1px solid #d1d7dc;
border-top-width : 1px;
}
img { border: none; }
table {
font-size : 10px;
border: none;
}
h1 {
font-weight : bold;
font-size : 22px;
font-family : "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
line-height : 120%;
color : #000000;
margin : 2px;
}
h2 {
font-family : Arial, Helvetica, sans-serif;
font-size : 18px;
margin : 0;
}
h3 {
font-weight : normal;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
margin : 2px;
}
p {
font-family : Arial, Helvetica, sans-serif;
font-size : 100%;
margin : 2px 0;
}
ul {
margin-left : 5px;
padding : 0;
}
li {
margin-left : 10px;
margin-top : 0px;
margin-bottom : 4px;
padding : 0;
list-style-position : outside;
list-style-type : disc;
}
.textinput {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 100%;
border : 1px solid #d1d7dc;
padding-right : 3px;
padding-left : 3px;
}
.listbox {
font-family : Verdana, Arial, Arial, Helvetica, sans-serif;
font-size : 100%;
border : 1px solid #d1d7dc;
vertical-align : middle;
}
.button {
font-family : Arial, Helvetica, sans-serif;
font-size : 100%;
border : 1px solid #005d8c;
background-image : url(images/button_bg.gif);
background-position : 50% 100%;
}
.comment_button {
font-family : Arial, Helvetica, sans-serif;
font-size : 85%;
border : 1px solid #005d8c;
background-image : url(images/button_bg.gif);
background-position : 50% 100%;
padding-left : 3px;
padding-right : 3px;
}
.radio {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 100%;
vertical-align : middle;
}
.checkbox {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 100%;
vertical-align : middle;
}
.bblink a {
color : #0033cc;
text-decoration : none;
}
.bblink a:hover {
color : #0033cc;
text-decoration : underline;
}
.maintable {
border: 1px #006699 solid;
background-color: #ffffff;
margin-top : 0px;
margin-bottom : 1px;
}
.tableh1 {
padding-top : 1px;
padding-right : 10px;
padding-bottom : 3px;
padding-left : 10px;
color : #006699;
font-size : 10px;
font-weight : bold;
/*background-color : #006699;*/
height : 25px;
background-image : url(images/cellpic3.gif);
text-align: center;
}
.tableh1_compact {
background-image: url(images/cellpic1.gif);
color : #006699;
padding-top : 2px;
padding-right : 5px;
padding-bottom : 2px;
padding-left : 5px;
}
.tableh2, .catrow_noalb {
background-color: #d1d7dc;
color : #000000;
padding-top : 3px;
padding-right : 10px;
padding-bottom : 3px;
padding-left : 10px;
text-align: left;
}
.tableh2_compact {
background : #d1d7dc;
color : #000000;
padding-top : 2px;
padding-right : 5px;
padding-bottom : 2px;
padding-left : 5px;
}
.tableb, .catrow {
background : #efefef;
padding-top : 3px;
padding-right : 10px;
padding-bottom : 3px;
padding-left : 10px;
text-align: left;
}
.display_media {
background-color: #efefef;
padding: 3px 10px 3px 10px;
}
.tableb_compact {
background : #efefef;
padding-top : 2px;
padding-right : 5px;
padding-bottom : 2px;
padding-left : 5px;
text-align: left;
}
.tablef {
background-color: #d1d7dc;
padding: 5px;
}
.album_stat {
font-size : 85%;
margin : 5px 0;
}
.thumb_title {
font-weight : bold;
font-size : 80%;
padding : 2px;
display : block;
}
.thumb_filename {
font-size: 80%;
display: block;
}
.thumb_caption {
font-size : 80%;
padding : 1px;
display : block;
}
.thumb_caption a {
text-decoration : underline;
color : #000000;
}
.thumb_num_comments {
font-weight : normal;
font-size : 80%;
padding : 2px;
font-style : italic;
display : block;
}
.user_thumb_infobox {
margin-top : 1px;
margin-bottom : 1px;
}
.user_thumb_infobox th {
color: #006699;
font-size: 11px;
font-weight : bold;
height: 28px;
background-image: url(images/cellpic3.gif);
border: 1px solid #ffffff;
margin-top : 1px;
margin-bottom : 1px;
text-align : center;
}
.user_thumb_infobox td {
font-size : 80%;
margin-top : 1px;
margin-bottom : 1px;
text-align : center;
}
.user_thumb_infobox a {
text-decoration : none;
color : #000000;
}
.user_thumb_infobox a:hover {
color : #000000;
text-decoration : underline;
}
.sortorder_cell {
background: transparent;
color : #ffffff;
padding : 0;
margin : 0;
}
.sortorder_options {
font-family : Verdana, Arial, Helvetica, sans-serif;
background-color: transparent;
color : #ffffff;
padding : 0;
margin : 0;
font-weight : normal;
font-size: 0.7em;
white-space : nowrap;
}
.navmenu {
font-family : Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
font-size : 100%;
font-weight : bold;
background-image: url(images/cellpic3.gif);
border: none;
}
.navmenu img {
margin-top : 1px;
margin-right : 5px;
margin-bottom : 1px;
margin-left : 5px;
}
.navmenu a {
position : relative;
display : block;
padding-top : 0px;
padding-right : 5px;
padding-bottom : 2px;
padding-left : 5px;
text-decoration : none;
color: #006699;
}
.navmenu a:hover {
background-color: #efefef;
text-decoration: none;
color: #DD6900;
}
.admin_menu_thumb {
font-family : Arial, Helvetica, sans-serif;
font-size : 85%;
border : 1px solid #005d8c;
background-image : url(images/button_bg.gif);
background-position : 50% 100%;
color : #000000;
font-weight : bold;
margin-top : 0;
margin-bottom : 0;
width : 85px;
}
.admin_menu_thumb a {
color : #000000;
text-decoration : none;
display : block;
position : relative;
padding-top : 0px;
padding-bottom : 1px;
padding-left : 10px;
padding-right : 10px;
}
.admin_menu_thumb a:hover {
color: #000000;
text-decoration : underline;
}
.admin_menu {
font-family : Arial, Helvetica, sans-serif;
font-size : 85%;
border : 1px solid #005d8c;
background-image : url(images/button_bg.gif);
background-position : 50% 100%;
color : #000000;
margin-top : 0;
margin-bottom : 0;
text-align : center;
}
.admin_menu a {
color : #006699;
text-decoration : none;
display : block;
position : relative;
padding-top : 1px;
padding-bottom : 5px;
padding-left : 2px;
padding-right : 2px;
}
.admin_menu a:hover {
color : #006699;
text-decoration : underline;
}
td #admin_menu_anim {
background-image : url(images/button_bg_anim.gif);
}
.comment_date {
color : #5f5f5f;
font-size : 90%;
vertical-align : middle;
}
.image {
border-style : solid;
border-width : 1px;
border-color : #000000;
margin : 2px;
}
.imageborder {
border : 1px solid #000000;
background-color : #ffffff;
margin-top : 30px;
margin-bottom : 30px;
}
.thumbnails {
background : #efefef;
padding : 5px;
}
.footer {
font-size : 9px;
}
.footer a {
text-decoration : none;
color : #000000;
}
.footer a:hover {
color : #000000;
text-decoration : underline;
}
.statlink {
color: #006699;
}
.statlink a {
color: #006699;
text-decoration: none;
}
.statlink a:hover {
color : #ffffff;
text-decoration : underline;
}
.alblink {
font-weight : bold;
font-size : 10px;
color : #006699;
}
.alblink a {
text-decoration : none;
color : #006699;
}
.alblink a:hover {
text-decoration : underline;
color : #006699;
}
.catlink {
font-weight : bold;
font-size : 10px;
color : #006699;
display : block;
margin-bottom : 2px;
}
.catlink a {
text-decoration : none;
color : #006699;
}
.catlink a:hover {
text-decoration : underline;
color : #006699;
}
.topmenu {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
line-height : 16px;
display : block;
margin-bottom : 2px;
margin-left : 5px;
margin-right : 5px;
}
.topmenu a {
text-decoration : none;
color : #006699;
}
.topmenu a:hover {
text-decoration : none;
color : #006699;
}
.topmenu img {
border : 0;
margin : 0 3px 0 5px;
}
.img_caption_table {
border: medium;
background-color : #ffffff;
width : 100%;
margin : 0;
}
.img_caption_table th {
color: #006699;
font-size: 10px;
font-weight: bold;
padding-top : 4px;
padding-right : 10px;
padding-bottom : 4px;
padding-left : 10px;
height: 28px;
background-image: url(images/cellpic3.gif);
border: 1px solid #ffffff;
}
.img_caption_table td {
background : #efefef;
padding-top : 6px;
padding-right : 10px;
padding-bottom : 6px;
padding-left : 10px;
border-top : 1px solid #ffffff;
}
.debug_text {
border : medium none #bdbebd;
background-color : #efefef;
width : 100%;
margin : 0;
}
.clickable_option {
border-bottom : 1px dotted blue;
}
.listbox_lang {
color : #000000;
background-color : #d1d7dc;
border : 1px solid #d1d7dc;
font-size : 80%;
font-family : Arial, Helvetica, sans-serif;
vertical-align : middle;
}
#vanity a {
display:block;
width:57px;
height:20px;
margin: 3px 20px;
}
#vanity img {border:0}
#v_php {float:left;background-image:url(../../images/powered-php.gif);}
#v_php:hover {background-image:url(../../images/h_powered-php.gif);}
#v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
#v_mysql:hover {background-image:url(../../images/h_powered-mysql.gif);}
#v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
#v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
#v_css {float:right;background-image:url(../../images/valid-css.gif);}
#v_css:hover{background-image:url(../../images/h_valid-css.gif);}
.topbkg {
background: #D9DFE4 url(images/cellpic_bkg.jpg) repeat-x;
margin-top: 0px;
margin-bottom: 10px;
padding: 0px 0px;
border-bottom: 1px solid #4787A7;
min-height: 120px;
height: auto !important;
height: 120px;
padding: 0;
}
.topnav {
font-size:10px;
background: #e5ebf3 url(images/cellpic_nav.gif) repeat-x;
color:#dd6900;
height:21px;
white-space:nowrap;
border: 0px solid #91a0ae;
border-width: 1px 0px 1px 0px;
}