Menu CSS being ignored/over-written by external CSS

Poster: complete
Dated: Thursday April 14 2005 - 16:58:09 BST

Hello,

The CSS that is created by the menus is being ignored (for lack of a better term) once the menu is being displayed.

The web site has CSS, and I think some of that is taking precence over the CSS from the menu.

Q1\ Has anyone had this problem before, and if so, how have you fixed it?

Q2\ Is there any documenation that shows what CSS is created by the menus? For example, a sample style sheet?

I think that the menu may be using UL and LI tags (which is my case have been redefined by external CSS), but I'm not sure.

Any help would be appreciated!

Poster: Ruth
Dated: Thursday April 14 2005 - 23:23:35 BST

Hi,

We really need to see the site to see what's happening. We'd be glad to test it and figure out what's going on.

Ruth

Poster: complete
Dated: Friday April 15 2005 - 19:08:25 BST

Hello Ruth,

Thanks for your reply.

You can view the problem here: http://209.35.178.49/milonic.html

Changes spacing (margins, padding, etc) don't have any affect because (I think) that the menu is using ul and li items which are being defined in an external css file for the other parts of the site.

Here is the menu_data.js file:

_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

with(mainmenuStyle=new mm_style()){
align="center";
bordercolor="#F0ECCE";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="100%";
fontstyle="normal";
fontweight="bold";
itemwidth="106";
itemheight="10";
headerbgcolor="#ffffff";
headercolor="#FFFFFF";
offbgcolor="#FFFFFF";
offcolor="#990000";
onbgcolor="#B38A00";
oncolor="#FFFFFF";
padding=0;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#FFFFFF";
separatorsize=0;
subimage="arrow.gif";
subimagepadding=2;
}

with(menuStyle=new mm_style()){
bordercolor="#000000";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="100%";
fontstyle="normal";
fontweight="normal";
headerbgcolor="#ffffff";
headercolor="#FFFFFF";
itemwidth="115";
itemheight="100";
offbgcolor="#FFFFFF";
offcolor="#990000";
onbgcolor="#B38A00";
oncolor="#FFFFFF";
padding=3;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#DDDDDD";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
position="relative";
left=0;
orientation="horizontal";
style=mainmenuStyle;
top=0;
menuheight=10;
aI("text=About Us;url=about.php");
aI("showmenu=Collections;text=Collections;");
aI("showmenu=Retailers;text=Retailers;");
aI("text=Contact Us;url=contact.php;");
}

Thanks for any help,

Mike

Poster: Ruth
Dated: Friday April 15 2005 - 21:07:46 BST

Hi Mike,

There are a some problems:

1. you need to get the menu out of the div, that will cause problems in some browsers either in submenu position or in some cases causing the menu to break.

2. The thing causing the problem is the table css coding that has margin:.6em and the th/td css coding that has padding: 3px; I don't use css much so I'm not sure how you fix that. I know if you make the table coding into classes it won't affect the menu, or maybe you can make a class for the menu table. If you remove the .6em and the padding:3px, that solves the problem.


3. in place of the div you can use a table. To place the menu in a table you need to do more than just place the call for the data file there. You cut the main menu out of the data file, put it in its own data file with a draw menus at the end of it, put the data file with all the submenus at the top with the other files, and call the main menu data file in the table cell where you want it to appear. There is information on placing the menu in a table, in the Table Based Sample and also here.


This is the setup I used creating a separate menu data file for the main menu

Your menu_data_home.js just as it is without the main menu in it that is now in the file I posted above

And the page is


This gives the same layout as you have now.

Hope this helps

Ruth

Problem with external css file

Poster: casiel
Dated: Tuesday May 31 2005 - 9:30:51 BST

Hello,

I have the same problem as Mike desribed in his first post. I have external css file and when I set properties for TABLE tag, design of menus was changed in the same way. OK, it is easy to make 'table.mydesign' class in css file and there is no problem any more. 'table' class in css file is reserve for menus and that's it! But... only if you don't work with views in Lotus Domino and you want to have browser as client . I just NEED 'table' class for controling design of tables. So, it means that I need external css file with table block in it.
I've read your conversation and I'm still confused: HTML page in Ruth's last post does not have LINK tag to extrernal css file. Maybe Ruth solve particular problem, but the problem still exist, or I didn't understand your conversation. I'll be glad to get any answer abot this (if you understood my 'indian' english ).
Best regards to both of you
casiel

Poster: Ruth
Dated: Tuesday May 31 2005 - 16:10:56 BST

Now I'm confused I have no idea what 'table block' is. And I don't understand what you mean by What HTML page?

As to css styles, whether you have a link to an external style sheet or you put the styles in the head of the page inside style tags, if you code for tables i.e. table{whatever} td{whatever} and so on, it will affect the menu because the menu [and I'm not a programmer so I can't be real specific] programming makes use of spans, divs, tables as part of that programming. If you are having problems as to margins and padding being affected, maybe you could create a class i.e. .miltable{margin:0px; padding:0px} or whatever you have set in the menu, and you could then use the onclass="miltable"; offclass="miltable"; in the style definitions of the menu, this part : with(menuStyle=new mm_style()){

Ruth

Poster: casiel
Dated: Wednesday June 1 2005 - 8:37:52 BST

Hi Ruth
The 'table block' means (in my mind ) .
In your last reply I found text:
'And the page is
.
This is source of some HTML page, isn't it?
In the meantime, I found your reply to User tepidarium (Subject external css conflicting with menu, Fri Dec 17, 2004 4:26 am), and your reply describes anything I need: there is no solution for this problem.
I will explain my experience maybe it will be useful to someone with the same problem.
I work with views in Lotus Domino (LD) and if you want to see view in browser, LD will generate some code. I use Milonic menu, version 5 with frames. I was not satisfied with look of generated HTML page, so I wanted to put some style from external css file; there is no other way to change style. And that was the door of Twilight Zone (TM) . LD generated code use TABLE, TH, TR and TD tags and there is no place to put some 'class' attribute' to change the style. So does Milonic menu. I don't want to sound arrogant, but I think that LD and Milonic made the same mistake .
1. (LD mistake) As a developer, I need the way to control style of generated HTML code of my views in Lotus Domino.
2. (Milonic) Menu has to be independent from other content of web page.
Now, I'm experimenting with a style to find some design which looks nice for the menu and the other content at the same time. This summer I will have time to analyze code of Milonic menu, so if I find solution, I'll let you know. Maybe you give me a job after that .
I hope this will be useful to someone. I hope too that I didn't bother you with this long, boring story from programmer’s life .

Best regards,
casiel

Poster: Ruth
Dated: Wednesday June 1 2005 - 9:10:40 BST

Hi,

That was from Mike's page. The person asking the question. I only put up the part of his page in which I made corrections.

I don't know anything about LD so I can't comment. As to the Milonic Menu, you can actually the majority of your menu style in css. If you did it that way, then since you are applying a class to the menu, maybe the way the LD does it's style won't override your menu css style. I use little css, just the minimum I for specific things so I'm not really up on doing the whole style that way, however I can give you some pointers:

I don't do a lot of css if I can help it, but it would seem most of the questions as to css overriding the menu styles has to do with margins, padding and font size, so I'd think it would be fairly easy to create a class in an external style sheet, for example: .menuTd{padding:2px, margin:2px; font-size:whatever} then in the menu data file, in your various menu styles , you'd just included offclass="menuTd"; onclass="menuTd"; And the menu will then not be affected by the general th td table that LD is generating.

Ruth