Ok, testing things in FF3, the problem is due to the way you've defined your CSS, specifically, the line in red:
Code:
.chromestyle ul li a{
width:122px; /*MAIN MENU WIDTH CHANGE HERE*/
color: #494949;
padding:2px 0;
margin: 0;
text-decoration: none;
margin-left:auto and margin-right:auto
border-right: 1px solid #E0E0E0;
border-left: 1px solid #E0E0E0;
}
That line, while it affects IE, won't suffice in changing the height of each menu item in standard compliant browsers, such as Firefox. That's because "width" has no effect on SPAN elements, which are what the menu items consist of. You'll need to resort to just adding some padding to the left/right edges of each menu item to simulate the effect of width, such as:
Code:
.chromestyle ul li a{
color: #494949;
padding:2px 25px;
margin: 0;
text-decoration: none;
margin-left:auto and margin-right:auto
border-right: 1px solid #E0E0E0;
border-left: 1px solid #E0E0E0;
}
BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm
Bookmarks