Why is there space on the left and bottom sides?

PHP
1

Hi everybody, after a while I thought I had it figured out but I ran into this problem…I have spacing issues (AGAIN!) with this:

See how there is a white space on the left and bottom side of the menu? (not the black area, the small white strips on the left and bottom of the menu) It’s about 4 pixels on both the left and bottom sides and I have NO IDEA why. It’s about to drive me nuts…

Here is the css to the toolbar if anyone can help!

#community-wrap .cToolbarNav + #miniheader,
#community-wrap .cToolbar + #miniheader {
margin-top: -10px;    
}




/**
 * Jom Social Toolbar
 */
body #community-wrap #cToolbarNav {
    background: transparent url(../images/toolbar/toolbar-bg.gif) no-repeat 0 0;
    height: 50px;
    margin: 0 0 10px;
    padding: 0;
    }
body #community-wrap #cToolbarNav ul {
    list-style: none;
    line-height: 1;
    z-index: 6600;
    position: relative;
    }
body #community-wrap #cToolbarNavInner {
    background: transparent url(../images/toolbar/toolbar-bg.gif) no-repeat 100% -50px;
    height: 50px;
    }
body #community-wrap #cToolbarNav ul#cToolbarNavList {
    height: 50px;
    padding: 0 0 0 10px;
    margin: 11px 0 0;
    float: left;
    }
body #community-wrap #cToolbarNav ul#cToolbarNavList li {
    float: left;
    background: none;
    line-height: 27px;
    margin: 11px 0 0 3px !important;
    background: transparent url(../images/toolbar/toolbar-item-off-left.gif) no-repeat top left;
    list-style-position: outside;
    list-style-type: none;    
    overflow: visible; /* Fixes templates with overflow: hidden on <li>, e.g. JA_Seleni */
    }
body #community-wrap #cToolbarNav ul#cToolbarNavList li a {
    display: block;
    padding: 0 14px;
    color: #fff;
    text-decoration: none;
    background: transparent url(../images/toolbar/toolbar-item-off-right.gif) no-repeat top right;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li a:hover {
    color: #fff;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li.toolbar-active {
    float: left;
    background: none;
    line-height: 27px;
    margin: 11px 0 0 3px;
    background: transparent url(../images/toolbar/toolbar-item-on-left.gif) no-repeat top left;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li.toolbar-active a {
    display: block;
/*    padding: 0 20px; */
    color: #fff;
    text-decoration: none;
    background: transparent url(../images/toolbar/toolbar-item-on-right.gif) no-repeat top right;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li.toolbar-active div {
    background: #789539;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li.toolbar-active div a:link,
body #community-wrap #cToolbarNav ul#cToolbarNavList li.toolbar-active div a:visited {
    background: #789539;
    border-bottom: solid 1px #8cae44;
    width: 90%;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li.toolbar-active div a:hover {
    background: #97bb48;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li div {
    position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: transparent;
    width: 150px;
    z-index: 10;
    overflow: hidden;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li div a {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 5px 10px;
    width: 100%;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #444;
    color: #fff;
    border-bottom: solid 1px #666;
    line-height: normal;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li div a:hover    {
    background: #555;
    color: #fff;
}
body #community-wrap #cToolbarNav div.toolbar-myname {
    float: right;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    margin-right: 20px;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li.toolbar-active div a.has-separator {
    border-bottom: solid 3px #8cae44;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li div a.has-separator {
    border-bottom: solid 3px #666;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li#toolbar-item-notify {
    background: transparent url(../images/toolbar/toolbar-item-notify-off-left.gif) no-repeat top left;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li#toolbar-item-notify a {
    background: transparent url(../images/toolbar/toolbar-item-notify-off-right.gif) no-repeat top right;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li#toolbar-item-notify span {
    font-size: 11px;
    height: 27px;
    line-height: 17px;
    display: block;
    padding-left: 2px;
    text-decoration:none;
    color:#FFFFFF;
}
/**
 * Jom Social Toolbar
 */
 

 /**
 * New toolbar styling
 */
#community-wrap .cToolbar {
    background:         transparent url(../images/toolbar.png) no-repeat 0 0;
    height:             50px;
    padding-left:        10px;
    margin-bottom:        10px;
}
/* 1.5 Compatibility. Remove when not used */
body #community-wrap .cToolbar#cToolbarNav {
    background:         transparent url(../images/toolbar.png) no-repeat 0 0 !important;
    height:             50px !important;
    padding-left:        10px !important;
    
    margin-bottom:        0px !important;
    
    line-height:        normal !important;
}
    #community-wrap .cToolbar .cToolbar {
        background-position: 100% 0;
        height:             40px;
        padding:            10px 0 0;
        margin:             0;
    }
    /* 1.5 Compatibility. Remove when not used */
    body #community-wrap .cToolbar#cToolbarNav .cToolbar {
        background-position: 100% 0 !important;
        height:             40px !important;
        padding:            10px 0 0 !important;
        margin:             0 !important;        
    }
    
    #community-wrap .cToolbar ul {
        list-style:         none;
    }
    
    /* 1.5 Compatibility. Remove when not used */
    body #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList {
        float: none !important;
        height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: auto !important;
    }

    #community-wrap .cToolbar ul,
    #community-wrap .cToolbar ul li,
    #community-wrap .cToolbar ul li a {
         height:                28px;
    }

    #community-wrap .cToolbar ul li {
        background:         transparent url(../images/toolbar.png) no-repeat 0 -97px;
         float:                 left;
         padding:            0 0 0 12px;
         margin-right:        3px;
         position:            relative;
    }
    
    /* 1.5 Compatibility. Remove when not used */
