Problem fixed

Stupid me fixed the problem. I basically removed the padding at the bottom. Here's the code now.

#mainMenu {
clear: both;
padding: 10px 10px 0px; /* notice the 0px for bottom */
height: 55px;
voice-family: "\"}\"";
voice-family:inherit;
height: 35px;
}
html>body #mainMenu {
height: 35px;
}

Another thing I thought I should blog to remind me. Differences between "Margin" and "Padding". Your background images fills up the entire box PLUS the padding. Your text fills up only the box. And margin is the white space surrounding the padding, which will not have the background image.

I feel proud of myself.

Another thing I should take note of is that photoshop generates much better gif files than fireworks, though that might mean I might not know how to generate great gifs using fireworks. But I did used the same default profiles on each application. Anyway, the size generated are different too, but what the heck, everyone's on broadband nowadays.

Cheerios