kaweb
09-20-2005, 08:04 AM
I'm not sure if this is the right place for this post, so please excuse me if it is not.
I'm currently working on a website that should have a hovermenu with submenus on the left side. I have worked my way out from the advanced categories.php, but I have a problem when I try to place the hovermenu. It seems to move down below the table in which I have placed the menu.
In explorer I have no problems.
But in Firefox I have the problem mentioned above.
This is the link to my website:
colleges.dk (http://www.colleges.dk)
Can someone help me. :( This is the source code for categories.php:
<?php
if(!defined('IN_SUBDREAMER'))
{
die("Hacking attempt!");
}
if($usehovermenu = $DB->query_first("SELECT categoryid FROM " . TABLE_PREFIX . "categories WHERE parentid != 0 LIMIT 1"))
{
echo "<style type=\"text/css\">
.mtable
{
border-top: 1px solid #a2a2a2;
border-left: 1px solid #a2a2a2;
border-right: 1px solid #a2a2a2;
border-bottom: 1px solid #a2a2a2;
background-color: #ffffff;
}
.a0
{
font-family: verdana, arial;
}
.a1
{
font-family: verdana, arial;
background: #e9e9e9;
}
.categorydefault
{
font: 10px verdana; color: #b3b3b3; text-decoration: none; font-weight:bold; font-stretch: expanded; line-height: 10px;
}
.categoryhover
{
font: 10px verdana; color: #909090; text-decoration: none; font-weight:bold; font-stretch: expanded; line-height: 10px; border-bottom: 1px solid #ccc;
}
.categoryclicked
{
font: 10px verdana; color: #909090; text-decoration: none; font-weight:bold; font-stretch: expanded; line-height: 10px; border-bottom: 1px solid #ccc;
}
</style>
<script language=\"JavaScript\">
<!--
// preload a few images for the hovermenu
var ii0 = new Image(); ii0.src = 'includes/javascript/hovermenu/pixel.gif';
var ii1 = new Image(); ii1.src = 'skins/advanced/images/subcategory_arrow.gif';
function wrap_root (text)
{
/*normal, hover, click*/
return ['<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td><table cellpadding=0 cellspacing=0 border=0 width=150px ><tr><td width=150px class=categorydefault> ' + text + ' </td></tr></table></td></tr></table>',
'<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td><table cellpadding=0 cellspacing=0 border=0 width=150px ><tr><td width=150px class=categoryhover > ' + text + ' </td></tr></table></td></tr></table>',
'<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td><table cellpadding=0 cellspacing=0 border=0 width=150px ><tr><td width=150px class=categoryclicked> ' + text + ' </td></tr></table></td></tr></table>'
];
}
function wrap_parent (text)
{
/*normal, hover, click*/
return [['<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td width=150px class=a0> ', text, '</td></tr></table>'].join(''),
['<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td width=150px class=a1> ', text, '</td></tr></table>'].join(''),
['<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td width=150px class=a1> ', text, '</td></tr></table>'].join('')
];
}
function wrap_child (text)
{
/*normal, hover, click*/
return [['<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td width=150px class=a0> ', text, '</td></tr></table>'].join(''),
['<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td width=150px class=a1> ', text, '</td></tr></table>'].join(''),
['<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td width=150px class=a1#cccccc> ', text, '</td></tr></table>'].join('')
];
}
var MENU_POS =[
// Level 0 block configuration
{
// Item's height in pixels
'height' : 21,
// Item's width in pixels
'width' : 120,
// if Block Orientation is vertical
'vertical' : true,
// Time Delay in milliseconds before subling block expands
// after mouse pointer overs an item
'expd_delay' : 0,
// Style class names for the level
'css':
{
// Block outing table class
'table' : '',
// Item outer tag style class for all item states or
// classes for [<default state>, <hovered state>, <clicked state>]
'outer' : '',
// Item inner tag style class for all item states or
// classes for [<default state>, <hovered state>, <clicked state>]
'inner' : ''
}
},
// Level 1 block configuration
{
'width' : 140,
'height' : 14,
// Vertical Offset between adjacent levels in pixels
'block_top' : 19,
// Horizontal Offset between adjacent levels in pixels
'block_right' : 100,
// block behaviour if single frame:
// 1 - shift to the edge, 2 - flip relatively to left upper corner
'wise_pos' : 2,
'vertical' : true,
// transition effects for the block
// [index on expand, duration on expand, index on collapse, duration on collapse]
'transition' : [1, 0.3, 1, 0.3],
// Time Delay in milliseconds before menu collapses after mouse
// pointer lefts all items
'hide_delay' : 300,
'css' :
{
'table' : 'mtable',
'outer' : '',
'inner' : ''
}
},
// Level 2 block configuration
{
'block_top' : 0,
'block_left' : 160
}
//Subling level configurations are inherited from level 2
]
var MENU_ITEMS = [";
CreateHoverMenu();
echo "];
new menu (MENU_ITEMS, MENU_POS);
//-->
</script>";
}
else
{
// use normal category menu
for($i = 0; $i < $categoryrows; $i++)
{
echo '<tr height="21px"><td width="100%" align="right" valign="middle" class="navigation">'.$categoryname[$i].' ('.$categorylink[$i].')skins/affinity/images/a_navigation_bullet.jpg</td></tr>';
}
}
I'm currently working on a website that should have a hovermenu with submenus on the left side. I have worked my way out from the advanced categories.php, but I have a problem when I try to place the hovermenu. It seems to move down below the table in which I have placed the menu.
In explorer I have no problems.
But in Firefox I have the problem mentioned above.
This is the link to my website:
colleges.dk (http://www.colleges.dk)
Can someone help me. :( This is the source code for categories.php:
<?php
if(!defined('IN_SUBDREAMER'))
{
die("Hacking attempt!");
}
if($usehovermenu = $DB->query_first("SELECT categoryid FROM " . TABLE_PREFIX . "categories WHERE parentid != 0 LIMIT 1"))
{
echo "<style type=\"text/css\">
.mtable
{
border-top: 1px solid #a2a2a2;
border-left: 1px solid #a2a2a2;
border-right: 1px solid #a2a2a2;
border-bottom: 1px solid #a2a2a2;
background-color: #ffffff;
}
.a0
{
font-family: verdana, arial;
}
.a1
{
font-family: verdana, arial;
background: #e9e9e9;
}
.categorydefault
{
font: 10px verdana; color: #b3b3b3; text-decoration: none; font-weight:bold; font-stretch: expanded; line-height: 10px;
}
.categoryhover
{
font: 10px verdana; color: #909090; text-decoration: none; font-weight:bold; font-stretch: expanded; line-height: 10px; border-bottom: 1px solid #ccc;
}
.categoryclicked
{
font: 10px verdana; color: #909090; text-decoration: none; font-weight:bold; font-stretch: expanded; line-height: 10px; border-bottom: 1px solid #ccc;
}
</style>
<script language=\"JavaScript\">
<!--
// preload a few images for the hovermenu
var ii0 = new Image(); ii0.src = 'includes/javascript/hovermenu/pixel.gif';
var ii1 = new Image(); ii1.src = 'skins/advanced/images/subcategory_arrow.gif';
function wrap_root (text)
{
/*normal, hover, click*/
return ['<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td><table cellpadding=0 cellspacing=0 border=0 width=150px ><tr><td width=150px class=categorydefault> ' + text + ' </td></tr></table></td></tr></table>',
'<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td><table cellpadding=0 cellspacing=0 border=0 width=150px ><tr><td width=150px class=categoryhover > ' + text + ' </td></tr></table></td></tr></table>',
'<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td><table cellpadding=0 cellspacing=0 border=0 width=150px ><tr><td width=150px class=categoryclicked> ' + text + ' </td></tr></table></td></tr></table>'
];
}
function wrap_parent (text)
{
/*normal, hover, click*/
return [['<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td width=150px class=a0> ', text, '</td></tr></table>'].join(''),
['<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td width=150px class=a1> ', text, '</td></tr></table>'].join(''),
['<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td width=150px class=a1> ', text, '</td></tr></table>'].join('')
];
}
function wrap_child (text)
{
/*normal, hover, click*/
return [['<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td width=150px class=a0> ', text, '</td></tr></table>'].join(''),
['<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td width=150px class=a1> ', text, '</td></tr></table>'].join(''),
['<table cellpadding=0 cellspacing=0 border=0 width=150px><tr><td width=150px class=a1#cccccc> ', text, '</td></tr></table>'].join('')
];
}
var MENU_POS =[
// Level 0 block configuration
{
// Item's height in pixels
'height' : 21,
// Item's width in pixels
'width' : 120,
// if Block Orientation is vertical
'vertical' : true,
// Time Delay in milliseconds before subling block expands
// after mouse pointer overs an item
'expd_delay' : 0,
// Style class names for the level
'css':
{
// Block outing table class
'table' : '',
// Item outer tag style class for all item states or
// classes for [<default state>, <hovered state>, <clicked state>]
'outer' : '',
// Item inner tag style class for all item states or
// classes for [<default state>, <hovered state>, <clicked state>]
'inner' : ''
}
},
// Level 1 block configuration
{
'width' : 140,
'height' : 14,
// Vertical Offset between adjacent levels in pixels
'block_top' : 19,
// Horizontal Offset between adjacent levels in pixels
'block_right' : 100,
// block behaviour if single frame:
// 1 - shift to the edge, 2 - flip relatively to left upper corner
'wise_pos' : 2,
'vertical' : true,
// transition effects for the block
// [index on expand, duration on expand, index on collapse, duration on collapse]
'transition' : [1, 0.3, 1, 0.3],
// Time Delay in milliseconds before menu collapses after mouse
// pointer lefts all items
'hide_delay' : 300,
'css' :
{
'table' : 'mtable',
'outer' : '',
'inner' : ''
}
},
// Level 2 block configuration
{
'block_top' : 0,
'block_left' : 160
}
//Subling level configurations are inherited from level 2
]
var MENU_ITEMS = [";
CreateHoverMenu();
echo "];
new menu (MENU_ITEMS, MENU_POS);
//-->
</script>";
}
else
{
// use normal category menu
for($i = 0; $i < $categoryrows; $i++)
{
echo '<tr height="21px"><td width="100%" align="right" valign="middle" class="navigation">'.$categoryname[$i].' ('.$categorylink[$i].')skins/affinity/images/a_navigation_bullet.jpg</td></tr>';
}
}