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:48
CSS Stylesheet Issue
Poster: SLEO577
Dated: Thursday November 16 2006 - 7:56:17 GMT
After reading several posts on issues relating to menu/submenu expanding across the entire width of a webpage. I couldn't find a posting addressing how to fix this problem, other than asking the client to upgrade to the newest version.
I too am having the same issue whereas, my submenu's (with mouseover) are expanding the entire width of my webpage. So I decided to look at the code of every CSS file I had and I started commenting out lines referring to width until I found the problem.
In my case, it is in my webpages style.css:
table {
width: 100%;
margin: 5;
padding: 5;
font-size: small
Once I commented out the code in red, the Milonic menu worked great, but at the expense of my website. Now my webpage is half the size because the table width was removed.
So my question is, how do I get these two items to play nicely? I can't remove my style.css file for my website, but I can't have a menu that expands the entire width of my website also.
Is it possible to have the Milonic work off of it owns CSS file, so it doesn't rely on my style.css file?
Poster: Ruth
Dated: Thursday November 16 2006 - 14:20:19 GMT
Hi,
Please post a url so we can work on the issue. There's no way to do it just from your css info. The reason for most of the 'upgrade' to the newest version is that bugs in how browsers processed widths were fixed and so the issue was resolved.
If we can have your page we would then have the html, css and menu data to see all the variables.
With regard to some issues, some css generic codes such as table tr td can cause problems, usually the workaround is to code the tables as classes.
Ruth
Poster: SLEO577
Dated: Thursday November 16 2006 - 16:52:45 GMT
Hello Ruth,
Thank you for the quick reply. Unfortunately, I cannot give you the URL of the website as it is a members only site. Even if you went to the URL, you'd only get the style.css in your temp folder because the Milonic menu doesn't load until login. And because of this issue, I don't have the Milonic menu running on the website anyways.
I can give you access to the website, but it would have to be at a time and place where we could be on it at the same time so I could load the Milonic menu and let you see what is happening. I would PM you the URL, but appearently, that has been disabled on this forum.
If you would like for me to send you a specific file(s) or if you have another suggestion, please let me know. I have spent a couple days reading this forum and the CSS pages listed by Milonic only to find nothing has worked to this point.
Poster: kevin3442
Dated: Thursday November 16 2006 - 23:32:44 GMT
If I might jump in...
Milonic menus can be styled with their own css. They also include some of their own default css styling. The problem is that the menus are generated by creating tables, using the <table> tag. If you use css to affect one of the base html tags, like <table>, then it'll affect every table one the page that doesn't have it's own class specified. You can use this last bit to your advantage. I.e.:
(1) Define a specific table class, like so:
Code:
table.myContent {
width: 100%;
margin: 5;
padding: 5;
font-size: small
...
}
width: 100%;
margin: 5;
padding: 5;
font-size: small
...
}
(2) Use the specific class for the content on your page:
Code:
<table class="myContent" ... >
This will remove the generic table effect from the tables used by the menus.
Hope that helps,
Kevin
Poster: Ruth
Dated: Thursday November 16 2006 - 23:36:22 GMT
Hi,
All I really need is one page with your layout, your css, and all your menu files so I can do some testing and try for a workaround. If you can't put one on a public access, could you post it all here? If not, let me know a time you'll be here on the forum and I'll post you my email. I don't like having it on the forum so I want to remove it as soon as possible.
But, if you are sending me the info I still need a page with your layout, the css and all the menu files.
Ruth
CSS Issue's
Poster: SLEO577
Dated: Friday November 17 2006 - 1:43:46 GMT
Thanks kevin3442 for the information. Unfortunately, this is a CMS website, utilizing several different modules at one time. It uses a global CSS setting just as the Milonic menu requires. So in order to change the table to a different class name, would undertake a monumental tasks as all the other modules in the CMS would be affected.
Ruth I can setup a time with you and give you access to the website. Once your on the website, you'll understand why I have it restricted and don't give out the URL. And no, it's not one of those kind of websites either.
Poster: vikenk
Dated: Friday November 17 2006 - 16:30:49 GMT
You can assign a class to the Milonic Menu if you want. In your Stylesheet, you could include something like:
Code:
.menu table {
width: [insert desired width here];
text-align: center;
margin: 0 auto;
}
width: [insert desired width here];
text-align: center;
margin: 0 auto;
}
Then, in your menu_data.js file, include this:
Code:
offclass="menu";
onclass="menu";
onclass="menu";
Mine looks like this:
Code:
with(menuStyle=new mm_style()){
offclass="menu";
onclass="menu";
fontfamily=" Arial, Tahoma, Verdana";
fontsize=".95em";
fontweight="bold";
fontstyle="italic";
bordercolor="#ff0000";
borderstyle="solid";
borderwidth=1;
onborder="solid #ff0000 1px";
headerbgcolor="#000000";
headercolor="#ff9900";
offbgcolor="#000000";
offcolor="#ff9900";
onbgcolor="#ff9900";
oncolor="#000000";
pagebgcolor="";
pagecolor="";
separatorcolor="#ff0000";
separatorsize=0;
subimage="images/tridown.gif";
subimagepadding=0;
subimageposition="center";
overfilter="Alpha(opacity=100);Shadow(color=#999999', Direction=135, Strength=6);";
}
offclass="menu";
onclass="menu";
fontfamily=" Arial, Tahoma, Verdana";
fontsize=".95em";
fontweight="bold";
fontstyle="italic";
bordercolor="#ff0000";
borderstyle="solid";
borderwidth=1;
onborder="solid #ff0000 1px";
headerbgcolor="#000000";
headercolor="#ff9900";
offbgcolor="#000000";
offcolor="#ff9900";
onbgcolor="#ff9900";
oncolor="#000000";
pagebgcolor="";
pagecolor="";
separatorcolor="#ff0000";
separatorsize=0;
subimage="images/tridown.gif";
subimagepadding=0;
subimageposition="center";
overfilter="Alpha(opacity=100);Shadow(color=#999999', Direction=135, Strength=6);";
}
The one caveat is that if you're going to do this, you MUST provide an onclass AND an offclass. You cannot do one without the other. I have succesfully used this type of technique on several webpages.
Hope this helps.
----
Viken K.
http://www.vikenk.com
http://www.sayatnova.com
BRILLIANT!!!!
Poster: SLEO577
Dated: Friday November 17 2006 - 17:09:39 GMT
BRILLIANT!!!! That's all I can say vikenk! That did fix the problem!!!
I cannot believe that this fix was SO simple. Even when I submitted a ticket to Milonic Support, they never mentioned giving the menu it's own class. I was actually told that the Milonic Menu had to work off your own CSS's global settings?!?!
I did make a minor change to what you mentioned to make it stop expanding the entire width of my page. I followed your instructions completely except, I changed the script in my style.css file to read:
Code:
.menu table {
width: auto;
text-align: left;
margin: 5;
padding: 5;
}
width: auto;
text-align: left;
margin: 5;
padding: 5;
}
The text align didn't really matter (center, left, right) it's the users preference, but changing the margin and padding (???) and setting the width to auto...made all the difference and stopped the submenu(s) from expanding across the entire width of the page.
THANK YOU AGAIN VIKENK! And thank you Ruth & kevin3442 for your quick replies to my posting! I'm sure this will clear up several issues with members having problems with the submenu width expanding across the entire page!
If Milonic monitors this forum, this should be put up in a FAQ, Tech Support or Help sections, especially for those using CMS (Content Management System) website like (Joomla, Drupal, Xoops, Plone and even e107).
Poster: Ruth
Dated: Friday November 17 2006 - 17:17:39 GMT
Hi Vikenk,
Welcome back with a vengence
Wow, can you believe I never thought of that...me the person who has used that for all the menus on my site. Well, I didn't use any table setups, but still..... Color me in the corner
And on top of that, I just realized that Kevin eluded to styling the menu with it's own class, I guess I was not picking up anything yesterday....
Ruth
Poster: Andy
Dated: Tuesday November 21 2006 - 11:09:19 GMT
Quote:
I cannot believe that this fix was SO simple. Even when I submitted a ticket to Milonic Support, they never mentioned giving the menu it's own class. I was actually told that the Milonic Menu had to work off your own CSS's global settings?!?!
That is NOT what I said to you
Is this not the same thing as above:
Quote:
The menu uses DIVS and TABLES to build itself so any global settings you declare in your .css for tables will also affect the menu.
You could try declaring a menuwidth to override the css value, alternatively, please try using a css class for your menu objects. Using global values is not recommended as they do affect ALL tables on your page.
You could try declaring a menuwidth to override the css value, alternatively, please try using a css class for your menu objects. Using global values is not recommended as they do affect ALL tables on your page.