#community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li {
        background:         transparent url(../images/toolbar.png) no-repeat 0 -97px !important;
         float:                 left !important;
         padding:            0 0 0 12px !important;
         margin:             0 !important;
         margin-right:        3px !important;
         position:            relative !important;
         line-height:        normal !important;
         list-style-image: none;
         list-style-type: none;
         list-style-image:   none;
    }
        #community-wrap .cToolbar ul li a {
            background:         transparent url(../images/toolbar.png) no-repeat 100% -97px;
            color:                 #fff;
            display:             block;
            line-height:        28px;
            padding:             0 12px 0 0;
            text-decoration:     none;
        }
        /* 1.5 Compatibility. Remove when not used */
        #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li a {
            background:         transparent url(../images/toolbar.png) no-repeat 100% -97px !important;
            color:                 #fff !important;
            display:             block !important;
            line-height:        28px !important;
            padding:             0 12px 0 0 !important;
            text-decoration:     none !important;
            border: none !important;
        }
        
        #community-wrap .cToolbar ul li a:focus {
             outline-style:         none;
        }

    #community-wrap .cToolbar ul li.toolbar-active {
        background-position: 0 -60px;
    }
    /* 1.5 Compatibility. Remove when not used */
    #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li.toolbar-active {
        background-position: 0 -60px !important;
    }
        #community-wrap .cToolbar ul li.toolbar-active a {
            background:         transparent url(../images/toolbar.png) no-repeat 100% -60px;
            text-shadow:        0 1px 0 #506522;
        }
        /* 1.5 Compatibility. Remove when not used */
        #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li.toolbar-active a {
            background:         transparent url(../images/toolbar.png) no-repeat 100% -60px !important;            
        }

    /** this is for logout link **/
    #community-wrap .cToolbar ul li#toolbar-item-logout,
    #community-wrap .cToolbar ul li#toolbar-item-logout a {
        color:                 #333;
        background:         none;
        padding:             1px 5px;
        margin:             0;
        height:             auto;
        line-height:         normal;
        float:                 right;
    }
    /* 1.5 Compatibility. Remove when not used */
    #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li#toolbar-item-logout,
    #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li#toolbar-item-logout a {
        color:                 #333 !important;
        background:         none !important;
        padding:             1px 5px !important;
        margin:             0 !important;
        height:             auto !important;
        line-height:         normal !important;
        float:                 right !important;        
    }
        #community-wrap .cToolbar ul li#toolbar-item-logout a:hover {
            text-decoration:     underline;
        }
        /* 1.5 Compatibility. Remove when not used */
        #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li#toolbar-item-logout a:hover {
            text-decoration:     underline !important
        }
    
    #community-wrap .cToolbar ul li#toolbar-item-notify {
        background-position:         0 -134px;
        padding-left:                20px;
    }
    /* 1.5 Compatibility. Remove when not used */
    #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li#toolbar-item-notify {
        background-position:         0 -134px !important;
        padding-left:                20px !important;        
    }
        #community-wrap .cToolbar ul li#toolbar-item-notify a {
            background-position:         100% -134px;
        }
        /* 1.5 Compatibility. Remove when not used */
        #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li#toolbar-item-notify a {
            background-position:         100% -134px !important;        
        }
        
            #community-wrap .cToolbar ul li#toolbar-item-notify a span {
                margin-top:        -2px;
                padding:         0 5px;
            }
            /* 1.5 Compatibility. Remove when not used */
            #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li#toolbar-item-notify a span {
                margin-top:        -2px !important;
                padding:         0 5px !important;
                display:        inline !important;
                font-size:      inherit !important;
                color:          inherit !important;
                height:         auto !important;
                line-height:    28px !important;
            }
    
            /** here we hide the submenu container bt default **/
            #community-wrap .cToolbar ul li div {
                position:            absolute;
                visibility:            hidden;
                z-index:            99999;    /* make sure it always on top of everything */
                left:                0;
                width:                180px;
                background:         none;
            }
            /* 1.5 Compatibility. Remove when not used */
            #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList div {
                position:            absolute !important;
                z-index:            99999 !important;    /* make sure it always on top of everything */
                left:                0 !important;
                width:                180px !important;
                background:         none !important;                
            }
                #community-wrap .cToolbar ul li div a {
                    background:         #444;
                    padding:            2px 10px;
                    border-bottom:         solid 1px #3d3d3d;
                }
                /* 1.5 Compatibility. Remove when not used */
                #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li div a {
                    background:         #444 !important;
                    padding:            2px 10px !important;
                    border-bottom:         solid 1px #3d3d3d !important;                    
                }
                #community-wrap .cToolbar ul li div a:hover {
                    background:         #333;
                }
                /* 1.5 Compatibility. Remove when not used */
                #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li div a:hover {
                    background:         #333 !important;
                }            
                #community-wrap .cToolbar ul li div a.has-separator {
                    border-bottom:         solid 2px #3d3d3d;
                }
                /* 1.5 Compatibility. Remove when not used */
                #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList div a.has-separator {
                    border-bottom:         solid 2px #3d3d3d !important;
                }
                #community-wrap .cToolbar ul li.toolbar-active div a {
                    background:         #789539;
                    border-bottom:         solid 1px #708b35;
                }
                /* 1.5 Compatibility. Remove when not used */
                #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li.toolbar-active div a {
                    background:         #789539 !important;
                    border-bottom:         solid 1px #708b35 !important;                        
                }
                #community-wrap .cToolbar ul li.toolbar-active div a.has-separator {
                    border-bottom:         solid 2px #708b35;
                }
                /* 1.5 Compatibility. Remove when not used */
                #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li.toolbar-active div a.has-separator {
                    border-bottom:         solid 2px #708b35 !important;
                }
                #community-wrap .cToolbar ul li.toolbar-active div a:hover {
                    background:         #93b746;
                }
                /* 1.5 Compatibility. Remove when not used */
                #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li.toolbar-active div a:hover {
                    background:         #93b746 !important;
                }
2

Glad you fixed it. :slight_smile:

Sounds like a copy and paste picked up some hidden characters along the way. (The usual issue is editors saving a BOM but those characters didn’t look like a BOM.)

3

I have looked and looked and still can’t find the problem…I have no idea what is causing it. :frowning: I will keep looking though tomorrow…thanks for your help.

4

I cannot see the fault on those pages, maybe do a search for ‘<div class=“buttonbarlong”>’ within the script of another page.

5

I’ll move the thread to the PHP forum as someone there should be able to spot the problem more easily.:slight_smile:

6

Okay, I did some recoding of it and it appears to be working fine, but ONLY in newer browsers. Now I simply get a space at the top (about 5-10 pixels big). I have narrowed it down to the files that are causing the problems and I do believe it is those 3 characters you mentioned Paul but I have no idea what is causing them since they come from a joomla module. Here are the three files that cause the “. . .” in my code…do you know what is causing those 3 charcaters top pop up?

