Cross browser menu width problem

stevvi · Post by **stevvi** » Fri Feb 03, 2006 5:44 pm

I'm running version 5.742. When setting a menuwidth of 760 the menu displays fine in IE but is about 764 pixels wide in Firefox. Any ideas?

Thanx.

Post by **Ruth** » Fri Feb 03, 2006 6:17 pm

Hi,

It's may be that IE and FF render box properties differently. I remember reading something about one of them, probably IE including the border or soemthing in the box size when it's not supposed include it, something like that; or it may also have something to do with padding. If you could put up a test page we can test it and see if we can figure it out.

Ruth

Migru · Post by **Migru** » Fri Feb 03, 2006 6:37 pm

Hi

yes, that is correct, there is a so called "box" model bug, where the margin-border-padding-content settings are interpreted differently by the browsers. There are a number of publications in the web describing it

The Internet Explorer box model bug is one of the best-known software bugs in a popular implementation of Cascading Style Sheets (CSS).

http://en.wikipedia.org/wiki/Internet_E ... _model_bug

which is visible in IE up to version 5.5.
So what is being observed by stevvi not necessarily must be caused by this bug. It might be that or any other causes, css settings etc.etc.

Michael

stevvi · Post by **stevvi** » Fri Feb 03, 2006 6:46 pm

Please take a look at http://c8.com/site

At present there is only a graphic and the menu there so conflicting CSS etc. can't be a problem.

My menu stuff looks like this (oh yes, I meant 780 and 784 pixels):

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="#002389";
borderstyle="dotted";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="11";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#B0CBF8";
offcolor="#000000";
onbgcolor="#002662";
oncolor="#FFFFFF";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90)";
padding=2;
separatorcolor="#002389";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
image="inv.gif";
imagewidth=10;
itemwidth=200;
}

with(menuStyleMain=new mm_style()){
bordercolor="#002389";
borderstyle="dotted";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="11";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#B0CBF8";
offcolor="#000000";
onbgcolor="#002662";
oncolor="#FFFFFF";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90)";
padding=2;
separatorcolor="#002389";
separatorsize=0;
subimage="arrow.gif";
subimagepadding=2;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
followscroll=1;
left=0;
orientation="horizontal";
style=menuStyleMain;
top=74;
menuheight=24;
menuwidth=780;
aI("image=inv-8.gif;showmenu=About ARB;text=About ARB");
aI("showmenu=Education;text=    Education");
aI("showmenu=Registration;text=    Registration");
aI("showmenu=Regulation;text=    Regulation");
aI("showmenu=News;text=    News & Information");
aI("showmenu=Links;text=    Links");
aI("text=    Registrant Services");
aI("text=    Site Index  ");
}

Migru · Post by **Migru** » Fri Feb 03, 2006 7:06 pm

Hi

it is

    

which might cause the differences of your menuwidth displayed in different browsers!!

Find out individual item settings e.g itemwidth=70px;align=center; , part of the aI() string. or align=right; please see

http://milonic.com/itemproperties.php

Michael

stevvi · Post by **stevvi** » Fri Feb 03, 2006 7:25 pm

Thanx for the reply but having taken them out, the problem is still there. I guess an   should just be treated as a normal character anyway?

Migru · Post by **Migru** » Fri Feb 03, 2006 8:35 pm

...and all these semicolon in between ??
show me one of the milonic menus, where this is defined as the menu standard?!!

------------------------------------------
Help Links
Beginner
http://milonic.com/forum/viewforum.php?f=14
http://milonic.com/tablemenu.php
Menu Reference
http://milonic.com/styleproperties.php
http://milonic.com/menuproperties.php
http://milonic.com/itemproperties.php

stevvi · Post by **stevvi** » Fri Feb 03, 2006 9:40 pm

I'm not sure what you're asking. Are you saying that a standard " " isn't allowed in the text of a menu? If so, as I have said, it makes no difference if I take out the " " from the "text=" part of the menu. The width is still not right in Firefox.

To put it simply, the width in Firefox and IE does not seem to render the same. I can't believe that this problem hasn't surfaced here b4 as it seems quite fundamental.

As an aside, surely the "text="part of the menu should accept all standard html markup?

Cheers

Post by **Ruth** » Fri Feb 03, 2006 11:26 pm

The problem is the issue I mentioned with regard how IE makes the 'box' as opposed to other browsers. It doesn't matter if you do not have css listed, the menu programming uses things like divs, spans etc, so those should be rendered by the browser as described by the css standards.

The standards say that when a width is specified then that should be the width of the box content and not to included border, padding or margin. That means that when you say 780, FF, NN and others make it 780 before the borders, padding and margins, then they add the borders padding and margins to the specified width. IE makes it that size including the border, padding and margins.

Yes, you can use the nbsp ; in the text part. If you're trying to indent, you might create a css class

Code: Select all

.indent{text-indent:8px}

You would then call the class in the item you want indented, if you want them all then put it in the style, you need to call it as both off and on class, e.g. offclass="indent"; onclass="indent";

Ruth

Migru · Post by **Migru** » Sat Feb 04, 2006 12:01 am

Hi
thanks Ruth,
ok then it seems i was wrong
Michael

Post by **Ruth** » Sat Feb 04, 2006 1:03 am

Hi Michael,

Actually you weren't wrong in one sense. That could affect the item width depending on how browsers are doing the fonts but it shouldn't affect menuwidth, unless it makes it longer than it is set to be and then I think you'd have some of the items wrapping.

Ruth

Migru · Post by **Migru** » Sat Feb 04, 2006 1:29 am

Hi Ruth

