Cross browser menu width problem

Poster: stevvi
Dated: Friday February 3 2006 - 16:44:20 GMT

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.

Poster: Ruth
Dated: Friday February 3 2006 - 17:17:24 GMT

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

Poster: Migru
Dated: Friday February 3 2006 - 17:37:55 GMT

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



http://en.wikipedia.org/wiki/Internet_Explorer_box_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

Poster: stevvi
Dated: Friday February 3 2006 - 17:46:05 GMT

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  ");
}

Poster: Migru
Dated: Friday February 3 2006 - 18:06:08 GMT

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://www.milonic.com/itemproperties.php

Michael

Poster: stevvi
Dated: Friday February 3 2006 - 18:25:11 GMT

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?

Poster: Migru
Dated: Friday February 3 2006 - 19:35:02 GMT

...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://www.milonic.com/forum/viewforum.php?f=14
http://www.milonic.com/tablemenu.php
Menu Reference
http://www.milonic.com/styleproperties.php
http://www.milonic.com/menuproperties.php
http://www.milonic.com/itemproperties.php

Poster: stevvi
Dated: Friday February 3 2006 - 20:40:24 GMT

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

Poster: Ruth
Dated: Friday February 3 2006 - 22:26:00 GMT

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

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

Poster: Migru
Dated: Friday February 3 2006 - 23:01:08 GMT

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

Poster: Ruth
Dated: Saturday February 4 2006 - 0:03:27 GMT

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

Poster: Migru
Dated: Saturday February 4 2006 - 0:29:48 GMT

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

Poster: stevvi
Dated: Saturday February 4 2006 - 4:10:45 GMT

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?

Poster: vikenk
Dated: Saturday February 4 2006 - 5:57:24 GMT

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.

Poster: stevvi
Dated: Saturday February 4 2006 - 7:23:28 GMT

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!

Poster: Ruth
Dated: Saturday February 4 2006 - 8:53:33 GMT

Hi,

Vikenk is correct 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

DOCTYPE

Poster: Migru
Dated: Saturday February 4 2006 - 11:18:38 GMT

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



Michael

Poster: stevvi
Dated: Saturday February 4 2006 - 14:36:16 GMT

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,

Poster: Migru
Dated: Saturday February 4 2006 - 15:06:49 GMT

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

Poster: vikenk
Dated: Saturday February 4 2006 - 16:24:01 GMT

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?

Poster: Migru
Dated: Saturday February 4 2006 - 21:02:00 GMT

Hi Viken..
yes of course you are
correct ! Simply forgot the url.

To my surprise, when I took Stevvis page into an editor with "strict" settings, the 2 px difference still was there !! A good oportunity to trace some more syntax errors using the "strict" setting.
But what to do with the 2 px. Any idea ? And in FF it seems that the body margin setting is not ok !!

Michael

Poster: stevvi
Dated: Saturday February 4 2006 - 21:32:01 GMT

Migru,

We seem to be heading towards the esoteric. I am quite prepared to adhere to the "strict" code if need be, but that does seem to be a little extreme for what I am asking for. I really, really, don't need or want you to do anything else other than find a way to make the menu width property work cross browser. Everything else is negligable as i will sort that out whne i finally build the site.

Now, from what I gather, you're saying that the menuwidth setting does not work cross browser and you don't know of a solution to this problem? If so, please just say so and I'll live with it. If you do have a solution then please, please let me know.

I really don't mean to sound harsh or cruel but going off on tangents seems to be the way of things here. Please, I am a very professional web site designer of over 14 years experience, I don't need or want comments on anything other than how to solve this menuwidth problem.

Again, apologies. I'm sure this has all come out wrong...

Poster: Migru
Dated: Saturday February 4 2006 - 22:15:30 GMT

Hi Stevvi

my apologies !! I´m sorry, it really "has all come out wrong..." and it was never my intention to do anything else than to try to find a simple solution. It seems there isn´t any. It might be necessary to effect a compromise.


After some testing, my "best solution is" this:

a- using Transitional
b- setting the menu width to 778
c - borderwidth=1; // main menu style
d - fontsize="11px"; // main menu style
e -padding=0;// main menu style

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
followscroll=1;
left=0;
orientation="horizontal";
style=menuStyleMain;
top=74;
menuheight=24;
menuwidth=778;
aI("showmenu=About ARB;text=About ARB;itemwidth=92px;align=center;");
aI("showmenu=Education;text=Education;;itemwidth=92px;align=center;");
aI("showmenu=Registration;text=Registration;;itemwidth=88px;align=center;");
aI("showmenu=Regulation;text=Regulation;;itemwidth=88px;align=center;");
aI("showmenu=News;text=News & Information;;itemwidth=120px;align=center;");
aI("showmenu=Links;text=Links;;itemwidth=88px;align=center;");
aI("text=Registrant Services;;itemwidth=130px;align=center;");
aI("text=Index&nbsp;;itemwidth=88px;align=center;");
}


This had in both browsers (IE 6.02 and FF 1.5) an identical appearance.