First, a picture of the code (the 3 dots are highlighted in grey)

mod_jomsocial_toolbar.php code:

<?php



//no direct access



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







jimport('joomla.filesystem.file');







// include the helper file



require_once(dirname(__FILE__).DS.'helper.php');







// get the style sheet parameter from the module's configuration



$toolbarstyling = $params->get('toolbarstyling');







//Load Language file.



$lang =& JFactory::getLanguage();



$lang->load( 'com_community' );







require_once( JPATH_ROOT . DS . 'components' . DS . 'com_community' . DS . 'libraries' . DS . 'core.php');







// initiate toolbar



$customToolbar    =& CFactory::getToolbar();







// get Jomsocial configuration



$config    =& CFactory::getConfig();



 



// Include CAppPlugins library



require_once( JPATH_ROOT . DS . 'components' . DS . 'com_community' . DS . 'libraries' . DS . 'apps.php');







    $appsLib    =& CAppPlugins::getInstance();



    $appsLib->loadApplications();



    



    // Only trigger applications and set active URI when needed



    



        $args = array();



        $appsLib->triggerEvent( 'onSystemStart' , $args );







        // Set active URI



        CFactory::setCurrentURI();







// Include templates



require_once (JPATH_ROOT . DS . 'components' . DS . 'com_community' . DS . 'libraries'.DS.'template.php');







// Include templates



require_once (JPATH_ROOT . DS . 'components' . DS . 'com_community' . DS . 'libraries'.DS.'miniheader.php');







require_once(JPATH_ROOT . DS . 'components' . DS . 'com_community' . DS . 'libraries' . DS . 'tooltip.php');







require_once(JPATH_ROOT . DS . 'components' . DS . 'com_community' . DS . 'libraries' . DS . 'toolbar.php');







        // Script needs to be here if they are 



        CFactory::load( 'libraries' , 'facebook' );



        CFactory::load( 'models' , 'connect' );







        // Once they reach here, we assume that they are already logged into facebook.



        // Since CFacebook library handles the security we don't need to worry about any intercepts here.



        $facebook        = new CFacebook( FACEBOOK_LOGIN_NOT_REQUIRED );



        $connectTable    =& JTable::getInstance( 'Connect' , 'CTable' );



        $connectId        = $facebook->lib->get_loggedin_user();



        $connectTable->load( $connectId );



        $my =& JFactory::getUser();




        $isFacebookUser    = ( $connectTable->userid == $my->id ) ? true : false;







        



        $logoutLink    = CRoute::_( 'index.php?option=com_community&view=frontpage' , false );



        $logoutLink    = base64_encode( $logoutLink );



        



 



// include the template for display



require(JModuleHelper::getLayoutPath('mod_jomsocial_toolbar'));



?>

helper.php code:

&lt;?php
defined('_JEXEC') or die('Direct Access to this location is not allowed.');
 
class ModJomsocialToolbarHelper
{
    /**
     * Returns a list of post items
    */
    public function getItems($userCount)
    {
        // get a reference to the database
        $db = &JFactory::getDBO();
 
        // get a list of $userCount randomly ordered users 
        $query = 'SELECT a.name FROM `#__users` AS a ORDER BY rand() LIMIT ' . $userCount. '';
 
        $db-&gt;setQuery($query);
        $items = ($items = $db-&gt;loadObjectList())?$items:array();
 
        return $items;
    } //end getItems
 
} //end ModJomsocialToolbarHelper

?&gt;

default.php code

&lt;?php
/**
 * @package        JomSocial
 * @subpackage     Template 
 * @copyright (C) 2008 by Slashes & Dots Sdn Bhd - All rights reserved!
 * @license http://www.jomsocial.com Copyrighted Commercial Software
 * 
 */
defined('_JEXEC') or die();

            $document    = & JFactory::getDocument();
            if($toolbarstyling !== ""){$document-&gt;addStyleSheet( JURI::base() . $toolbarstyling );}            
            $document-&gt;addScript( JURI::base() . 'components/com_community/assets/jquery-1.3.2.pack.js' );
            $document-&gt;addScript( JURI::base() . 'components/com_community/assets/window-1.0.pack.js' );    
            $document-&gt;addScript( JURI::base() . 'components/com_community/assets/script-1.2.pack.js' );
            $document-&gt;addScript( JURI::base() . 'components/com_community/assets/jquery.qtip-1.0.0-rc3.min.js' );            


$view             = JRequest::getVar('view', 'frontpage', 'REQUEST');
$groupKey        = $customToolbar-&gt;getToolBarGroupKey();
$toolbarClass    = array();
//$toolbarClass = array('frontpage'=&gt; '', 'profile' =&gt; '', 'friends'=&gt;'', 'apps'=&gt;'', 'inbox'=&gt;'', 'notify' =&gt; '', 'extra' =&gt; '' );
//$toolbarClass = array_fill_keys($groupKey, '');
if(! empty($groupKey))
{
    $emptyArr        = array_fill(0, count($groupKey), '');
    $toolbarClass    = array_combine($groupKey, $emptyArr);
} 

$uri            = JRequest::getUri();
$activeToolbar    = $customToolbar-&gt;getActiveToolBarGroup($uri);

/**
 * If cannot locate the uri string, then we use view to determine.
 */ 
if(empty($activeToolbar))
{    
    $activeToolbar    = $customToolbar-&gt;getGroupActiveView($view);
}

$toolbarClass[$activeToolbar] = 'toolbar-active';
if(! empty($toolbarClass[TOOLBAR_PROFILE]))
    $toolbarClass[TOOLBAR_PROFILE] = (!$isMine && $activeToolbar == TOOLBAR_PROFILE) ? '':$toolbarClass[TOOLBAR_PROFILE]; 
