offsetLeft property

[leeb]

Hello all,

I have a problem with Netscape 7.1 DOM!

In IE6 the offsetLeft property works fine, but in Netscape 7.1 it doesn't. :confused:

Can anyone tell me the property to use please?

Thank you in advance,

Lee

[Khalid Ali]

offsetLeft should work without any problem,show us the code(html + javascript)

[leeb]

Hi,

Here is the HTML code (or the first few lines of what I need to be positioned):

<FORM ID="Form1" ACTION="index.aspx" METHOD="post" RUNAT="server">
<TABLE WIDTH="100%" HEIGHT="100%" BORDER="0">
<TR>
<TD ALIGN="center" VALIGN="middle">
<TABLE ID="tblMain" STYLE="BACKGROUND-POSITION: center center; Z-INDEX: 100; BACKGROUND-ATTACHMENT: fixed; WIDTH: 904px; BACKGROUND-REPEAT: no-repeat"
HEIGHT="590" CELLSPACING="0" CELLPADDING="0" BGCOLOR="#ffffff" BORDER="0" RUNAT="server"
BACKGROUND="Images/Start_Bild.jpg">
<TR>
<TD ID="tdMenu" COLSPAN="2" HEIGHT="23" RUNAT="server" ALIGN="left"><UC1:PAGEMENU ID="PageMenu1" RUNAT="server" XSLFILENAME="MenuNS.xsl" XMLFILENAME="Menu.xml"></UC1:PAGEMENU></TD>
</TR>
<TR>


and now the Javascript:


function OpenMenu(eSrc,eMenu)
{
eMenu.style.left = eSrc.offsetLeft + document.getElementById("divMenuBar").offsetLeft;
eMenu.style.top = document.getElementById("divMenuBar").offsetHeight + (document.getElementById("divMenuBar").offsetTop - 1);
//eMenu.style.visibility = "visible";
eMenu.className = 'clsMenuShow';
eOpenMenu = eMenu;
}


and finally the XSL:


<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<!-- BUILD MENU BAR -->
<DIV ID="divMenuBar">
<TABLE ID="tblMenuBar" BORDER="0">
<TR>
<xsl:for-each select="//TOPICS">
<TD CLASS="clsMenuBarItem">
<xsl:attribute name="ID">tdMenuBarItem<xsl:value-of select="@TYPE" /></xsl:attribute>
<xsl:attribute name="nowrap" />
<xsl:choose>
<xsl:when test="URL &gt; 0">
<xsl:attribute name="onclick">SubmitMe('<xsl:value-of select="URL" />');</xsl:attribute>
<xsl:attribute name="onmouseover">this.style.backgroundColor = 'aliceblue'; document.getElementById('hidLevel1').value = '<xsl:value-of select="@TYPE" />'; document.getElementById('hidLevel3').value = ''; document.getElementById('hidLevel2').value = ''; mouseOver(this);</xsl:attribute>
<xsl:attribute name="onmouseout">this.style.backgroundColor = 'white'; document.getElementById('hidLevel1').value = '<xsl:value-of select="@TYPE" />'; document.getElementById('hidLevel3').value = ''; document.getElementById('hidLevel2').value = ''; mouseOut(this);</xsl:attribute>
<xsl:attribute name="STYLE">WIDTH: <xsl:value-of select="WIDTH" />; Z-INDEX: 102</xsl:attribute>
<xsl:value-of select="@TYPE" />
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="onmouseover">document.getElementById('hidLevel1').value = '<xsl:value-of select="@TYPE" />'; document.getElementById('hidLevel3').value = ''; document.getElementById('hidLevel2').value = ''; mouseOver(this);</xsl:attribute>
<xsl:attribute name="STYLE">WIDTH: <xsl:value-of select="WIDTH" />; Z-INDEX: 102</xsl:attribute>
<xsl:value-of select="@TYPE" />
</xsl:otherwise>
</xsl:choose>
</TD>
<xsl:if test="position()!=last()">
<TD>|</TD>
</xsl:if>
</xsl:for-each>
</TR>
</TABLE>
</DIV>
<!-- BUILD INDIVIDUAL MENUS -->
<xsl:for-each select="//TOPICS[TOPIC]">
<DIV CLASS="clsMenu">
<xsl:attribute name="ID">divMenu<xsl:value-of select="@TYPE" /></xsl:attribute>
<xsl:for-each select="TOPIC">
<DIV CLASS="clsMenuItem">
<xsl:attribute name="ID">tblMenuItem<xsl:value-of select="TITLE" /></xsl:attribute>
<xsl:attribute name="nowrap" />
<xsl:attribute name="onmouseup">SubmitMe('<xsl:value-of select="URL" />');</xsl:attribute>
<xsl:attribute name="onmouseover">this.style.backgroundColor = 'aliceblue'; document.getElementById('hidLevel2').value = this.innerText; document.getElementById('hidLevel3').value = ''; mouseOver(this);</xsl:attribute>
<xsl:attribute name="onmouseout">this.style.backgroundColor = 'white'; mouseOut();</xsl:attribute>
<xsl:attribute name="STYLE">WIDTH: <xsl:value-of select="WIDTH" />; HEIGHT: 15px; Z-INDEX: 102</xsl:attribute>
<xsl:value-of select="TITLE" />
</DIV>
</xsl:for-each>
</DIV>
</xsl:for-each>
<!-- BUILD INDIVIDUAL SUB-MENUS -->
<xsl:for-each select="//TOPICS/TOPIC[SUBTOPIC]">
<DIV CLASS="clsSubMenu">
<xsl:attribute name="ID">divSubMenu<xsl:value-of select="TITLE" /></xsl:attribute>
<xsl:for-each select="SUBTOPIC">
<DIV CLASS="clsSubMenuItem">
<xsl:attribute name="ID">tblSubMenuItem<xsl:value-of select="TITLE" /></xsl:attribute>
<xsl:attribute name="nowrap" />
<xsl:attribute name="onmouseup">SubmitMe('<xsl:value-of select="URL" />');</xsl:attribute>
<xsl:attribute name="onmouseover">this.style.backgroundColor = 'aliceblue'; document.getElementById('hidLevel3').value = this.innerText; mouseOver(this);</xsl:attribute>
<xsl:attribute name="onmouseout">this.style.backgroundColor = 'white'; mouseOut();</xsl:attribute>
<xsl:attribute name="STYLE">WIDTH: <xsl:value-of select="WIDTH" />; HEIGHT: 15px; Z-INDEX: 102</xsl:attribute>
<xsl:value-of select="TITLE" />
</DIV>
</xsl:for-each>
</DIV>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>



I have read through the books to see but it makes no difference. The XSL produces a menu bar and when the mouse goes over the main item the dropdown menu doesn't line up with the item. I have found that it's not the offsetLeft property, but I need to find the number of pixels are to the left of tblMain.

Thanks

Lee

[leeb]

I have now solved the problem, I asked for the table offsetLeft instead of the controls offsetLeft and it works perfect.

Lee