Michael

Poster: Ruth
Dated: Saturday February 4 2006 - 23:13:33 GMT

Hi,

One solution is to use css classes for the border in the main menu.




The menu data file styles, main menu and 1st submenu would be:



All submenus would have the last item coded as the last item in this submenu. And note that the main menu has a different class in the 1st and last items.

I tested this is IE5.5, NN7.1, FF1.0.2, Opera 7.54 Opera wants the margin code set in the body tag, leftmargin=0px topmargin=0px. All the others looks the same size.

Maybe someone can test it using more up to date browser versions, also, the doctype I used is the Transitional.

Hope this helps.

Ruth

Poster: Migru
Dated: Sunday February 5 2006 - 1:44:35 GMT

Hi there again,

testet yours, Ruth,
good job the dotted borders

I´ve put them into a css file, called it "dotted_borders.css"

dotted_borders.css ( contents from Ruth)



The html file I tested is here:






The menu_data.js :

:
:



It is Ruths work, I have just modified

"11px" - because "11" only did not show the correct font size here
and set padding=0; // in main menu style only and removed
//menualign="center"; // I have commented out

placed the
"top.gif" file in an "images" - folder and the JavaScript files in an "js" folder

Ruth wrote



I have tested this with FF 1.5 and IE 6.02, both with good success.
Finally hope, that this helped too.
Special thanks to Ruth, I added a useful css file to my data files !!!

Michael

Poster: Ruth
Dated: Sunday February 5 2006 - 3:16:30 GMT

Hi Stevvi,

I forgot one thing. Sorry. Because you are using a horizontal main menu, the 1st level subs do not offset using the subOffset setting. To prevent what looks like two dotted borders when you mouseover a main menu item, you need to have top="offset=-1"; in the menu settings of those 1st level submenus, e.g.



If you'd like, since I did the whole data file to make sure everything was correct, I can post that and the css for you, save you a bit of coding. Just let me know, I can post it at the support.milonic section.

Ruth

Poster: stevvi
Dated: Sunday February 5 2006 - 7:15:25 GMT

Once again, many thanx for your help with this.

I have updated the page on http://c8.com/site (this is obviously not the finished item!).

I can sort out the width problem by setting individual itemwidths which will push the righthand border to where it should be.

The main problem I now have is that IE renders the menu at 30px height rather than 24 as it's adding the padding and border to the height. FF does the job perfectly. This is obviously the same problem I had with the width in the first place. Any ideas?

Just to complicate things further, is there a way to have the border as an image as IE renders dotted as dashed at 1px and it looks terrible?

Finally, Migru, apologies for my previous outburst. I put it down to overwork and a glass to much wine!

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

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


with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
followscroll=1;
left=0;
orientation="horizontal";
style=menuStyleMain;
top=74;
menuheight=24;
menuwidth=780;
aI("showmenu=About ARB;text=About ARB;offclass=mainbeg;onclass=mainbeg;");
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;offclass=mainend;onclass=mainend;");
}

with(milonic=new menuname("About ARB")){
style=menuStyle;
top="offset=-1";
aI("text=Introduction;url=/about/index.shtml;");
aI("text=How to find us;url=/about/how-to-find-us.shtml;");
aI("text=The Board;showmenu=The Board;");
aI("text=Board Committees;showmenu=Board Committees;");
aI("text=Architects Act 1997;url=/about/act/arctitects-act-1997.shtml;");
aI("text=The Architects Act 1997: Q&A;url=/about/the-architects-act-1997-qanda.shtml;");
aI("text=Architect's Qualifications (EC) Recogniton Order 2002;url=/about/the-architects-qualifications-ec-recognition-order-2002.shtml;");
aI("text=Freedom of Information Act;showmenu=Freedom;");
aI("text=Who we are;showmenu=Who we are;offclass=bordr1;onclass=bordr1;");
}

Poster: stevvi
Dated: Sunday February 5 2006 - 9:08:00 GMT

OK... after a bit more playing around and a lot of going round in circles I have got rid of the menuwidth setting and am forcing the item widths via padding in CSS (see below).

Getting rid of the top and bottom padding in the CSS helps with the height problem although I am still working on it.

I'm also now setting the menu border in menu_data.js

I'm sure there must be a reason why what I've done is wrong so please let me know if it is.

Cheers.

.mainbeg{
padding-right:8px;
padding-left:9px;
}

.mainmid{
padding-right:8px;
padding-left:9px;
}

.mainend{
padding-right:7px;
padding-left:9px;
}

Poster: Ruth
Dated: Sunday February 5 2006 - 12:52:39 GMT

Hi Stevvi,

What's the problem? The size seems to be the same in both IE and FF.

Ruth

Poster: stevvi
Dated: Sunday February 5 2006 - 14:46:34 GMT

Hi Ruth,

As siad in my previous post, I am now setting the width of the menu by setting the padding of the menuitems via CSS and totally abandoning the menuwidth property in menu_data.js. This seems to be working OK and gives good spacing between the menu items.

Thanx again.