Footer in rhuk_solarflare distorted

floorman · 06.03.2005, 18:08

Hi mambers,

I'm not able to solve this little annoyance in my edited rhuk_solarflare template. Please, see the attached picture to see it. It displays right only after the page refresh. Also it seems to appear only in Firefox (my version is 1.0 PR).

Somebody got a clue?

doctorj · 07.03.2005, 02:49

This can somtimes happen when your Table in HTML code are set to Percentages instead of fixed values. For example:

<table width="50%">

try using pixel vaules (you will have to play with then until you like them)

<table width="450">

Maybe this help you. I would have to see the code to make a better determination.

Good Luck

floorman · 07.03.2005, 09:33

Thanks for the hint doctorj. However it didn't work. Below you will find my codes (index.php and .css of the template).

*** index.php ***

PHP Code:

  <?php

defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );

// needed to seperate the ISO number from the language file constant _ISO

$iso = split( '=', _ISO );

// xml prolog

echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';

?>

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

<?php mosShowHead(); ?>

<?php

if ( $my->id ) {

    initEditor();

}

$collspan_offset = ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) ) ? 2 : 1;

//script to determine which div setup for layout to use based on module configuration

$user1 = 0;

$user2 = 0;

$sandbox_area = 0;

// banner combos

 
//user1 combos

if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) == 2) {

    $user1 = 2;

    $user2 = 2;

} elseif ( mosCountModules( 'user1' ) == 1 ) {

    $user1 = 1;

} elseif ( mosCountModules( 'user2' ) == 1 ) {

    $user2 = 1;

}

 
//right based combos

if ( mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {

    $sandbox_area = 2;

} else {

    $sandbox_area = 1;

    $user1 = $user1 == 1 ? 3 : 4;

    $user2 = $user2 == 1 ? 3 : 4;

}

?>

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

<link href="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare/css/template_css.css" rel="stylesheet" type="text/css"/>

<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico"/>

</head>

<body>

 
<div align="center">

    <div id="main_outline">

        <div id="pathway_outline">

            <div id="pathway">

            <?php mosPathWay(); ?>

            </div>

            <!-- <div id="buttons">

            <?php mosLoadModules ( 'user3', -1); ?>

            </div> -->

        </div>

        <div id="search">

        <?php mosLoadModules ( 'user4', -1 ); ?>

        </div>

        <div class="clr"></div>

        <div id="header_area">

            <div id="header">

            <!-- <img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare/images/header.gif" /> -->

            </div>

            <!-- <div id="top_outline">

            <?php

            if ( mosCountModules( 'top' ) ) {

                mosLoadModules ( 'top' );

            } else {

                ?>

                <span class="error">Top Module Empty</span>

                <?php

            }

            ?>

            </div> -->

        </div>

        <div id="left_outline">

            <div id="left">

            <?php mosLoadModules ( 'left' ); ?>

            </div>

        </div>

        <div id="content_area">

            <div id="content">

            <?php

            if ( mosCountModules ('banner') ) {

                ?>

                <div id="banner_area">

                    <!-- <div id="banner">

                <img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare/images/advertisement.png" alt="advertisement.png, 0 kB" title="advertisement" border="0" height="8" width="468"/><br />

                    <?php mosLoadModules( 'banner', -1 ); ?>

                    </div>

                    <div id="poweredby">

                    <img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare/images/powered_by.png" alt="powered_by.png, 1 kB" title="powered_by" border="0" height="68" width="165"/><br />

                    </div> -->

                </div>

                <?php

            }

            if ( mosCountModules( 'right' ) and ( empty ($_REQUEST['task'] ) || $_REQUEST['task']!='edit' ) ) {

                ?>

                <div id="right_outline">

                    <div id="right">

                    <?php mosLoadModules ( 'right' ); ?>

                    </div>

                </div>

                <?php

            }

            ?>

            <div id="sandbox_area_<?php echo $sandbox_area ?>">

                <div class="sandbox_area">

                    <?php

                    if ( mosCountModules( 'user1' ) ) {

                        ?>

                        <div id="user1_<?php echo $user1; ?>">

                            <div class="user1_outline">

                            <?php mosLoadModules ( 'user1' ); ?>

                            </div>

                        </div>

                        <?php

                    }

                    if (mosCountModules( 'user2' )) {

                        ?>

                        <div id="user2_<?php echo $user2; ?>">

                            <div class="user2_outline">

                            <?php mosLoadModules ( 'user2' ); ?>

                            </div>

                        </div>

                        <?php

                    }

                    ?>

                    <div class="clr"></div>

                    <div class="content_outline">

                    <?php mosMainBody(); ?>

                    </div>

                    <div class="clr"></div>

                </div>

            </div>

        </div>

    </div>

    <div class="clr"></div>

    </div>

</div>

<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>

<?php mosLoadModules( 'debug', -1 );?>

</body>

</html>

floorman · 07.03.2005, 09:40

*** template_css.css ***
/* CSS Document */

.clr {
clear: both;
}

#main_outline {
width: 802px !important;
width: 808px;
/** height: 100%; */
border: 1px solid #ffffff;
padding: 2px;
background: #0066CC;
}

