Context Menu keeps aligning to left

[Zlatko.Lakisic]

1) Script Title: Context menu Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm

3) Describe problem: I am using your context menu script on my website and in FF (2.x) it keeps aligning to the left, i think its something in the CSS thats doing it, it doesnt do it in IE though. here is my CSS code below:



/* GENERAL SETTINGS */
body {
background-color:#FFFFFF;
margin:0px 0px 30px 0px;
padding:0px;
text-align:center;
}
body, td, div {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#003366;
line-height:14px;
vertical-align:top;
}
td, div {
text-align:left;
}



/* TR SETTINGS */
tr.tr_hover:hover {
background-color:#F9F9F9;
}



/* TD SETTINGS */



/* DIV SETTINGS */
div.div_header {
padding:10px 0px 0px 30px;
line-height:24px;
}
div.div_headerInner {
padding:0px 0px 10px 0px;
line-height:24px;
}



/* FONT SETTINGS */
font.font_header {
font-size:18px;
font-weight:bold;
}
font.font_title {
font-size:14px;
font-weight:bold;
}



/* AJAX TABS SETTINGS */
.shadetabs {
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li {
display: inline;
margin: 0;
}

.shadetabs li a {
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #777777;
background: white url(../ajaxtabs/shade.gif) top left repeat-x;
}

.shadetabs li a:visited {
color: #777777;
}

.shadetabs li a:hover {
text-decoration: none;
color: #FF6600;
background:#FFFFFF;
}

.shadetabs li.selected a {
color:#000000;
}

.shadetabs li.selected {
position: relative;
top: 0px;
}

.shadetabs li.selected a { /*selected main tab style */
background-image: url(../ajaxtabs/shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li.selected a:hover { /*selected main tab style */
text-decoration: none;
}

.contentstyle {
border: 1px solid gray;
width: 90%;
margin-bottom: 1em; padding: 10px;
}


/* TOOLTIP SETTINGS */
#fixedtipdiv {
position:absolute;
padding: 0px 5px 0px 5px;
border:1px solid black;
z-index:100;
}



/* RIGHT CLICK MENU SETTINGS */
.skin0{
position:absolute;
width:165px;
border:1px dashed #006699;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
font-size:14px;
z-index:100;
visibility:hidden;
padding:0px 4px 4px 4px;
}

.menuitems{
padding-left:10px;
padding-right:10px;
cursor:hand;
cursor:pointer;
}

.menuHeader{
padding:4px;
font-size:13px;
font-weight:bold;
}

[mburt]

/* GENERAL SETTINGS */
body {
background-color:#FFFFFF;
margin:0px 0px 30px 0px;
padding:0px;
text-align:center;
}
body, td, div {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#003366;
line-height:14px;
vertical-align:top;
}
td, div {
text-align:left;
}



/* TR SETTINGS */
tr.tr_hover:hover {
background-color:#F9F9F9;
}



/* TD SETTINGS */



/* DIV SETTINGS */
div.div_header {
padding:10px 0px 0px 30px;
line-height:24px;
}
div.div_headerInner {
padding:0px 0px 10px 0px;
line-height:24px;
}



/* FONT SETTINGS */
font.font_header {
font-size:18px;
font-weight:bold;
}
font.font_title {
font-size:14px;
font-weight:bold;
}



/* AJAX TABS SETTINGS */
.shadetabs {
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li {
display: inline;
margin: 0;
}

.shadetabs li a {
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #777777;
background: white url(../ajaxtabs/shade.gif) top left repeat-x;
}

.shadetabs li a:visited {
color: #777777;
}

.shadetabs li a:hover {
text-decoration: none;
color: #FF6600;
background:#FFFFFF;
}

.shadetabs li.selected a {
color:#000000;
}

.shadetabs li.selected {
position: relative;
top: 0px;
}

.shadetabs li.selected a { /*selected main tab style */
background-image: url(../ajaxtabs/shadeactive.gif);
border-bottom-color: white;
text-align:right;
}

.shadetabs li.selected a:hover { /*selected main tab style */
text-decoration: none;
}

.contentstyle {
border: 1px solid gray;
width: 90%;
margin-bottom: 1em; padding: 10px;
}


/* TOOLTIP SETTINGS */
#fixedtipdiv {
position:absolute;
padding: 0px 5px 0px 5px;
border:1px solid black;
z-index:100;
}



/* RIGHT CLICK MENU SETTINGS */
.skin0{
position:absolute;
width:165px;
border:1px dashed #006699;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
font-size:14px;
z-index:100;
visibility:hidden;
padding:0px 4px 4px 4px;
}

.menuitems{
padding-left:10px;
padding-right:10px;
cursor:hand;
cursor:pointer;
}

.menuHeader{
padding:4px;
font-size:13px;
font-weight:bold;
}

[Zlatko.Lakisic]

no thats not it, in the script it says its suppost to calculate where the right mouse button was clicked and its suppost to appear there, but in FF 2.x it doesnt (atleast on my page). In IE it shows where the button was clicked and it shows the menu in that place fine, but in FF it shows it where it is placed in the actual html code.

[Zlatko.Lakisic]

anyone?

[ripkens]

I changed the following:

From:
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX
menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY

menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX + "px";
menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY + "px";

FF needs the "px". Works now for me

[Zlatko.Lakisic]

wow thanks alot! lol a bit late but still much appreciated!

i think this fix should be added to the code!