- I was of the opinion, that this "box bug" existed up to IE 5.5 only but it seems there is still a difference
- second: I still consider it is not very "good style" and not well practicable to replace e.g.
text=XYZ;itemwidth=88px;align=center;
with something like
text=   XYZ;   
where I do absolutely not know (maybe by try and error only) when the necessary width will be achieved by all these " "

(I even imagine all the cut and paste commands or keyboard entries to achieve this)

- third, of course, if the menu has to have the cross browser capability, then it needs to have the width set in IE to 780 and in FF it seems to 778 or - and that what I prefer, put it in a table together with other elements, and set the table width to 780 and the menu width to 100%.
In this case the overall width might be different in browsers, but it will not look different.

There are certainly other workarounds too, e.g. to implement a switch, selecting the menu width, browser - dependent . (But I´ve not seen anything like that). Did you ?

Michael

stevvi · Post by **stevvi** » Sat Feb 04, 2006 5:10 am

Ruth & Migru,

Again, thanx for your replies. I am well aware of the inelegance of my code at present but I am sure you understand that I am in the very first stages of sorting out a design to present to the client. With that in mind, while all lessons in CSS etc. are honestly appreciated, all I am trying to sort out, at this point, is how to get the menu to display the correct width in all browsers so I can move on, knowing there won't be a problem in the future.

Migru, you mention other work arounds other than tables (I really don't want to resort to tables to sort this out... we are in the 21st century after all! :), can you point me in the right direction?

I'm a little stunned that a menu system as mature as Milonic hasn't an inbuilt work around for this problem.

Cheers.
PS. Having tried the table solution, it doesn't allow the followscroll to work. Any other ideas?

vikenk · Post by **vikenk** » Sat Feb 04, 2006 6:57 am

Hello,

I went to your test site (http://c8.com/site/).

I'm not sure if this is indicative of your code but, if it is, you may want to add a DOCTYPE statement at the top of your page. One thing that hasn't been mentioned about IE's "Box Model Bug" is that IE6 is forced into standards compliant mode when a doctype is used and *will* render the box model correctly.

Without a DOCTYPE, it's conceivable that the menu will have slightly different widths when viewed in the two different browsers because IE and Firefox will render the box differently. Since the menu is based on tables, this is a possibility.

See the chart at the bottom of this page for more info on the IE Box model and doctypes:

http://css.maxdesign.com.au/listamatic/ ... xmodel.htm

As the difference in width is only about 4 px, this could be an explanantion. Of course this is assuming that, like the test site, you aren't using any doctypes in the actual site.

Hope this helps.

stevvi · Post by **stevvi** » Sat Feb 04, 2006 8:23 am

Viken,

Thanx for the reply. Adding doctype reduces the width in IE by, what looks like, 2 pixels so I only have another 2 to get rid of!

Post by **Ruth** » Sat Feb 04, 2006 9:53 am

Hi,

Vikenk is correct

vikenk wrote:IE's "Box Model Bug" is that IE6 is forced into standards compliant mode when a doctype is used

I forgot to mention that. Without DOCTYPE it goes to quirksmode and the problem still exists.

By the way, your code isn't all that inelegant. Puts my test designs to shame

I was only making sure you knew about being able to create classes to set up various things if they were needed. I'm not all that conversant with css, seldom use it much, so you're ahead of the game!

Ruth

Migru · Post by **Migru** » Sat Feb 04, 2006 12:18 pm

Hi

the way the DOCTYPE is actually implemented may be better completed as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

then my suggestion to solve this menu issue is:

a - take out border and padding of the main menu style
b - set the offcolor to "transparent" (the color is provided by the "top.gif")
c - eventually modify the top.gif lightblue area by adding a border 1px, dotted or whatever you want
d - the fontsize in style settings are working better with

fontsize="11px"; vs fontsize="11";

now the menu width of 780 will be displayed in IE and Firefox (Opera not teted) accordingly.

I have made tests with settings as follows

Code: Select all

aI("image=inv-8.gif;showmenu=About ARB;text=About ARB;itemwidth=92;align=center;");
aI("showmenu=Education;text=Education;itemwidth=92;align=center;");
aI("showmenu=Registration;text=Registration;itemwidth=92;align=center;");
aI("showmenu=Regulation;text=Regulation;itemwidth=92;align=center;");
aI("showmenu=News;text=News & Information;itemwidth=140;align=center;");
aI("showmenu=Links;text=Links;itemwidth=62;align=center;");
aI("text=Registrant Services;itemwidth=122;align=center;");
aI("text=Site Index;itemwidth=82;align=center;");

Michael

stevvi · Post by **stevvi** » Sat Feb 04, 2006 3:36 pm

Migru,

Many thanx for the suggestions. As previously intimated, I am not really worried about anything other than getting the width of the menu the same in both FF & IE (Opera comes later!

I don't want to set the border in the graphic as the menu is scrollable and, obviously, the graphic won't scroll with the menu (that graphic will be ditched in favour of html if the client agrees the design). The only reason I want the border is to separate the menu from the page once it has scrolled.

cheers,

Migru · Post by **Migru** » Sat Feb 04, 2006 4:06 pm

Hi

ok, if that is important, you have to make use of the so-called

"strict" declaration, which sets the width in all browsers in the same way!
But then, of course you need to code all your html in "strict".

Doctype for strict is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Michael

vikenk · Post by **vikenk** » Sat Feb 04, 2006 5:24 pm

Sorry Michael....

You left out the rest of the strict doctype. For the doctype to worl properly (as far as I know) you need to put the full doctype in there, with the url to the DTD. So the proper doctype is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Stevvi,

Have you found the 2px difference?