?&gt;&lt;div class="ryanstoolbarwrap"&gt;
&lt;div id="cToolbarNav" class="cToolbar"&gt;
    &lt;div id="cToolbar_inner" class="cToolbar clrfix"&gt;
        &lt;ul id="cToolbarNavList"&gt;
        &lt;?php
                if( $config-&gt;get('displayhome') )
                {
                    if(isset($customToolbar) && !empty($customToolbar)){
                        if($customToolbar-&gt;hasToolBarGroup(TOOLBAR_HOME)){
                            $homeItem    = $customToolbar-&gt;getToolbarItems(TOOLBAR_HOME);
            ?&gt;
            &lt;li id="toolbar-item-frontpage" class="&lt;?php echo $toolbarClass[TOOLBAR_HOME]; ?&gt;"&gt;
                &lt;a href="http://www.granturismoracing.com" onmouseover="joms.toolbar.open('m0')" onmouseout="joms.toolbar.closetime()"&gt;
                    &lt;?php echo $homeItem-&gt;caption; ?&gt;
                &lt;/a&gt;
                &lt;?php
                    if(!empty($homeItem) && (!empty($homeItem-&gt;child['append']) || !empty($homeItem-&gt;child['prepend'])))
                    {
                        echo '&lt;div id="m0" onmouseover="joms.toolbar.cancelclosetime()" onmouseout="joms.toolbar.closetime()"&gt;';
                        echo loadMenuItems( $customToolbar , TOOLBAR_HOME, 'all');
                        echo '&lt;/div&gt;';        
                    }
                ?&gt;                
            &lt;/li&gt;
            &lt;?php
                        }
                    }
                }
            ?&gt;
        
        &lt;?php
                if(isset($customToolbar) && !empty($customToolbar)){
                    if($customToolbar-&gt;hasToolBarGroup(TOOLBAR_PROFILE)){
                        $profileItem    = $customToolbar-&gt;getToolbarItems(TOOLBAR_PROFILE);
            ?&gt;
            &lt;li id="toolbar-item-profile" class="&lt;?php echo $toolbarClass[TOOLBAR_PROFILE]; ?&gt;"&gt;
                &lt;a href="&lt;?php echo $profileItem-&gt;link; ?&gt;" onmouseover="joms.toolbar.open('m1')" onmouseout="joms.toolbar.closetime()"&gt;
                    &lt;?php echo $profileItem-&gt;caption; ?&gt;
                &lt;/a&gt;
                &lt;div id="m1" onmouseover="joms.toolbar.cancelclosetime()" onmouseout="joms.toolbar.closetime()"&gt;
                        &lt;?php echo $customToolbar-&gt;getMenuItems(TOOLBAR_PROFILE, 'prepend'); ?&gt;
                &lt;?php echo $customToolbar-&gt;getMenuItems(TOOLBAR_PROFILE, 'append'); ?&gt;                        
                &lt;/div&gt;
            &lt;/li&gt;
            &lt;?php
                    }
                }    
            ?&gt;
        
        &lt;?php
                if(isset($customToolbar) && !empty($customToolbar)){
                    if($customToolbar-&gt;hasToolBarGroup(TOOLBAR_FRIEND)){
                        $frenItem    = $customToolbar-&gt;getToolbarItems(TOOLBAR_FRIEND);
            ?&gt;
            &lt;li id="toolbar-item-friends" class="&lt;?php echo $toolbarClass[TOOLBAR_FRIEND];?&gt;"&gt;
                &lt;a href="&lt;?php echo $frenItem-&gt;link; ?&gt;" onmouseover="joms.toolbar.open('m2')" onmouseout="joms.toolbar.closetime()"&gt;
                    &lt;?php echo $frenItem-&gt;caption; ?&gt;
                &lt;/a&gt;
                &lt;div id="m2" onmouseover="joms.toolbar.cancelclosetime()" onmouseout="joms.toolbar.closetime()" style="visibility: hidden;"&gt;
                        &lt;?php echo $customToolbar-&gt;getMenuItems(TOOLBAR_FRIEND, 'prepend'); ?&gt;
                &lt;?php echo $customToolbar-&gt;getMenuItems(TOOLBAR_FRIEND, 'append'); ?&gt;                
                &lt;/div&gt;
            &lt;/li&gt;
            &lt;?php
                    }
                }    
            ?&gt;    

        &lt;?php
                if(isset($customToolbar) && !empty($customToolbar)){
                    if($customToolbar-&gt;hasToolBarGroup(TOOLBAR_APP)){
                        $appItem    = $customToolbar-&gt;getToolbarItems(TOOLBAR_APP);
            ?&gt;            
              &lt;li id="toolbar-item-apps" class="&lt;?php echo $toolbarClass[TOOLBAR_APP];?&gt;"&gt;
                &lt;a href="&lt;?php echo $appItem-&gt;link; ?&gt;" onmouseover="joms.toolbar.open('m3')" onmouseout="joms.toolbar.closetime()"&gt;
                    &lt;?php echo $appItem-&gt;caption; ?&gt;
                &lt;/a&gt;
                &lt;div id="m3" onmouseover="joms.toolbar.cancelclosetime()" onmouseout="joms.toolbar.closetime()" style="visibility: hidden; overflow: hidden;"&gt;
                    &lt;?php echo $customToolbar-&gt;getMenuItems(TOOLBAR_APP, 'prepend'); ?&gt;
                    &lt;?php echo $customToolbar-&gt;getMenuItems(TOOLBAR_APP, 'append'); ?&gt;    
                &lt;/div&gt;
            &lt;/li&gt;
            &lt;?php
                    }
                }    
            ?&gt;        

        &lt;?php
            if( $config-&gt;get('enablepm') )
            {
                if(isset($customToolbar) && !empty($customToolbar)){
                    if($customToolbar-&gt;hasToolBarGroup(TOOLBAR_INBOX)){
                        $inboxItem    = $customToolbar-&gt;getToolbarItems(TOOLBAR_INBOX);            
            
            ?&gt;
              &lt;li id="toolbar-item-inbox" class="&lt;?php echo $toolbarClass[TOOLBAR_INBOX];?&gt;"&gt;
                &lt;a href="&lt;?php echo $inboxItem-&gt;link; ?&gt;" onmouseover="joms.toolbar.open('m4')" onmouseout="joms.toolbar.closetime()"&gt;
                    &lt;?php echo $inboxItem-&gt;caption; ?&gt;
                &lt;/a&gt;
                &lt;div id="m4" onmouseover="joms.toolbar.cancelclosetime()" onmouseout="joms.toolbar.closetime()" style="visibility: hidden;"&gt;
                    &lt;?php echo $customToolbar-&gt;getMenuItems(TOOLBAR_INBOX, 'prepend'); ?&gt;
                    &lt;?php echo $customToolbar-&gt;getMenuItems(TOOLBAR_INBOX, 'append'); ?&gt;
                &lt;/div&gt;
            &lt;/li&gt;
            &lt;?php
                    }
                }            
            }
            ?&gt;




    &lt;?php
            if(isset($customToolbar) && !empty($customToolbar)){
                $myExtraToolbar    =& $customToolbar-&gt;getExtraToolbars();
                if(! empty($myExtraToolbar))                 
                {
                    $startCnt    = 5; //this counter used for javascript and div id.
                    foreach($myExtraToolbar as $key    =&gt; $item)
                    {
                        echo '&lt;li id="toolbar-item-'.$startCnt.'" class="'.$toolbarClass[$key].' toolbar-item"&gt;';
                        echo '    &lt;a href="'.$item-&gt;link.'" onmouseover="joms.toolbar.open(\\'m'.$startCnt.'\\')" onmouseout="joms.toolbar.closetime()" class="has-submenu"&gt;'.$item-&gt;caption.'&lt;/a&gt;';
                        echo '    &lt;div id="m'.$startCnt.'" onmouseover="joms.toolbar.cancelclosetime()" onmouseout="joms.toolbar.closetime()" style="visibility: hidden;"&gt;';
                        echo $customToolbar-&gt;getMenuItems($key, 'all');                            
                        echo '    &lt;/div&gt;';
                        echo '&lt;/li&gt;';
                        $startCnt++;
                    }//end foreach
                }//end if
            }
        ?&gt;    