#pathway_outline {
width: 633px !important;
width: 635px;
float: left;
border: 1px solid #ffffff;
margin-bottom: 2px !important;
margin-bottom: -2px;
}

#pathway {
float: left;
padding: 4px 3px 3px 5px;
}

#buttons {
float: right;
margin: 0px;
padding: 0px;
width: 50%;
}

ul#mainlevel-nav {
list-style: none;
padding: 0;
margin: 0;
font-size: 11px;
}

ul#mainlevel-nav li {
display: block;
background-image: none;
padding-left: 0px;
padding-right: 0px;
float: right;
margin: 0px;
width: auto !important;
width: 15%;
font-size: 11px;
line-height: 21px;
white-space: nowrap;
border-left: 1px solid #ffcc00;
}

ul#mainlevel-nav li a {
display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: #ffffff;
background: transparent;
}

#buttons>ul#mainlevel-nav li a {
width: auto;
}

ul#mainlevel-nav li a:hover {
color: #003366;
background: #ffcc00;
}

#search {
float: right;
border: 1px solid #ffffff;
padding: 0px;
width: 163px !important;
width: 165px;
height: 21px !important;
height: 23px;
overflow: hidden;
}

#search .inputbox {
border: 0px;
padding: 4px 3px 3px 7px !important;
padding: 3px 3px 3px 5px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
height: 17px !important;
height: 19px;
width: 153px !important;
width: 159px;
color: #003366;
}

#header_area {
width: 802px !important;
text-align: left;
border: 0px;
margin: 0px;
}

#header {
float: left;
padding-left: 2px;
margin: 0px;
width: 800px;
height: 92px;
background: url(../images/ens_header.gif) no-repeat;
}

#top_outline {
float: left;
border: 1px solid #ffcc00;
padding: 2px;
margin-left: 2px;
float: left;
overflow: hidden;
height: 144px !important;
height: 150px;
width: 159px !important;
width: 165px;
}

#left_outline {
margin-top: 2px;
border: 1px solid #ffffff;
padding: 2px;
float: left;
width: 159px !important;
width: 165px;
background: #006699;
}

#content_area {
padding: 0px;
margin-top: 0px;
margin-left: 2px;
/** border: 1px solid #ffffff; */
float: left;
width: 635px;
/** height: 100%; */
}

/** #banner_area {
width: 635px;
margin-top: 2px;
margin-bottom: 0px !important;
margin-bottom: -3px;
}

#banner {
float: left;
padding: 0px;
width: 468px;
}

#poweredby {
float: left;
margin-left: 2px;
} */

#sandbox_area_2 .sandbox_area {
float: left;
margin-top: 2px;
width: 468px;
}

