widths are different in ie and ff?

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:47

widths are different in ie and ff?

Poster: dolface
Dated: Monday December 4 2006 - 23:18:54 GMT

i'm setting the widths of top-level menu items as follows:

Code:

aI("itemwidth=132;showmenu=community;text=community;url=/community/forum;");

padding is set to 4, but firefox is rendering it at 139px, and ie at 142px (both including a 1px border).

then, in order to get the submenus to line up, i need to set the width to 129px in ff, and 132px in ie.

am i missing something obvious?

Poster: vikenk
Dated: Tuesday December 5 2006 - 4:02:38 GMT

Hi,

Do you have an example URL we can see? This sounds like a classic IE vs. FF "Box Model" interpretation difference. Do you have a DocType at the top of the page?

Poster: dolface
Dated: Tuesday December 5 2006 - 16:06:14 GMT

here's a demo http://209.128.111.61:8100/
even if it is a model interpretation difference, shouldn't it be consistent in a given browser?

i don't need the menus to be indentical across all browsers, i'm just trying to figure out why the parent and sub have such a discrepancy

Poster: vikenk
Dated: Tuesday December 5 2006 - 20:03:12 GMT

Sorry, but I can't access your sample page. It may be a firewall thing here at work. I'll try again when I get home.

Quote:

even if it is a model interpretation difference, shouldn't it be consistent in a given browser?

No, not really. Unless there's a doctype declaration in your webpage, IE and FF will interpret the box model differently. The most basic explanation is this: If you set a total width of a table cell or div (for example) at 200px and the border width at 2px, IE will recalculate to INCLUDE the border width inside the total width. So for IE, it would be 196px (for content) + 2px (right border) + 2px (left border). Total width = 200px.

FF would calculate that like this: 200px (for content) + 2px (right border) + 2px (left border). Total width = 204px.

That's the box model difference. See a more detailed explanation here: http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

Now, I'm not certain this is your problem, but it sounds like it could be.

Poster: dolface
Dated: Tuesday December 5 2006 - 21:10:46 GMT

probably have port 8100 blocked...

i don't think it's a box-model issue, since the real problem i'm having is that ff renders 132px at different widths in the main menu and the submenu

(i'm not that concerned with how wide the items actually are, as long as mainMenuWidth == subMenuWidth)

i appreciate your help

Poster: Ruth
Dated: Tuesday December 5 2006 - 21:13:23 GMT

Hi,

I was trying to test this and I've narrowed the issue to something in the style sheet. The problem is I can't find the problem because the divs on the page are not correct. The opening tags are not equal to the closing tags and I have no idea what is extra to remove to make the divs be what they are supposed to be. With the extra tags, it really isn't possible to test more. If you can fix the divs and post the page again, I'll try to see if I can narrow it down to the actual problem.

If you want to see what I mean use the following page.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>welcome to baarbd.org - baarbd home</TITLE>
   <META http-equiv=Content-Type content="text/html; charset=windows-1252"><LINK 
href="styles_basic.css" type=text/css rel=stylesheet><LINK 
href="/favicon.ico" rel="shortcut icon"><META 
content="bay area adventure racing babes & dudes, Adventure Racing in the Bay Area - 
San Francisco and surrounding regions - Marin, East Bay, 
Penninsula, South Bay, and more!" 
name=description>
<META 
content="bay area adventure racing, san francisco 
adventure racing, adventure racing, adventure race, 
bay area, navigation, nav" 
name=keywords>
<META content="ALL, INDEX, FOLLOW" name=robots>
   <SCRIPT language=JavaScript src="milonic_src.js" 
type=text/javascript></SCRIPT>

<SCRIPT language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>"); </SCRIPT>

<SCRIPT language=JavaScript src="menu_data.js" 
type=text/javascript></SCRIPT>
<META content="MSHTML 5.50.4807.2300" name=GENERATOR>
</head>

<body><!-- open main body table -->
<TABLE id=header cellSpacing=0 cellPadding=0 border=0>
  <TBODY>
  <TR>
    <TD><!-- open header table -->
      <TABLE style="BACKGROUND-COLOR: rgb(255,255,255)" cellSpacing=0 
      cellPadding=0 border=0>
        <TBODY>
        <TR>
          <TD align=middle><A href="http://209.128.111.61:8100/"><IMG 
            src="header_05.jpg" border=0></A> </TD></TR>
        <TR>
          <TD><!-- open top nav table -->
            <TABLE style="BACKGROUND-COLOR: #ffffff" cellSpacing=0 cellPadding=0 
            width=800 border=0>
              <TBODY>
              <TR>
                <TD class=topnav_container align=middle>
                  <TABLE cellPadding=0 width=500 border=0>
                    <TBODY>
                    <TR>
                      <TD class="menutd">
                        <SCRIPT src="embedded_menu.js" 
                        type=text/javascript></SCRIPT>
                      </TD></TR></TBODY></TABLE><!-- close top nav table --></TD></TR></TBODY></TABLE><!-- close header table --></TD></TR>
</TBODY></TABLE>
<!-- close main body table? --> </BODY></HTML>

Ruth

Poster: dolface
Dated: Tuesday December 5 2006 - 21:25:23 GMT

hmm, i'm not sure what the issue is with the divs, but i'll take a look at it.
in the meantime, can you use one of the interior pages? they're a little simpler.

here's a pretty simple one: http://209.128.111.61:8100/gear/gear/

thanks!

Poster: Ruth
Dated: Tuesday December 5 2006 - 22:01:41 GMT

Hi,

The issue with the divs is that you don't have matching opening and closing div tags, and I can't fix it since I don't know which closing tags go with which opening tags to be able to figure out which closing ones are extra and if the opening tags have a matching closing tag.

I'll try the other page.

Ruth

Poster: Ruth
Dated: Tuesday December 5 2006 - 22:17:47 GMT

I just noticed that on those pages the menus are the same in IE 5.5, 6 winxp, and FF 1.0.2 and 1.5.08 win98. It looks like it's only on that other page you gave me.

Ruth

Poster: dolface
Dated: Tuesday December 5 2006 - 23:35:26 GMT

the might LOOK the same, but it's taking different code to get them that way (which is the problem i'd like to fix)