&lt;!-- begin: COMMUNITY_FREE_VERSION --&gt;
            &lt;?php if ( (!empty($notiAlert)) && ($notiAlert &gt; 0) ) { ?&gt;
            &lt;li id="toolbar-item-notify"&gt;
                &lt;a href="javascript:joms.notifications.showWindow();"&gt;
                    &lt;span id="toolbar-item-notify-count"&gt;&lt;?php echo $notiAlert; ?&gt;&lt;/span&gt;
                &lt;/a&gt;
            &lt;/li&gt;
            &lt;?php }//end if?&gt;
            &lt;!-- end: COMMUNITY_FREE_VERSION --&gt;

    
    
    &lt;li id="toolbar-item-logout" class="float-right"&gt;
                &lt;?php if( $config-&gt;get('fbconnectkey') && $config-&gt;get('fbconnectsecret') && $isFacebookUser ) { ?&gt;
                    &lt;div id="fb-root"&gt;&lt;/div&gt;
                    &lt;script type="text/javascript"&gt;
                    var count    = 1;
                    window.fbAsyncInit = function() {
                        FB.init({appId: '&lt;?php echo $config-&gt;get('fbconnectkey');?&gt;', status: false, cookie: true, xfbml: true});
                             FB.Event.subscribe('auth.logout', function(response) {
                                 joms.jQuery('#communitylogout').submit();
                             });
                    };
                    (function() {
                        var e = document.createElement('script');
                        e.type = 'text/javascript';
                        e.src = document.location.protocol +
                            '//connect.facebook.net/en_US/all.js';
                        e.async = true;
                        document.getElementById('fb-root').appendChild(e);
                    }());
                    &lt;/script&gt;
                    &lt;fb:login-button autologoutlink="true" size="small" background="light"&gt;&lt;?php echo JText::_('CC LOGOUT');?&gt;&lt;/fb:login-button&gt;
                    &lt;form action="index.php" method="post" name="communitylogout" id="communitylogout"&gt;
                        &lt;input type="hidden" name="option" value="com_user" /&gt;
                        &lt;input type="hidden" name="task" value="logout" /&gt;
                        &lt;input type="hidden" name="return" value="&lt;?php echo $logoutLink; ?&gt;" /&gt;
                    &lt;/form&gt;            
                
                &lt;?php } else { ?&gt;
                
                    &lt;form action="index.php" method="post" name="communitylogout" id="communitylogout"&gt;
                        &lt;a href="javascript:void(0);" onclick="document.communitylogout.submit();"&gt;&lt;?php echo JText::_('CC LOGOUT');?&gt;&lt;/a&gt;
                        &lt;input type="hidden" name="option" value="com_user" /&gt;
                        &lt;input type="hidden" name="task" value="logout" /&gt;
                        &lt;input type="hidden" name="return" value="&lt;?php echo $logoutLink; ?&gt;" /&gt;
                    &lt;/form&gt;
                    
                &lt;?php } ?&gt;
                                
            &lt;/li&gt;
&lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

Thank you for your help - it is greatly appreciated!

7

I did a little reading on hidden characters and found out something: the php files were in UTF-8 encoding mode. I went into my hosting company control panel then went into the filemanger and opened them in ASCII mode. Well, there were really weird looking characters at the beginning of those three files (right before the “<?php” part of code) I then deleted all of those characters from the three files and saved them in ASCII mode and now the spacing issue is fixed.

I have NEVER had this problem…do you think it was because the original author of the module saved the files in the wrong encoding format or something?

I’m so glad it’s fixed now…took hours of research but well worth it because now I can keep my menu the way I want it and all of those hours were not wasted. :slight_smile:

8

Without HTML, we have zero idea how these elements are interacting with each other. Also, why is the CSS so slow?
body #community-wrap #cToolbarNav ul#cToolbarNavList li

Why not let the browser do a lot less work:
#cToolbarNavList li {
styles;
}

9

What are these three little dots in the html for?


 <div class="moduletableraw">
                    &#65279;&#65279;&#65279;

<div id="community-wrap"

They won’t show in the forum code above but you have three invisible characters showing as dots in my editor.

Delete the white space between those divs and you should remove them.

10

okay thanks. I have looked at it for hours now and still cannot find the problem…it’s driving me kind of crazy. I may look at it some more tomorrow but if anyone can spot the problem I would greatly appreciate some help. Thanks once again!

11

Yeah, me too! :slight_smile: And when I did open them up on the control panel editor, they were actually very strange looking characters (in ASCII mode). And they were at the VERY beginning of every file so, after reading on BOM characters, they sound like it could be. But I’m just glad it’s fixed now! big sigh of relief

12

