Menu width / Cross browser

[slarti42uk]

Hi,

I've read quite a few posts in the forum about this but I've not found a solution yet.

The problem I have is that the width and padding settings render deferently on IE 6, Mozila 1.4 and Opera 7.11

Example:
menuwidth=200
padding=5
itemwidth=200 (on all menu items)

In IE you get the intended result; a menu that is 200px wide and the text is padded in by 5px all round.


In Mozila you get a menu that is 210px wide!! It apears that mozila adds the padding each side to the width.


In Opera you get a mix (maybe this a clue to the location of the problem) The menu border gets rendered at 200px wide but then the items run over it and end up at 210px wide!



I've had the same problem with another javascript news scroller I used a couple of weeks ago but I couldn't sort it out.

Any ideas??
Most of the other posts sugested the use of both menuwidth and itemwidth wich is what I've done.
BTW I'm using version 5.21 (still in demo mode till I'm sure it works fine for my use)

[Maz]

Some irregularities oppered in 5.21, I've taken off menuwidth until its resolved. I heard Ruth suggest putting menuwidth in global styles, but I think that only disables it as far as I can tell. I think a little patience is required, so one fix doesn't lead to another. Thanks for pointing it out.

maz

[slarti42uk]

Thanks Maz for the reply. In diging around a bit I found this site http://glish.com/css/hacks.asp which says the following:

Nest Your Boxes
The problem with IE5x PC's box implementation is that it incorrectly puts the padding and border of a box WITHIN its stated width. The W3C states that padding and border are to be added to the width, and Opera, IE5 Mac, and Gecko (NS6, Mozilla, Galeon) correctly implement the box model. So a DIV with a stated width and also some padding and a border will have very different screen display in these two sets of browsers. One solution to this problem is to not assign padding or border to a DIV to which you have assigned a width. If you don't need a border effect, you can get your padding by simply setting margin or padding on all the box elements (DIVs, Ps, BLOCKQUOTEs, etc) contained with the DIV. If you need a border, simply nest a DIV within that DIV, do not assign it a width (it will fill up its parent DIV), and assign a border to the nested DIV. The problem with this technique is that you dirty up your markup with extraneous DIVs. Wouldn't it be better to move our workaround up into the CSS so that our nice structural mark-up remains pristine?

Not sure if that's any help. Good old Micro$oft!!!

[edit]
Just found this workaround to the box model problem. Could this in anyway be incorperated into the menu??
http://www.tantek.com/CSS/Examples/boxmodelhack.html


Cheers

[Ruth]

With version 5.21

Code: Select all

with(milonic=new menuname("menu")){
top=90;
left=1;
style=style1;
alwaysvisible=1;
menuwidth=200;
aI("text=Home;url=http://www.whatever.com/;itemwidth=200;");

coding the menuwidth and itemwidth like that will give you a 200 px wide vertical menu in Netsacpe 4.79, 6, 7, Opera 6, 7, Firebird.07, IE 5.5. I measured to make sure they were the same size. You only need the itemwidth in one item because it's a vertical menu.

Ruth

[slarti42uk]

Cheers for the reply. I see that it does work if you exclude the padding from the menu but then it's all to close together. I think it's the way the browsers handle the padding on the box model that is causing the problem. See above post.

Thanks for your time though.

[Ruth]

As far as I know padding is a style or item property not a menu property. Since you have a vertical menu you can set the itemheight. That is a property of style, menu and item, so you can put it in the global style declaration if you want all menus to have that height, or in a particular menu, or an item.

Ruth