Scripted Text Resize Tool Will Not Work in Firefox

[existing]

I've created a text resizing tool (option) at the top a web page. My code works perfectly in all major browsers with the exception of Firefox.

Scenario:
There is a "<div>" containing the text "Text Size", and two .png's floating to the right of that text ("Text Size"). When you click on the text "Text Size", the text nested within an article (id = "article1") should return to the default "fontSize" if not currently the default "fontSize". When you click on the first image, a minus symbol, the text nested within this article (id = "article1") should become smaller in pixel size down to "8px". When you click on the second image, a plus symbol, the text nested within the same article should become larger in pixel size up to "24px".

In Firefox only, the proceding code will result in absolutely nothing upon clicking on either the text "Text Size", the minus symbol image, or the plus symbol image.

The following code includes the javaScript and valid XHTML. A link to the webpage concerning this example is to follow in my next post, in the morning once I've uploaded the latest files to the server.

CODE:
Javascript:

//variables for the text sizing feature.
var totalArticles = 1;
var defaultTextSize = 12;
var currentTextSize = defaultTextSize;

//Intializes the text sizing feature.
function initializeTextSizers() {
var defaultTextSizeLink = document.getElementById("defaultTextSize");
var decreaseTextBtn = document.getElementById("decreaseTextBtn");
var increaseTextBtn = document.getElementById("increaseTextBtn");

decreaseTextBtn.style.cursor = "pointer";
increaseTextBtn.style.cursor = "pointer";

defaultTextSizeLink.onclick = resetTextSize;
decreaseTextBtn.onclick = textMinimize;
increaseTextBtn.onclick = textMaximize;
}

function resetTextSize() {
increaseTextBtn.style.cursor = "pointer";
decreaseTextBtn.style.cursor = "pointer";

if(currentTextSize < defaultTextSize || currentTextSize > defaultTextSize) {

for (var i=1; i <= totalArticles; i++) {
var article = document.getElementById("article" + i);

article.style.fontSize = defaultTextSize + "px";

currentTextSize = defaultTextSize;
}
}
}

function textMinimize() {
increaseTextBtn.style.cursor = "pointer";

if(currentTextSize > 8) {

for (var i=1; i <= totalArticles; i++) {
var article = document.getElementById("article" + i);

article.style.fontSize = currentTextSize - 2 + "px";

currentTextSize -= 2;
}
}

else {
decreaseTextBtn.style.cursor = "none";
}
}

function textMaximize(index) {
decreaseTextBtn.style.cursor = "pointer";

if(currentTextSize < 24) {

for (var i=1; i <= totalArticles; i++) {
var article = document.getElementById("article" + i);

article.style.fontSize = currentTextSize + 2 + "px";

currentTextSize += 2;
}
}

else {
increaseTextBtn.style.cursor = "none";
}
}

/////////////////////////////////////////////////////////////////////////////////////

XHTML relavant to the issue:

<div class="grid_2 copySizer omega">

<div class="floatObjectRight copySizerBtns">

<div id="decreaseTextBtn" class="floatObjectLeft"><a href="#"><img src="../images/shared/links/text_decrease_btn.png" height="16" width="16" /></a></div>

<div id="increaseTextBtn" class="floatObjectLeft"><a href="#"><img src="../images/shared/links/text_increase_btn.png" height="16" width="16" /></a></div>

</div>

<div id="defaultTextSize" class="copySizerTxt">

<a href="#">Text Size</a>

</div>

</div>

...AND...

<div id="article1">
<!--Introduction-->
<div class="grid_12 infoBar_41px">

//content in "article1"
<a name="introduction"></a>

<div class="floatObjectLeft">

<div class="imgAlpha"><img src="../images/library/chiro_an_intro/info_bar_header_introduction.png" height="41" width="159" /></div>

</div>

<div class="floatObjectLeft">

<img class="imgOmega" src="../images/library/chiro_an_intro/info_bar_introduction.png" height="41" width="771" />

</div>

</div>

<div class="clearByZero"></div>

<div class="grid_12 infoWindowBg">

<div class="lastInfoWindowBlock">

//text to change in "article1".
<p>Chiropractic is a health care approach that focuses on the relationship between the body's structure—mainly the spine—and its functioning. Although practitioners may use a variety of treatment approaches, they primarily perform adjustments to the spine or other parts of the body with the goal of correcting alignment problems and supporting the body's natural ability to heal itself.</p>

</div>

<div class="topOfPageLink">

<div class="topOfPageArrow floatObjectLeft"><img src="../images/shared/top_of_page_arrow.png" height="12" width="12" /></div>

<a href="#top">Top</a>

</div>

</div>

<div class="clearByZero"></div>

<div class="grid_12 infoWindowBottom"></div>

<div class="clear_8px"></div>

...more of this same sort of code continues after this.

//////////////////////////////////////////////////////////////////////////////////

Any help is appreciated! Thanks!

[existing]

I figured out what was causing this feature to not work in Firefox.

Solution:
I decided to take all the "...style.cursor..." instances out of my javaScript code. I saved the .js file, then refreshed my webpage in Firefox, and "magic", the text resize feature works now in ALL browsers!

One thing though, everytime I use this feature by clicking on the action buttons ("Text Size", +, -), In Opera 9.64, an annoying context popup menu keeps appearing, and I'm only left clicking.

Does any know a way to fix this?

Webpage link to come.

[existing]

Here is the webpage link: http://www.beverlyhillschiropractor....ue_3d/library/

[Fang]

Works correctly in Opera, no context menu.
What you are seeing is the double-click action.

[existing]

I have attached a cropped screenshot of what is happening when I click on any of the three text resizing links.

This happens when clicking on them too quickly. There are only no problems when I click slowly. Other browsers do not have this problem. I am using Opera 9.64.

[existing]

Oh, I just noticed that Fang said "What you are seeing is the double-click action."

Yes, that is true, but no other browsers do this. The "double-click action" is a very undesired effect. Do I need to specify that nothing should happen during the ondblclick event?

Thanks!

[Fang]

Opera users are aware of the double click action. Don't mess with the browser's UI.

[existing]

Yes, that's good advice.

Thanks FANG!