There is a div wrapping the whole menu called “moduletableraw” and I figured it was causing the problems. So, after a very long time messing around, I came up with this line of code that fixed the problem…does anyone know WHY this fixed the problem though? My guess is that it involved the relativie position and the display block but I’m really not certain…I’m just guessing. And it took hours to get there. lol Here is the CSS code:

.moduletableraw {
padding: 0px;
margin: 0px;
position: relative;
height: 50px;
display: block;
overflow: visible;
}

Anyone know why it got rid of the space on the left and bottom? It worked in both Mozilla and IE 7/8

13

Sorry about that…here is the HTML but I am posting the updated CSS as well. I appreciate your help! I am so frustrated with this right now but I guess it comes with the territory.

First here is a pic of it - now it is jumping down to the left…it should be centered so that it matches with the repeating background in the back. :frowning:

HTML

<div class="clearfix buttonbarlong">        <div class="moduletableraw">
                    &#65279;&#65279;&#65279;

<div id="community-wrap" style="min-height: 10px ! important; overflow: visible;">
<div class="ryanstoolbarwrap">
<div id="cToolbarNav" class="cToolbar">
    <div id="cToolbar_inner" class="cToolbar clrfix">
        <ul id="cToolbarNavList">
                    <li id="toolbar-item-frontpage" class="">

                <a href="http://www.granturismoracing.com" onmouseover="joms.toolbar.open('m0')" onmouseout="joms.toolbar.closetime()">
                    Home                </a>
                                
            </li>
                    
                    <li id="toolbar-item-profile" class="">
                <a href="/profile/63-composerryan" onmouseover="joms.toolbar.open('m1')" onmouseout="joms.toolbar.closetime()">
                    Profile                </a>
                <div style="visibility: hidden;" id="m1" onmouseover="joms.toolbar.cancelclosetime()" onmouseout="joms.toolbar.closetime()">
                                        <a href="/profile/uploadAvatar">Change profile picture</a><a href="/profile/linkVideo">Change profile video</a><a href="/profile/edit">Edit profile</a><a href="/profile/editDetails">Edit details</a><a href="/profile/privacy">Privacy</a><a href="/profile/preferences">Preferences</a>                        
                </div>

            </li>
                    
                    <li id="toolbar-item-friends" class="toolbar-active">
                <a href="/my-friends/63-composerryan" onmouseover="joms.toolbar.open('m2')" onmouseout="joms.toolbar.closetime()">
                    Friends                </a>
                <div id="m2" onmouseover="joms.toolbar.cancelclosetime()" onmouseout="joms.toolbar.closetime()" style="visibility: hidden;">
                                        <a href="/my-friends" class="has-separator">Show all</a><a href="/gran-turismo-5-community/search">Search</a><a href="/gran-turismo-5-community/search/advancesearch">Advanced Search</a><a href="/my-friends/invite">Invite Friends</a><a href="/my-friends/sent">Request sent</a><a href="/my-friends/pending">Pending my approval</a>                
                </div>

            </li>
                

                    
              <li id="toolbar-item-apps" class="">
                <a href="/gran-turismo-5-community/apps" onmouseover="joms.toolbar.open('m3')" onmouseout="joms.toolbar.closetime()">
                    Applications                </a>
                <div id="m3" onmouseover="joms.toolbar.cancelclosetime()" onmouseout="joms.toolbar.closetime()" style="visibility: hidden; overflow: hidden;">
                                        <a href="/gran-turismo-5-community/apps">My Applications</a><a href="/gran-turismo-5-community/apps/browse" class="has-separator">Browse</a><a href="/gran-turismo-5-racing-teams/63-composerryan">Groups</a><a href="/gran-turismo-5-screenshots-and-photos/63-composerryan">Photos</a><a href="/gran-turismo-5-videos/63-composerryan">Videos</a>    
                </div>

            </li>
                    

                      <li id="toolbar-item-inbox" class="">
                <a href="/my-messages" onmouseover="joms.toolbar.open('m4')" onmouseout="joms.toolbar.closetime()">
                    Inbox                </a>
                <div id="m4" onmouseover="joms.toolbar.cancelclosetime()" onmouseout="joms.toolbar.closetime()" style="visibility: hidden;">
                                        <a href="/my-messages">Inbox</a><a href="/my-messages/sent">Sent</a><a href="/my-messages/write">Write</a>                </div>

            </li>
            



    <li id="toolbar-item-5" class=" toolbar-item">    <a href="/component/kunena/" onmouseover="joms.toolbar.open('m5')" onmouseout="joms.toolbar.closetime()" class="has-submenu">Forums</a>    <div id="m5" onmouseover="joms.toolbar.cancelclosetime()" onmouseout="joms.toolbar.closetime()" style="visibility: hidden;">    </div></li><li id="toolbar-item-6" class=" toolbar-item">    <a href="/my-friends/groups" onmouseover="joms.toolbar.open('m6')" onmouseout="joms.toolbar.closetime()" class="has-submenu">Racing Teams</a>    <div id="m6" onmouseover="joms.toolbar.cancelclosetime()" onmouseout="joms.toolbar.closetime()" style="visibility: hidden;"><a href="http://www.granturismoracing.com/profile/edit">Edit My Profile</a>    </div></li>    


<!-- begin: COMMUNITY_FREE_VERSION -->
                        <!-- end: COMMUNITY_FREE_VERSION -->

    
    
    <li id="toolbar-item-logout" class="float-right">
                                
                    <form action="index.php" method="post" name="communitylogout" id="communitylogout">
                        <a href="javascript:void(0);" onclick="document.communitylogout.submit();">Logout</a>
                        <input name="option" value="com_user" type="hidden">
                        <input name="task" value="logout" type="hidden">
                        <input name="return" value="L2dyYW4tdHVyaXNtby01LWNvbW11bml0eQ==" type="hidden">
                    </form>
                    
                                                
            </li>

</ul>
    </div>
</div>
</div>
</div>
        </div>
    </div>

CSS - NOTE, it seems that when I change the community-wrap width to 973px it seems to fix the problem. WEIRD! But I can’t do that because it causes other issues…



