CSS Stylesheet Issue

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
SLEO577
Beginner
Beginner
Posts: 4
Joined: Thu Nov 16, 2006 8:21 am

CSS Stylesheet Issue

Post by SLEO577 »

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?
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
SLEO577
Beginner
Beginner
Posts: 4
Joined: Thu Nov 16, 2006 8:21 am

Post by SLEO577 »

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.
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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: Select all

table.myContent { 
  width: 100%; 
  margin: 5; 
  padding: 5; 
  font-size: small 
  ...
}
(2) Use the specific class for the content on your page:

Code: Select all

<table class="myContent" ... >
This will remove the generic table effect from the tables used by the menus.

Hope that helps,

Kevin
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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
SLEO577
Beginner
Beginner
Posts: 4
Joined: Thu Nov 16, 2006 8:21 am

CSS Issue's

Post by SLEO577 »

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. :oops:
vikenk
Mega Advanced
Mega Advanced
Posts: 297
Joined: Tue Nov 29, 2005 7:38 pm

Post by vikenk »

You can assign a class to the Milonic Menu if you want. In your Stylesheet, you could include something like:

Code: Select all

.menu table {
	width: [insert desired width here];
	text-align: center;
	margin: 0 auto;
}
Then, in your menu_data.js file, include this:

Code: Select all

offclass="menu";
onclass="menu";
Mine looks like this:

Code: Select all

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);";
} 
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
SLEO577
Beginner
Beginner
Posts: 4
Joined: Thu Nov 16, 2006 8:21 am

BRILLIANT!!!!

Post by SLEO577 »

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: Select all

.menu table {
   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).
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

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. :oops: Well, I didn't use any table setups, but still..... Color me in the corner :lol:

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
User avatar
Andy
Milonic
Milonic
Posts: 3308
Joined: Sun May 19, 2002 8:23 pm
Location: Menu Developer
Contact:

Post by Andy »

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:
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.
Post Reply