Ok, I'm building a JS-based limitless-sublevel dynamic menu and am
making it cross browser as well - 3 packs of aspirin so far and
counting ;)
I'm having a weird rendering problem using Opera 7.51, even though it
displays fine in Mozilla 1.6, Firefox 0.9, Netscape 7.1 and Internet
Explorer 6.0
Hope someone can help!
In the HTML page ...
<table id="table_subme nu1" border="0" cellspacing="0" cellpadding="0"
style="Border: 1px solid #7E92A6; Position: absolute; Left: 0px; Top:
0px; Display: none;">
<tr>
<td>FLIBBLE</td>
</tr>
</table>
In the JS include ...
function showSubMenu( oMenu )
{
// Hide all menus below this one
var iMenuLevel = getMenuLevel( oMenu.id );
hideAllMenusBel owLevel( iMenuLevel );
// Break out if no sub-menu available
if ( !hasSubMenu(oMe nu.id) )
return false;
// Set up variables
var aThisMenuItems = getSubMenuItems ( oMenu.id );
var iThisLeft = bNetscapeBased ? getLeft( oMenu ) +
iNetscapeXOffse t : getLeft( oMenu );
var iThisTop = bNetscapeBased ? getTop( oMenu ) +
iNetscapeYOffse t : getTop( oMenu );
var iThisHeight = oMenu.offsetHei ght;
var iThisWidth = oMenu.offsetWid th;
var oSubMenuTable = eval( 'oTableSubmenu' + iMenuLevel );
var oSubMenuTbody = oSubMenuTable.g etElementsByTag Name( 'TBODY'
)[0];
// Clear the table
while ( oSubMenuTbody.h asChildNodes() )
oSubMenuTbody.r emoveChild( oSubMenuTbody.c hildNodes[0] );
// Build the table
for ( var iRow = 0; iRow < aThisMenuItems. length; iRow++ )
{
// Make the objects
var oNewTR = document.create Element( 'TR' );
var oNewTD = document.create Element( 'TD' );
var oNewDIV = document.create Element( 'DIV' );
var oNewTEXT = document.create TextNode( aSubMenuItems[
aThisMenuItems[iRow] ][0] );
// Add attributes/events to the objects
oNewTD.style.pa dding = '0px'; // Needed for
Opera browsers
oNewDIV.classNa me = 'menuitem';
if ( iRow > 0 )
oNewDIV.style.b orderTop = '1px solid #7E92A6';
// Add objects to the table
oNewDIV.appendC hild( oNewTEXT );
oNewTD.appendCh ild( oNewDIV );
oNewTR.appendCh ild( oNewTD );
oSubMenuTbody.a ppendChild( oNewTR );
}
// Show the table
with ( oTableSubmenu1. style )
{
display = 'block';
if ( iMenuLevel == 1 )
{
top = ( iThisTop + iThisHeight ) + 'px';
left = iThisLeft + 'px';
}
else
{
top = iThisTop + 'px';
left = ( iThisLeft + iThisWidth ) + 'px';
}
}
}
Ok, now THIS is the display in all the other browsers ...
http://freespace.virgin.net/martin.doyle1/rest.jpg
.... and THIS is how it displays in Opera
http://freespace.virgin.net/martin.doyle1/opera.jpg
It seems to be as if Opera is adding cellspacing to the table (if you
set the background color of the table it shows through, but not of the
cells) but I've explicitly turned it off and checked for it, and it's
not that. I also tried setting margin and padding of the tbody to
zero, but again no joy.
A sample site can be viewed at http://www.martindoyle.com/operasample
- while my PC is up and until this is solved anyway - so you can see
it in action.
Help desperately welcomed with open arms!!!