#sandbox_area_1 .sandbox_area {
float: left;
margin-top: 2px;
width: 635px;
}

#right_outline {
border: 1px solid #ffffff;
margin-top: 2px;
float: right;
padding: 2px;
width: 159px !important;
width: 165px;
background: #006699;
}

/** with both user1 and user2 visible **/
#user1_2 .user1_outline {
width: 227px !important;
width: 233px;
border: 1px solid #ffffff;
float: left;
margin: 0px;
padding: 2px;
margin-bottom: 2px;
background: #003366;
}

#user2_2 .user2_outline {
width: 227px !important;
width: 233px;
border: 1px solid #ffffff;
float: right;
margin-left: 2px;
margin-bottom: 2px;
padding: 2px;
background: #003366;
}

/** with either user1 or user2 visible **/
#user1_1 .user1_outline {
width: 462px !important;
width: 468px;
border: 1px solid #ffffff;
float: left;
margin: 0px;
padding: 2px;
margin-bottom: 2px;
}

#user2_1 .user2_outline {
width: 462px !important;
width: 468px;
border: 1px solid #ffffff;
float: right;
margin-bottom: 2px;
padding: 2px;
}

/** based on 100% content width **/
#user1_4 .user1_outline {
width: 311px !important;
width: 317px;
border: 1px solid #ffffff;
float: left;
margin: 0px;
padding: 2px;
margin-bottom: 2px;
}

#user2_4 .user2_outline {
width: 310px !important;
width: 316px;
border: 1px solid #ffffff;
float: right;
margin-left: 2px;
margin-bottom: 2px;
padding: 2px;
}

/** with either user1 or user2 visible **/
#user1_3 .user1_outline {
width: 629px !important;
width: 635px;
border: 1px solid #ffffff;
float: left;
margin: 0px;
padding: 2px;
margin-bottom: 2px;
}

#user2_3 .user2_outline {
width: 629px !important;
width: 635px;
border: 1px solid #ffffff;
float: right;
margin-bottom: 2px;
padding: 2px;
}

/** adjust content area based on right nav **/
#sandbox_area_2 .content_outline {
width: 462px !important;
width: 468px;
border: 1px solid #ffffff;
padding: 2px;
}

#sandbox_area_1 .content_outline {
width: 629px !important;
width: 635px;
border: 1px solid #ffffff;
padding: 2px;
background: #0066CC;
}

#active_menu {
color:#ffcc00;
font-weight: bold;
}

a#active_menu:hover {
color: #003366;
}

/** .maintitle {
color: #ffffff;
font-size: 40px;
padding-left: 15px;
padding-top: 20px;
} */

.error {
font-style: italic;
text-transform: uppercase;
padding: 5px;
color: #ffcc00;
font-size: 14px;
font-weight: bold;
}

/** old stuff **/

.back_button {
float: left;
font-size: 11px;
font-weight: bold;
margin-top: 15px;
margin-bottom: 10px;
border: 1px solid #ffffff;
width: 40px;
padding: 2px;
}

.pagenav {
text-align: center;
font-size: 11px;
font-weight: bold;
border: 1px solid #ffcc00;
width: auto;
padding: 2px;
margin: 1px;
}

/** .pagenavbar {
padding: 5px;
float: left;
}*/

#footer {
text-align: center;
padding: 3px;
}

ul {
margin: 0;
padding: 0;
list-style: none;
}

li {
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.gif);
background-repeat: no-repeat;
background-position: 0px 3px;
}

td {
text-align: left;
font-size: 11px;
}

body {
margin: 15px;
/** height: 100%; */
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
background: #003366;
}

/* mambo core stuff */
a:link, a:visited {
color: #ffcc00; text-decoration: none;
font-weight: bold;
}

a:hover {
color: #ffcc00; text-decoration: underline;
font-weight: bold;
}