if you look at the source, in ff i'm serving menu_data_ff.js, for all other browsers it's menu_data.js

it's a clunky solution, and i'd rather find a cleaner fix if at all possible

Poster: Ruth
Dated: Wednesday December 6 2006 - 0:18:16 GMT

OK, I downloaded it and am working on it, but you should note another thing. In IE your page shows that curved page center in the center with a 20 px or so blue margin area on the right and left, but in FF there is no right side margin, your center white part butts right up to the right side of the browser. I'm just noting that just in case whatever is doing that in FF is also causing the problem in the submenu sizes.

Ruth

Poster: Ruth
Dated: Wednesday December 6 2006 - 2:18:55 GMT

Hi,

Try the following as your data files. Don't ask me why because I don't know.

embedded_main file

Code:

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
position="relative";
style=menuStyle;
menualign="center";
menuwidth=500;
margin=0;
aI("itemwidth=134;showmenu=community;text=community;url=/community/forum;");
aI("itemwidth=101;showmenu=racing;text=racing;url=/racing;pagematch=/racing;");
aI("itemwidth=125;showmenu=resources;text=resources;url=/resources;");
aI("itemwidth=104;showmenu=gear;text=gear +;url=/gear;");
}
drawMenus();

menu_data file

Code:

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=-2;


with(menuStyle=new mm_style()){
//bordercolor="#000000";
//borderstyle="solid";
//borderwidth=1;
fontfamily="Arial, Helvetica, sans-serif";
fontsize="12px";
fontweight="bold";
align="center";
fontstyle="normal";
headerbgcolor="#FFFFFF";
headercolor="#000000";
offbgcolor="#FFFFFF";
offcolor="#000099";
offborder="1px solid #000000";
onbgcolor="#6699CC";
oncolor="#333333";
onborder="1px solid #000000";
padding=4;
pagebgcolor="#6699CC";
pagecolor="#333333";
separatorcolor="#FFFFFF";
separatorsize=3;
}

with(subMenuStyle=new mm_style()){
onbgcolor="#6699CC";
oncolor="#333333";
offbgcolor="#ffffff";
offcolor="#000099";
bordercolor="#000000";
borderstyle="solid";
borderwidth=1;
separatorcolor="#000000";
separatorsize="1";
padding=4;
fontsize="12px";
fontstyle="normal";
fontfamily="Arial, Helvetica, sans-serif";
align="center";
headercolor="#FFFFFF";
headerbgcolor="#FFFFFF";

}

with(milonic=new menuname("community")){
style=subMenuStyle;
top="offset=-1px";
itemwidth=139;
aI("text=calendar;url=/community/calendarx;")
aI("text=forums;url=/community/forum;")
aI("text=ar glossary;url=/community/arwiki;")
aI("text=email list;url=/community/mailing_list;")

}

with(milonic=new menuname("racing")){
style=subMenuStyle;
top="offset=-1px";
itemwidth=106;
aI("text=teams;url=/racing/teams;");
aI("text=adventure race;url=/racing/ar;");
aI("text=cross-train;url=/racing/cross_train;");
}

with(milonic=new menuname("resources")){
style=subMenuStyle;
top="offset=-1px";
itemwidth=130;
aI("text=adventure race;url=/resources/ar/;");
aI("text=cross-train;url=/resources/cross_train;");
}

with(milonic=new menuname("gear")){
style=subMenuStyle;
top="offset=-1px";
itemwidth=108;
aI("text=gear;url=/gear/gear/;");
aI("text=nutrition;url=/gear/nutrition/;");
}

drawMenus();

I think this works, but I have tried so many things....

Ruth

Poster: dolface
Dated: Wednesday December 6 2006 - 21:00:48 GMT

that does work. many thanks!

i'll poke around at it when i get a second and see if i can figure out why it works. if i do i'll post back here.

thanks again for all your help.

Poster: Ruth
Dated: Wednesday December 6 2006 - 21:12:14 GMT

Hi,

We'd appreciate anything you find out.

I think it has something to do with how IE and FF treat the separator padding. When I first began experimenting, I tried to change the amount of separator padding to fix things which didn't work but I noticed when doing that how the 'space' between items changed differently in IE and FF. So I removed the separatorpadding altogether and added to the separatorsize instead things began to even out.

Ruth

Industrial Strength JavaScript and DHTML Menus

widths are different in ie and ff?