Final change to template, top of the page has a white margin.. Removal?

[Kennyg]

Hi

I've been customising the subsilver template to match my websites forum

http://www.clubcalibra.net/

I've almost got it perfect.... bar two minor issues

Gallery is found here http://www.clubcalibra.net/gallery/index.php

There is a white margin at the top of the page - unlike the forum - I wish to remove this, firstly to match the header of the forum, but also as I have a couple of members with resolution problems and this will assist in bringing the body of the page up slightly

Also - something which I think is probably nothing to do with coppermine - but he header image and the background image of the table don't line up perfectly - the horizontal line is about 2px off

If anyone could help - with the top margin especially I would really appreciate it

Thanks

The code for my template and style sheet and theme is :

Theme.php

Code Select Expand

<?php
/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2005 Coppermine Dev Team
  v1.1 originally written by Gregory DEMAR

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  ********************************************
  Coppermine version: 1.4.3
  $Source: /cvsroot/coppermine/stable/themes/subsilver/theme.php,v $ $
  $Revision: 1.3.1 $
  $Author: gaugau $
  $Date: 2006-01-04 11:32:00 $
***********************************************/

// ------------------------------------------------------------------------- //
// This theme has had all redundant CORE items removed                       //
// ------------------------------------------------------------------------- //

define('THEME_HAS_RATING_GRAPHICS', 1);
define('THEME_IS_XHTML10_TRANSITIONAL',1);
define('THEME_HAS_NO_SYS_MENU_BUTTONS', 1);
define('THEME_HAS_NO_SUB_MENU_BUTTONS', 1);

// HTML template for main menu
$template_sys_menu = <<<EOT
                <span class="topmenu">

<!-- BEGIN home -->
                      <a href="http://www.clubcalibra.net/ucp.php?i=pm&mode=compose&u=5t" title="PM Admin"><img src="themes/subsilver/images/icon_mini_house.gif" alt="" />Request Album</a>&nbsp;
                      <a href="http://www.clubcalibra.net/index.php" title="{HOME_TITLE}"><img src="themes/subsilver/images/icon_mini_house.gif" alt="" />Back To forum</a>&nbsp;
                      <a href="{HOME_TGT}" title="{HOME_TITLE}"><img src="themes/subsilver/images/icon_mini_house.gif" alt="" />Gallery {HOME_LNK}</a>&nbsp;
<!-- END home -->

<!-- BEGIN my_gallery -->
                        <a href="{MY_GAL_TGT}" title="{MY_GAL_TITLE}"><img src="themes/subsilver/images/icon_mini_profile.gif" alt="">{MY_GAL_LNK}</a>&nbsp;
<!-- END my_gallery -->

<!-- BEGIN allow_memberlist -->
                        <a href="{MEMBERLIST_TGT}" title="{MEMBERLIST_TITLE}"><img src="themes/subsilver/images/icon_mini_members.gif" alt="">{MEMBERLIST_LNK}</a>&nbsp;
<!-- END allow_memberlist -->

<!-- BEGIN my_profile -->
                        <a href="{MY_PROF_TGT}"><img src="themes/subsilver/images/icon_mini_profile.gif" alt="">{MY_PROF_LNK}</a>&nbsp;
<!-- END my_profile -->

<!-- BEGIN faq -->
                        <a href="{FAQ_TGT}" title="{FAQ_TITLE}"><img src="themes/subsilver/images/icon_mini_faq.gif" alt="">{FAQ_LNK}</a>&nbsp;
<!-- END faq -->

<!-- BEGIN enter_admin_mode -->
                        <a href="{ADM_MODE_TGT}" title="{ADM_MODE_TITLE}"><img src="themes/subsilver/images/icon_mini_message.gif" alt="">{ADM_MODE_LNK}</a>&nbsp;
<!-- END enter_admin_mode -->

<!-- BEGIN leave_admin_mode -->
                        <a href="{USR_MODE_TGT}" title="{USR_MODE_TITLE}"><img src="themes/subsilver/images/icon_mini_message.gif" alt="">{USR_MODE_LNK}</a>&nbsp;
<!-- END leave_admin_mode -->

<!-- BEGIN upload_pic -->
                        <a href="{UPL_PIC_TGT}" title="{UPL_PIC_TITLE}"><img src="themes/subsilver/images/icon_mini_message.gif" alt="">{UPL_PIC_LNK}</a>&nbsp;
<!-- END upload_pic -->

<!-- BEGIN register -->
                        <a href="{REGISTER_TGT}" title="{REGISTER_TITLE}"><img src="themes/subsilver/images/icon_mini_register.gif" alt="">{REGISTER_LNK}</a>&nbsp;
<!-- END register -->

<!-- BEGIN login -->
                       <!--  <a href="{LOGIN_TGT}"><img src="themes/subsilver/images/icon_mini_login.gif" alt="">{LOGIN_LNK}</a> -->
<!-- END login -->

<!-- BEGIN logout -->
                      <!--  <a href="{LOGOUT_TGT}"><img src="themes/subsilver/images/icon_mini_login.gif" alt="">{LOGOUT_LNK}</a> -->
