Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:25
Menu width / Cross browser
Poster: slarti42uk
Dated: Friday June 4 2004 - 13:05:56 BST
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)
Poster: Maz
Dated: Friday June 4 2004 - 15:35:25 BST
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
Thanks
Poster: slarti42uk
Dated: Friday June 4 2004 - 15:45:44 BST
Thanks Maz for the reply. In diging around a bit I found this site http://glish.com/css/hacks.asp which says the following:
Quote:
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?
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
Poster: Ruth
Dated: Saturday June 5 2004 - 5:09:55 BST
With version 5.21
Code:
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;");
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
No padding though?
Poster: slarti42uk
Dated: Monday June 7 2004 - 17:23:29 BST
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.
Poster: Ruth
Dated: Monday June 7 2004 - 18:20:38 BST
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