table.contentpaneopen {
/** width: 97%; */
margin-left: 5px;
margin-right: 5px;
padding-right: 5px;
border-collapse: collapse;
/** border-spacing: 0px; */
}

table.contentpane td {
width: auto;
padding: 4px;
border-collapse: collapse;
}

table.contentpane td.componentheading {
padding-left: 4px;
text-align: center;
}

table.contentpane td.contentheading {
padding-left: 15px;
padding-top: 9px;
}

.button {
padding: 2px 2px 2px 2px;
height: 22px;
/** width: 100%; */
border: solid 1px #003366;
background-color: #FFCC00;
color: #006699;
font-family: arial, helvetica, sans-serif;
text-align: center;
font-size: 11px;
font-weight: bold;
margin: 2px;
}

.inputbox {
padding: 2px;
border:solid 1px #003366;
background-color: #ffffff;
}

#sandbox_area_2 .componentheading {
background: url(../images/subhead_bg.png) repeat-x;
color: #003366;
text-align: left;
padding-top: 4px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
width: 458px !important;
width: 462px;
}

#sandbox_area_1 .componentheading {
background: url(../images/subhead_bg.png) repeat-x;
color: #990000;
text-align: left;
padding-top: 4px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
width: 625px !important;
width: 629px;
}

.contentcolumn {
padding-right: 3px;
}

.contentheading {
height: 100%;
/** background: url(../images/contenthead.gif) no-repeat; */
border-bottom: outset #ffcc00;
border-bottom-width: 4px;
border-left: dotted #ffcc00;
border-left-width: 4px;
color: #ffcc00;
text-align: top;
text-align: left;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 3px;
font-weight: bold;
font-size: 13px;
/**white-space: nowrap;*/
text-transform: uppercase;
}

.contentpagetitle {
font-size: 13px;
font-weight: bold;
color: #0066CC;
text-align:left;
}

table.searchinto {
width: 100%;
}

table.searchintro td {
font-weight: bold;
}

table.moduletable {
width: 100%;
margin-bottom: 5px;
padding-top: 9px;
padding-bottom: 7px;
border-spacing: 0px;
border-collapse: collapse;
}

table.moduletable th {
background: url(../images/subhead_bg.png) repeat-x;
color: #003366;
text-align: left;
padding-top: 4px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}

table.moduletable td {
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;
}

table.moduletablewhoisonline {
width: 159px;
margin-bottom: 5px;
padding-top: 7px;
padding-bottom: 7px;
border-spacing: 0px;
border-collapse: collapse;
}

table.moduletablewhoisonline th {
background: url(../images/subhead_bg.png) repeat-x;
color: #003366;
text-align: left;
padding-top: 4px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}

table.moduletablewhoisonline td {
font-size: 11px;
padding: 3px;
margin: 0px;
font-weight: normal;
}

table.moduletableloginform {
width: 159px;
margin-bottom: 5px;
padding-top: 7px;
padding-bottom: 7px;
border-spacing: 0px;
border-collapse: collapse;
}

doctorj · 08.03.2005, 10:13

This is not telling me if that comes from a component's version.php (or .txt) or not. This could be something a little different. Seems like you just need a <br> inserted somewhere in the template or the components's php config file.

Can you provide a link so I can see it in action

floorman · 08.03.2005, 10:47

OK, there are two websites I'm running on the same template. I'm having the trouble on both of them.
http://www.ens-info.com
http://www.kaunitz-rietberg.com

Thx for your help.

doctorj · 09.03.2005, 21:36

Quote:

Originally Posted by floorman

OK, there are two websites I'm running on the same template. I'm having the trouble on both of them.
http://www.ens-info.com
http://www.kaunitz-rietberg.com

Thx for your help.

This is because you template is setup for percentages in the width and height fields; Instead of pixels values. So when you inserted a large image into the Contact Us section it throws off the percentages. Just shrink the photo size and it should fix the problem.

Good Luck