<!-- END logout -->
EOT;

// HTML template for sub_menu
$template_sub_menu = <<<EOT
<!-- BEGIN custom_link -->
     <a href="{CUSTOM_LNK_TGT}" title="{CUSTOM_LNK_TITLE}"><img src="themes/subsilver/images/icon_mini_custom.gif" alt="" />{CUSTOM_LNK_LNK}</a>&nbsp;
<!-- END custom_link -->

<!-- BEGIN album_list -->
     <a href="{ALB_LIST_TGT}" title="{ALB_LIST_TITLE}"><img src="themes/subsilver/images/icon_mini_groups.gif" alt="" />&nbsp;&nbsp;{ALB_LIST_LNK}</a>&nbsp;
<!-- END album_list -->

<a href="{LASTUP_TGT}"><img src="themes/subsilver/images/icon_mini_message.gif" alt="" />&nbsp;{LASTUP_LNK}</a>&nbsp;
<a href="{LASTCOM_TGT}"><img src="themes/subsilver/images/icon_mini_message.gif" alt="" />&nbsp;{LASTCOM_LNK}</a>&nbsp;<br /><br />
<a href="{TOPN_TGT}"><img src="themes/subsilver/images/icon_mini_message.gif" alt="" />&nbsp;{TOPN_LNK}</a>&nbsp;
<a href="{TOPRATED_TGT}"><img src="themes/subsilver/images/icon_mini_message.gif" alt="" />&nbsp;{TOPRATED_LNK}</a>&nbsp;
<a href="{FAV_TGT}"><img src="themes/subsilver/images/icon_mini_message.gif" alt="" />&nbsp;{FAV_LNK}</a>&nbsp;
<a href="{SEARCH_TGT}"><img src="themes/subsilver/images/icon_mini_search.gif" alt="" />&nbsp;{SEARCH_LNK}</a><br /><br />
EOT;

// Function to start a 'standard' table
function starttable($width = '-1', $title = '', $title_colspan = '1')
{
    global $CONFIG;

    if ($width == '-1') $width = $CONFIG['picture_table_width'];
    if ($width == '100%') $width = $CONFIG['main_table_width'];
    echo <<<EOT

<!-- Start standard table -->
<table align="center" width="$width" cellspacing="1" cellpadding="0" class="maintable">

EOT;
    if ($title) {
        echo <<<EOT
        <tr>
                <td class="tableh1" colspan="$title_colspan">$title</td>
        </tr>

EOT;
 // Template used for tabbed display
$template_tab_display = array('left_text' => '<td width="100%" align="left" valign="middle" class="tableh1_compact" style="white-space: nowrap"><strong>{LEFT_TEXT}</strong></td>' . "\n",
    'tab_header' => '',
    'tab_trailer' => '',
    'active_tab' => '<td><img src="images/spacer.gif" width="1" height="1" alt="" /></td>' . "\n" . '<td align="center" valign="middle" class="tableb_compact"><strong>%d</strong></td>',
    'inactive_tab' => '<td><img src="images/spacer.gif" width="1" height="1" alt="" /></td>' . "\n" . '<td align="center" valign="middle" class="navmenu"><a href="{LINK}"><strong>%d</strong></a></td>' . "\n"
    );
    }
}

function endtable()
{
    echo <<<EOT
</table>

<!-- End standard table -->

EOT;
}

?>


style.css

Code Select Expand

/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2005 Coppermine Dev Team
  v1.1 originaly written by Gregory DEMAR

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
 
  This template based on the original subSilver Theme for phpBB version 2+
  Created by subBlue design
  http://www.subBlue.com
  ********************************************
  Coppermine version: 1.4.3
  $Source: /cvsroot/coppermine/devel/themes/subsilver/style.css,v $
  $Revision: 1.3 $
  $Author: gaugau $
  $Date: 2005/10/25 02:17:01 $
 
**********************************************/

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;
}

body  {
    background-color : #e5e5e5;
    padding-top : 0px;
}

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}


And template.html

Code Select Expand

<!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>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
      <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> 
       <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>


I'm guessing my coding is a little on the amature side - but I'm getting there...

[Kennyg]

Just noticed a missing table tag in the template.html file

updated one is -

Code Select Expand

<!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>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<table align="center" width="98%" >
      <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>     
     
       <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>


[Kennyg]

Also the white space seems more prominant on IE rather than firefox...

[Joe Carver]

Please try not to overpost with too much info. You should  .zip a theme and also allow time for people to look at your problem. With that said.....

Use Developer Tools in IE and/or search for Firebug - both of these will tell you a lot about your pages.

Check your text editor - make sure you are not using UTF with BOM.
See this link for Tools Recommended by the Developers

I am now trying an editor called Notepad++, it also seems to work well.

[Joachim Müller]

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:

Code Select Expand

<!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:

Code Select Expand

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;
}

[Kennyg]

Hi

Sorry about the flux of info - I realised I missed a couple of things and couldn't edit the original post thanks for the link!

And many thanks to Joachim, gap look spot on now, thanks for the nesting tip, can see where I went wrong am getting there!