css width and padding creating different appearances in fire

Poster: nif
Dated: Tuesday July 17 2007 - 22:57:34 BST

hi there,

i have a couple of sites where i need to have a very specific width for a vertical navigation. when a menu item is rolled over, a background colour displays and this needs to be very specific.

the problem i am having is that when i specify a width for the nav items and then add padding, the widths of the nav somehow differ in ie and firefox... firefox being the browser that doesn't render logically.

i am applying styles to each nav item via classes set in a css file.
i've pasted my code below... the classes, as mentioned are in an external css file.
basically the total width of the items should be 180px... assigned 175px for width and 5px for left-padding... firefox seems to add 5px extra.

any help would be much appreciated.
thanks,
nikki

.mainNavItem {
width: 175px;
font-family : Verdana, Arial, Tahoma;
font-size: 12px;
font-weight: bold;
padding-left: 5px;
padding-top: 1px;
padding-bottom: 1px;
padding-right: 0px;
color: #659fb5;
text-align: left;
}

.mainNavItemOver {
background-color: #659fb5;
color: #FFFFFF;
}


fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=5;

with(menuStyle=new mm_style()){
overfilter="Fade(duration=0.2);";
offclass="mainNavItem";
onclass="mainNavItem mainNavItemOver";
separatorsize=1;
separatorheight=1;
separatorpadding=0;
separatoralign="center";
}

with(milonic=new menuname("main_menu")){
position="relative";
alwaysvisible=1;
left=0;
orientation="vertical";
style=menuStyle;
top=0;
if (main_item == "home") {
aI("text=Home;url=home.html;offclass=mainNavItem mainNavItemOver;");
} else {
aI("text=Home;url=home.html;");
}
if (main_item == "press_releases") {
aI("text=Press releases;url=press_releases.html;offclass=mainNavItem mainNavItemOver;");
} else {
aI("text=Press releases;url=press_releases.html;");
}
if (main_item == "search_results") {
aI("text=Search results;url=search_results.html;offclass=mainNavItem mainNavItemOver;");
} else {
aI("text=Search results;url=search_results.html;");
}
if (main_item == "divisions") {
aI("text=Divisions;showmenu=divisions;offclass=mainNavItem mainNavItemOver;");
} else {
aI("text=Divisions;showmenu=divisions;");
}
if (main_item == "sitemap") {
aI("text=Sitemap;url=sitemap.html;offclass=mainNavItem mainNavItemOver;");
} else {
aI("text=Sitemap;url=sitemap.html;");
}
if (main_item == "odds_and_ends") {
aI("text=Odds & ends;url=odds_and_ends.html;offclass=mainNavItem mainNavItemOver;");
} else {
aI("text=Odds & ends;url=odds_and_ends.html;");
}
}

Poster: Ruth
Dated: Friday August 3 2007 - 7:47:03 BST

Hi,

Unfortunately, to help on this we actually need a page and all the css file since it may be something else in the file that is causing the difference between the browsers.

Sorry, I just realized you found the problem. I will try and play with it and see if there is a solution to it, but that may be an actual browser issue and how it renders the box model. I happen to agree with you that IE is logical and the other browsers not, but we are in a minority here


Ruth

Poster: Ruth
Dated: Saturday August 4 2007 - 5:46:48 BST

Hi Nikki,

I'm still going to need your page and files since that's the only way I can see what's happening given your sizes of divs, tables etc. I just made a little table width 180 and the menu looks the same on mouseover in IE and Firefox, so I will need to be able to play around with thing using your layout.

Ruth

Poster: nif
Dated: Friday August 10 2007 - 10:49:23 BST

hi there,

sorry so long for reply.
regarding this issue, i believe there is no real solution for it unfortunately due to certain browser differences. it has to do with padding and widths and how each browser deals with these.

my solution in the end was to use 100% for width but to accept that the subnav would never hover in a very specific spot... this took a little convincing, but seemed easier than trying to sort out the nav.

i am now battling new fires with a horizontal nav and offsets that appear not to work, but i will post that in a new topic.

thanks,
nikki

Poster: Ruth
Dated: Saturday August 11 2007 - 3:43:05 BST

Hi,

Yes, the browsers are different. Usually you can get them to be the same within a px or two but you have to test all the css coding to see if anything is causing the difference in the various browsers. This is do to the fact that some generic things like TD, TR, DIV coding in css can affect the menu's styling.

Ruth