#community-wrap {
    display: inline-block;
    width: 100&#37;;
            
    /* display: inline-block + width: 100% was 
       used to cope with uncleared floats that
       often is present in various Joomla! templates.
       
       Without it, contents within #community-wrap
       may get pulled down to the line where the
       uncleared float element ends.
         
       The css property combination above inherits
       the width of the parent container IRRESPECTIVE
       of the padding value of the parent container.
       
       Therefore, if you are experiencing issues where
       #community-wrap appears wider than the width
       provided by its parent container, you may either:
       
       - Add margin-left & margin-right 
         with the value taken from the
         padding value of the parent container.
       
       - Replace display: inline-block;
         with    display: block;
         (If you are certain uncleared floats won't appear)
         
       - Set a fixed width (Usually parent width - parent padding)
    */

    position: relative;
    text-align: left;
    min-height: 450px;
    min-width: 650px;
    margin: 0;
    padding: 0px;
    
}

.buttonbarlong {
    height: 50px;
    width: 100%;
    background-image: url(../../../components/com_community/templates/default/images/toolbar.png);
    background-position: 50% 0px;
    background-repeat: repeat-x;
    background-color: #000000;
    margin: 0px;
    padding: 0px;
    text-align: center;
    overflow: visible;
    display: block;
    position: relative;
}

.moduletableraw {
width: 973px;
padding: 0px;
margin: 0px;
position: relative;
height: 50px;
display: block;
overflow: visible;
}


#community-wrap .cToolbarNav + #miniheader,
#community-wrap .cToolbar + #miniheader {
margin-top: -10px;    
}





/**
 * Jom Social Toolbar
 */
body #community-wrap #cToolbarNav {
    background: transparent url(../images/toolbar/toolbar-bg.gif) no-repeat 0 0;
    height: 50px;
    margin: 0 0 10px;
    padding: 0;
    
    }
body #community-wrap #cToolbarNav ul {
    list-style: none;
    line-height: 1;
    z-index: 6600;
    position: relative;
    }
body #community-wrap #cToolbarNavInner {
    background: transparent url(../images/toolbar/toolbar-bg.gif) no-repeat 100% -50px;
    height: 50px;
    }
body #community-wrap #cToolbarNav ul#cToolbarNavList {
    height: 50px;
    padding: 0 0 0 10px;
    margin: 11px 0 0;
    float: left;
    }
body #community-wrap #cToolbarNav ul#cToolbarNavList li {
    float: left;
    background: none;
    line-height: 27px;
    margin: 11px 0 0 3px !important;
    background: transparent url(../images/toolbar/toolbar-item-off-left.gif) no-repeat top left;
    list-style-position: outside;
    list-style-type: none;    
    overflow: visible; /* Fixes templates with overflow: hidden on <li>, e.g. JA_Seleni */
    }
body #community-wrap #cToolbarNav ul#cToolbarNavList li a {
    display: block;
    padding: 0 14px;
    color: #fff;
    text-decoration: none;
    background: transparent url(../images/toolbar/toolbar-item-off-right.gif) no-repeat top right;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li a:hover {
    color: #fff;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li.toolbar-active {
    float: left;
    background: none;
    line-height: 27px;
    margin: 11px 0 0 3px;
    background: transparent url(../images/toolbar/toolbar-item-on-left.gif) no-repeat top left;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li.toolbar-active a {
    display: block;
/*    padding: 0 20px; */
    color: #fff;
    text-decoration: none;
    background: transparent url(../images/toolbar/toolbar-item-on-right.gif) no-repeat top right;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li.toolbar-active div {
    background: #789539;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li.toolbar-active div a:link,
body #community-wrap #cToolbarNav ul#cToolbarNavList li.toolbar-active div a:visited {
    background: #789539;
    border-bottom: solid 1px #8cae44;
    width: 90%;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li.toolbar-active div a:hover {
    background: #97bb48;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li div {
    position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: transparent;
    width: 150px;
    z-index: 10;
    overflow: hidden;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li div a {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 5px 10px;
    width: 100%;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #444;
    color: #fff;
    border-bottom: solid 1px #666;
    line-height: normal;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li div a:hover    {
    background: #555;
    color: #fff;
}
body #community-wrap #cToolbarNav div.toolbar-myname {
    float: right;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    margin-right: 20px;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li.toolbar-active div a.has-separator {
    border-bottom: solid 3px #8cae44;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li div a.has-separator {
    border-bottom: solid 3px #666;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li#toolbar-item-notify {
    background: transparent url(../images/toolbar/toolbar-item-notify-off-left.gif) no-repeat top left;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li#toolbar-item-notify a {
    background: transparent url(../images/toolbar/toolbar-item-notify-off-right.gif) no-repeat top right;
}
body #community-wrap #cToolbarNav ul#cToolbarNavList li#toolbar-item-notify span {
    font-size: 11px;
    height: 27px;
    line-height: 17px;
    display: block;
    padding-left: 2px;
    text-decoration:none;
    color:#FFFFFF;
}
/**
 * Jom Social Toolbar
 */
 

 /**
 * New toolbar styling
 */
#community-wrap .cToolbar {
    background:         transparent url(../images/toolbar.png) no-repeat 0 0;
    height:             50px;
    padding-left:        10px;
    margin-bottom:        10px;
    
}
/* 1.5 Compatibility. Remove when not used */
body #community-wrap .cToolbar#cToolbarNav {
    background:         transparent url(../images/toolbar.png) no-repeat 0 0 !important;
    height:             50px !important;
    padding-left:        10px !important;
    
    margin-bottom:        0px !important;
    
    line-height:        normal !important;
}
    #community-wrap .cToolbar .cToolbar {
        background-position: 100% 0;
        height:             40px;
        padding:            10px 0 0;
        margin:             0;
    }
    /* 1.5 Compatibility. Remove when not used */
    body #community-wrap .cToolbar#cToolbarNav .cToolbar {
        background-position: 100% 0 !important;
        height:             40px !important;
        padding:            10px 0 0 !important;
        margin:             0 !important;        
    }
    
    #community-wrap .cToolbar ul {
        list-style:         none;
    }
    
    /* 1.5 Compatibility. Remove when not used */
    body #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList {
        float: none !important;
        height: 28px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: auto !important;
    }

    #community-wrap .cToolbar ul,
    #community-wrap .cToolbar ul li,
    #community-wrap .cToolbar ul li a {
         height:                28px;
    }

    #community-wrap .cToolbar ul li {
        background:         transparent url(../images/toolbar.png) no-repeat 0 -97px;
         float:                 left;
         padding:            0 0 0 12px;
         margin-right:        3px;
         position:            relative;
    }
    
    /* 1.5 Compatibility. Remove when not used */
#community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li {
        background:         transparent url(../images/toolbar.png) no-repeat 0 -97px !important;
         float:                 left !important;
         padding:            0 0 0 12px !important;
         margin:             0 !important;
         margin-right:        3px !important;
         position:            relative !important;
         line-height:        normal !important;
         list-style-image: none;
         list-style-type: none;
         list-style-image:   none;
    }
        #community-wrap .cToolbar ul li a {
            background:         transparent url(../images/toolbar.png) no-repeat 100% -97px;
            color:                 #fff;
            display:             block;
            line-height:        28px;
            padding:             0 12px 0 0;
            text-decoration:     none;
        }
        /* 1.5 Compatibility. Remove when not used */
        #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li a {
            background:         transparent url(../images/toolbar.png) no-repeat 100% -97px !important;
            color:                 #fff !important;
            display:             block !important;
            line-height:        28px !important;
            padding:             0 12px 0 0 !important;
            text-decoration:     none !important;
            border: none !important;
        }
        
        #community-wrap .cToolbar ul li a:focus {
             outline-style:         none;
        }

    #community-wrap .cToolbar ul li.toolbar-active {
        background-position: 0 -60px;
    }
    /* 1.5 Compatibility. Remove when not used */
    #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li.toolbar-active {
        background-position: 0 -60px !important;
    }
        #community-wrap .cToolbar ul li.toolbar-active a {
            background:         transparent url(../images/toolbar.png) no-repeat 100% -60px;
            text-shadow:        0 1px 0 #506522;
        }
        /* 1.5 Compatibility. Remove when not used */
        #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li.toolbar-active a {
            background:         transparent url(../images/toolbar.png) no-repeat 100% -60px !important;            
        }

    /** this is for logout link **/
    #community-wrap .cToolbar ul li#toolbar-item-logout,
    #community-wrap .cToolbar ul li#toolbar-item-logout a {
        color:                 #333;
        background:         none;
        padding:             1px 5px;
        margin:             0;
        height:             auto;
        line-height:         normal;
        float:                 right;
    }
    /* 1.5 Compatibility. Remove when not used */
    #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li#toolbar-item-logout,
    #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li#toolbar-item-logout a {
        color:                 #333 !important;
        background:         none !important;
        padding:             1px 5px !important;
        margin:             0 !important;
        height:             auto !important;
        line-height:         normal !important;
        float:                 right !important;        
    }
        #community-wrap .cToolbar ul li#toolbar-item-logout a:hover {
            text-decoration:     underline;
        }
        /* 1.5 Compatibility. Remove when not used */
        #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li#toolbar-item-logout a:hover {
            text-decoration:     underline !important
        }
    
    #community-wrap .cToolbar ul li#toolbar-item-notify {
        background-position:         0 -134px;
        padding-left:                20px;
    }
    /* 1.5 Compatibility. Remove when not used */
    #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li#toolbar-item-notify {
        background-position:         0 -134px !important;
        padding-left:                20px !important;        
    }
        #community-wrap .cToolbar ul li#toolbar-item-notify a {
            background-position:         100% -134px;
        }
        /* 1.5 Compatibility. Remove when not used */
        #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li#toolbar-item-notify a {
            background-position:         100% -134px !important;        
        }
        
            #community-wrap .cToolbar ul li#toolbar-item-notify a span {
                margin-top:        -2px;
                padding:         0 5px;
            }
            /* 1.5 Compatibility. Remove when not used */
            #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li#toolbar-item-notify a span {
                margin-top:        -2px !important;
                padding:         0 5px !important;
                display:        inline !important;
                font-size:      inherit !important;
                color:          inherit !important;
                height:         auto !important;
                line-height:    28px !important;
            }
    
            /** here we hide the submenu container bt default **/
            #community-wrap .cToolbar ul li div {
                position:            absolute;
                visibility:            hidden;
                z-index:            99999;    /* make sure it always on top of everything */
                left:                0;
                width:                180px;
                background:         none;
            }
            /* 1.5 Compatibility. Remove when not used */
            #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList div {
                position:            absolute !important;
                z-index:            99999 !important;    /* make sure it always on top of everything */
                left:                0 !important;
                width:                180px !important;
                background:         none !important;                
            }
                #community-wrap .cToolbar ul li div a {
                    background:         #444;
                    padding:            2px 10px;
                    border-bottom:         solid 1px #3d3d3d;
                }
                /* 1.5 Compatibility. Remove when not used */
                #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li div a {
                    background:         #444 !important;
                    padding:            2px 10px !important;
                    border-bottom:         solid 1px #3d3d3d !important;                    
                }
                #community-wrap .cToolbar ul li div a:hover {
                    background:         #333;
                }
                /* 1.5 Compatibility. Remove when not used */
                #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li div a:hover {
                    background:         #333 !important;
                }            
                #community-wrap .cToolbar ul li div a.has-separator {
                    border-bottom:         solid 2px #3d3d3d;
                }
                /* 1.5 Compatibility. Remove when not used */
                #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList div a.has-separator {
                    border-bottom:         solid 2px #3d3d3d !important;
                }
                #community-wrap .cToolbar ul li.toolbar-active div a {
                    background:         #789539;
                    border-bottom:         solid 1px #708b35;
                }
                /* 1.5 Compatibility. Remove when not used */
                #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li.toolbar-active div a {
                    background:         #789539 !important;
                    border-bottom:         solid 1px #708b35 !important;                        
                }
                #community-wrap .cToolbar ul li.toolbar-active div a.has-separator {
                    border-bottom:         solid 2px #708b35;
                }
                /* 1.5 Compatibility. Remove when not used */
                #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li.toolbar-active div a.has-separator {
                    border-bottom:         solid 2px #708b35 !important;
                }
                #community-wrap .cToolbar ul li.toolbar-active div a:hover {
                    background:         #93b746;
                }
                /* 1.5 Compatibility. Remove when not used */
                #community-wrap .cToolbar#cToolbarNav ul#cToolbarNavList li.toolbar-active div a:hover {
                    background:         #93b746 !important;
                }