Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

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:21

font-weights, CSS & Milonic, a problem with a submenu


Poster: dmerrill
Dated: Wednesday December 21 2005 - 21:58:36 GMT

Hi, I have a submenu coming off of another submenu, and am using a CSS as well. Before I applied the CSS all submenu items had the same font-weight (bold), but once I applied the CSS ONLY the submenu item that had it's own submenu went bolder. All other submenu items stayed bold. I have combed the CSS and the menu_data.js and can't seem to correct it. Anyone have any ideas? :?


Poster: John
Dated: Wednesday December 21 2005 - 23:00:26 GMT

We really need a URL (as requested) for this kind of stuff.

reply


Poster: dmerrill
Dated: Thursday December 22 2005 - 14:29:44 GMT

The site it's being used for is not yet live. You can look at it though at

http://www.glencovemarine.com/newtest/n ... dex44.html

It's the 3rd item under "Boat Sales"

Hope this covers it.

Thanks, Dawn

CSS etc.


Poster: Migru
Dated: Sunday December 25 2005 - 17:33:10 GMT

HI,

it is recomended to follow instructions, you can read here:

http://www.milonic.com/integration.php

and pls. install the latest version. you are using version 5.734 it seems.
Another issue is the use of "transparent" colours, it is recommended to have a look by using different browsers too. FF e.g. seems to have some problems with your menu.
And you are using the menu in a table (relatively positioned) but even for absolute positioning, your *.js files are not placed in a correct way in your file! So please study this link, given above.


Michael


Poster: Ruth
Dated: Sunday December 25 2005 - 23:06:01 GMT

You will have problems in some browsers if you don't put the menu in the table and place the calls as required as Michael says. Good catch, Michael, I can't believe I missed that :oops:

It really is necessary that you use the correct methods.

As to the css... you have coded in your css file
Code:
TABLE {
   font : comic sans ms;
   font-family : "Comic Sans MS";
   font-size : 115%;
   font-style : normal;
   color: #31466b;
}


Table is a 'generic' and will apply to all tables and even the fonts in the menu if you have it in a table. The way to fix it is to either code the generic table as a class, and assign that to all tables, or easier since you only want this to be applied to the menu, is to create a class i.e.
Code:
.tdweight{font-weight:bold}
and apply that in the td cell where you are placing the menu. Be aware that ALL fonts in the menu probably be bold. The other way to do it would be to create a class for the fonts in css, and apply them to the various menus through their style. That requires two classes. You might take a look at the basic example page of styling the menu using css. It is not a css tutorial, but it has examples of applying css styles to the menu.
css styling in the menu

Ruth


Poster: dmerrill
Dated: Thursday December 29 2005 - 17:44:44 GMT

Thanks Michael & Ruth. I will take a look at the tutorials & see what I can do. I apologize for my lack of experience and for not following all the instructions, but if you had any idea how many menu styles etc. my boss had me try before allowing this one, you would know why I didn't go all out the first 10-15 tries. I may be asking for more assistance on this later :)

Thanks! Dawn


Poster: Ruth
Dated: Thursday December 29 2005 - 18:47:02 GMT

Hi Dawn,

Any time you need help, just post away, we are always glad to help out when we can.

Ruth


Poster: dmerrill
Dated: Thursday December 29 2005 - 19:24:16 GMT

Ok, Ruth, you asked for it :) Anyway, I am able to use the table instructions for positioning and that works fine, of course, until we know for sure that we're going with this (We have a marketing director who seems dead set on farming out a re-write and using way too much flash.), my boss is not particularly interested in what alternate browsers see. So for now that part will stay unchanged (too many pages to modify until I know).

As for the CSS issue (the real issue I wrote about), I am a little confused: I added class

.tdweight{font-weight:bold}

to my existing CSS. But how do I apply it? the TD cell where the menu is now looks like this:

<td width="900" height="70" colspan="2" align="left" valign="top" class=".tdweight">

But it must be wrong because the font-weight for the one item is still bolder while all the others are just bold...thanks in advance...


Poster: dmerrill
Dated: Thursday December 29 2005 - 20:06:19 GMT

Oops, I know that's wrong, and I have to point it at the CSS file in the TD tag, to look like

<td width="900" height="70" colspan="2" align="left" valign="top" class=".tdweight" title="../glencove2.css">

but that doesn't work either...still I have the one bolder menu item...


Poster: dmerrill
Dated: Thursday December 29 2005 - 20:08:08 GMT

Please have a look at

http://www.glencovemarine.com/newtest/n ... dex45.html

and tell me if I at least got the table positioning code right :)

Thanks!


Poster: Ruth
Dated: Thursday December 29 2005 - 22:31:44 GMT

Hi Dawn,

Yes, you have that code right. I checked the page coding, the main menu file and the menu_data4 file and they are all correct.

Now, I need to ask you some questions, because I'm not seeing a problem now.

Which browser is causing the problem and please explain it again? I'm seeing normal font on the main menu, which is what you have coded in the menuStyle, and I'm seeing bold font on all the submenus in IE5.5, FF 1.02.

Can you tell me what it is you want on this layout. Do you want the table to always be 900px and to always be aligned to the left? So, if a user has a resolution of say 1280xwhatever, you would have this blue colored background to the right taking up the extra space?

If you can describe the layout, I'll be glad to put up your page all set up so you can use it as a template from which to work.

Ruth


Poster: dmerrill
Dated: Friday December 30 2005 - 14:42:49 GMT

Hi Ruth and thanks for the code check & all the assistance. The real problem is that under the "sales" button there is a submenu with several items. Only the "preowned" item has it's own submenu. What is strange is that only the "preowned" item is affected, and it's font weight is very bold instead of just bold. The only deduction I can make it that it is[i] because [/i]it has it's own submenu.

As far as the 900px width, although I have been repairing and building systems for over a decade, I've only been writing pages for a few months. If you can assist me with a more liquid layout, I would be very grateful. My pages were written with 1024x768 as the primary size, and tried to keep 800x600 in mind. However, I would love to learn more about liquid layouts. I did make an attempt at it with these pages, and had trouble with things like my 3 images across the top wrapping so that the thris image ended up below the logo image, even with a nowrap in the TD tag, so I abandoned it. I can also tell you that as inexperienced as I am, the folks I work for know nothing about coding and have only a very rudimentary grasp of the complexity of trying to write for multiple resolutions and browsers. That is why I have stuck with the fixed width...I am thankful for any assistance you can provide! Dawn


Poster: Ruth
Dated: Friday December 30 2005 - 15:03:44 GMT

Hi Dawn,

OK, I see it now, it's not that it's bolder, it's larger for some reason. I will fiddle around and see if I can find out what's happening.

As to the layout. There's nothing wrong with it, I was just making sure that was what you wanted. I fixed the animated logo so it matches and will put the page up.

I don't use liquid layouts. That's just personal thing. They tend to have problems across browsers unless you have a simple one. I tend to make mine for 800x600 since about 40% still use that resolution. Your layout is fine since you are setting it for 1024x768 and it works pretty good for 800x600. I was just wondering if you wanted to make it a centered layout which would balance in higher resolutions, making the background even on right and left? Also, I fixed your top so it will not shift.

I'll get back to you when I figure out what's up with the bigger text on that item, and if you notice the one right below it is also bigger.

One thing, you have an error I found in your data file which is causing the FF and NN problem on the submenus. You left off the # from the offbgcolor in the style. That's why it's not showing in FF when you first mouseover the item and the submenu drops.

Ruth


Poster: dmerrill
Dated: Friday December 30 2005 - 15:21:58 GMT

Thanks Ruth, you're a real help. I am unsure what you are referring to regarding my animation matching. Could you please explain? Also, if you put a page up, where do you put it? I can do essentially nothing without running it by my boss first (a real pain, but...)

I have fixed the offbgcolor in the menu data file, thanks for reviewing & finding that for me!

If not for the various forums (and credit to my Dad too, who mastered HTML long ago but makes me learn it instead of handing me the knowledge, and I'm nearly 40!) I would never have been able to do this. It's people like you who are so willing to assist that keep people like me expanding our horizons :) Thanks again...


Poster: dmerrill
Dated: Friday December 30 2005 - 15:50:57 GMT

Hi Ruth, one other thing, too, I DO NOT use Front Page (I realized you might see that up at the top & think I did). Before I came here, whoever wrote the original site used it & the girl that still does the updates on boat pics etc. uses it. But I was informed by my Dad that if I wanted his help, I would use a real editor. Just wanted you to know :) I use Home Site & Top Style...I just didn't want you to think I was limited with a wysiwyg heh heh heh...


Poster: Ruth
Dated: Friday December 30 2005 - 22:33:10 GMT

:lol: That's OK, Dawn. When you see what I used for beginning layout you'll be rolling on the floor. Take a look at the top of the page. But, I don't use it for making the page, I use a free one 1st Page. And, I don't have a problem with editors of any kind, as long as the person knows how to code it by hand. Though I have heard that FrontPage does some weird stuff, putting in some codes that are only for it or something.

Anyway, about the page. It is put up at Milonic support. You do not have to use this page, but I did some different things and I fixed it so it looks the same in NN, FF, IE and Opera. I don't have a Mac so can't check it on that.

So you know what I did:

1. I cleaned up the data files getting rid of extraneous coding,

a. I removed the bgimage=an_37.gif;align=center;itemwidth=85;itemheight=38; from each main menu item. Since you are only using menuStyle with that menu, it is easier to put it once in the style section.

b. you had a code openstyle="down"; set in the menuStyle and in the subMenuStyle and in the sub menus and orientation="vertical" in the sub menus. None of that is not necessary since the default from a horizontal menu is down and the default when no orientation is noted is vertical.

2. When you put in a bgimage, if font size is changed by the browser because a user needs a large font the bgimage will repeat. With most that is not a problem, but with what you are using, I was sure you wouldn't want it to repeat, so I set up the bgimage from css.

3. In relation to that, I created three classes, off, on and page. You'll see them at the bottom of the new style sheet. The reason for the off and on is that you have two states for the menu, the mouseOff and the mouseOn state. The 3rd one is for the 'highlighting' of the path.

4. In the subMenuStyle I added some things, a border which is set to outset and colors like that around your bgimages in the main menu, kind of silver/grey. You can remove it if you don't want it, I just figured I'd give you something to take a look at and see if you liked it.

5. I also set pagecolor in the submenus so that say you click on Marina when you get to that page, if there is a menu on the page, that font color will be a bit different, kind of telling people where they are.

6. The pageclass I set in the menuStyle which is for the main menu has the same image, but the silver outside is a different color.

You can remove any of this, I just figured I'd put in some of the things so you could take a look. So, if someone clicked on Marina when they got there, if there is a menu on the page, the Facilities bgimage will be a different color and the text for Marina in that submenu is a different blue.

Now, as to the original problem, the font. The problem is with the code for table in the style sheet with the font set to 115%. I don't know why it's only doing something to the one with the submenu and below, but, I removed that and created in its place a .table class. And, if you need to have fonts in a table be 115% you'll need to apply the class. You apply the class by adding to the td class="table" or whatever name you give it.

Whew. OK, here is the page

http://support.milonic.com/ruth/dmerril/dmerril.htm

http://support.milonic.com/ruth/dmerril/demerril.zip

And here is the zip file with the new menu_data file, the new embedded_main file, the new css file, the page, and the 3 images.

Oh, I forgot, about the birdanimation, I didn't put up the new one because I have no way to get it small like you have the one that's on there. The reason there is a difference in color is because although I'm sure it started the same as the bg in the other images, when you convert it to gif it will 'standardize' the color, but it's not off by that much, if I knew how to make an animation I would have re-made it, but just editing that and fixing the color added about 300 kbs to it.

Hope this helps. :) Again, you do not have to use anything I did, I just wanted you to see the things that could be used. Ah, I forgot I have two bgimages, one for off, the one you have, and one for mouseover, it's the same image just the blue in it gets a bit brighter when you mouseover. If you don't want to use any of the other stuff, remove the pageclass from teh stylesheet, remove the pageclass from the menu_data5.js file, change the image in the class called on to the same as the one in the class called off in the style sheet.

Geesh, looks like an essay :)

Ruth


Poster: dmerrill
Dated: Saturday December 31 2005 - 18:20:48 GMT

Wow Ruth, what a lot of work! I will have a look over these changes & if I think they'll fly for the boss, I'll see if it's approved. That will be next week sometime because I'm off the next 3 days (YAY!). Of course, it'll take me a little time just to look over all you've done <g>. I really appreciate it.

It's funny that you mentioned the weird things Front Page does, because that is one of the first things I noticed when I started to modify existing pages (especially the pages for used boats). There is so much BS code in them that I was stunned. When I stripped it all out, the page size dropped dramatically. Unfortunately, I am the only person in the organization who CAN code by hand (thanks Dad!). I still have some unncessary HTML code, am finally grasping CSS, and JS is still very foriegn, but I'm learning fast! The bummer is that I mostly had to leave FP's weird code intact because the person who updates the boat pages (who says she knoes HTML but couldn't figure out why my marquee quit every time she made a change to the old homepage) apparently can't do it any other way. I saw no reason to remove the BS because she'll open it in FP & FP will put it all back. Oh well...maybe in time I can teach her a thing or two, but she's very defensive & can't seem to understand that I'm only trying to help. Worse, the Marketing dir here wants Dreamweaver even though she's never coded a single line. Apparently she thinks it will magically enable her to write fancy Flash or somehow produce a menu like Milonic's in wysiwyg. HAH! I'll stick with Home Site, Top Style, and great coder forums myself...

You have a Very Happy New Year, Ruth, and I'm sure I'll talk to you again next week :) Dawn


Poster: Ruth
Dated: Saturday December 31 2005 - 18:56:39 GMT

Hi Dawn,

Thanks, and a Happy New Year to you, also.

If you can keep the dir away from Flash do it for all of us out here who do not have cable/satellite connections and still use dial-up. There are millions of us and flash really means a very long load time. If she is determined convince her to have an entry portal without flash, or with a very small flash which allows us to choose pages without flash. Yes, that means extra pages, but unless there is flash on every single page, it wouldn't be many of them.

As to Dreamweaver, that's a very expensive program. And, learning to use it, she could learn to code html faster. I do need a wysiwyg for layout. I'm one of those who can't visualize and have it translate well when I put it in, that's why I still use that really old old aolpress to set up my tables. I'm trying a new free one called Nvu which is open source and being done by a lot who did the FF browser. It has things like divs and such which aol is too old to have being back around 93 or so, oh and having been bought out by AOL who then quit developing it! And, I'm working with 1st Page and hoping the new one, which just had a beta test will get here soon, hope they develop the wysiwyg part more.

I forgot to mention about the tables. I'm sure you're aware that when you use tables, nothing will show/function in a table until the table is fully loaded. To get around having to wait for everything, I divided your layout into two tables, the top one has the 3 images and the menu, the bottom one the rest. In the top one, to fix your image problem so they do not wrap, I put a second table inside the top row of the main one divided into 3 cells, one for each of the images. If it still wraps, you can fix it by adding a row at the top of that inserted table with a spacer image to prevent browsers from sizing the table smaller than 900px, code it as
Code:
<tr><td colspan=3><img src=spacer.gif width=900 height=1> </td></tr>


And I wasn't clear on the images, there is a an_37o.gif which is the overbgimage, and an an_37p.gif which is the pagebgimage, of course they are all set up as background-image: in the css file.

Again, have a great New Year. Let me know when you have all the files you need so I can remove it. I'm sure you don't want your page giving a milonic address in search engines, which I'd think it would pick up.

Ruth


Poster: dmerrill
Dated: Saturday December 31 2005 - 19:18:34 GMT

Ok Ruth, you worked too hard for me not to look today <g>. I really like the color change on the buttons. And I agree that for users resizing fonts it would be better to have the classes as you have them set up (I've seen that repeating thing). HOWEVER, and maybe this is correctable, at least on the machine I'm using, as I mouseover, most of the buttons vanish :( and then reappear. I already know what my boss would say to that...

Otherwise, it all makes sense (a joy in and of itself). For now, I am not going to make any changes though, because even though they let me put up this site, finally, last Friday after months of work, it may only be up temporarily. (Which is also why my boss hasn't let me buy the code yet, and I am fuming over that.)

Our "aesthetics only" focused Marketing Dir wants to outsource a new site. If that happens, mine is history (have you seen what we used to have though? Check it out at http://www.glencovemarine.com/oldindex.htm I removed the redirect so you could see it). And that will or won't happen here in the next month (a decision that is, though the MD seems to think that not only will someone else be able to re-write the entire site in a week, she also thinks they'll come in and train her on Flash & Dreamweaver, hee hee hee...) If they do outsource it, I have already told my boss I want nothing more to do with it, ever. Let the non-coding, functionality-ignoring, content-lacking, over-Flashing idiots outsource it if that's how they want it! Just don't come to me, I have my own site to work on... :evil:

Hope no one I work with ever reads this (as if...) :lol:

Thanks again, and maybe you can tell me what causes the button vanishing thing....

Also, I don't know where you are, but if you ever come to the Lake of the Ozarks in MO, I definitely owe you a beer and a boat ride.


Poster: dmerrill
Dated: Saturday December 31 2005 - 19:33:46 GMT

:lol: Already downloaded them, thanks!

I've tried desparately to educate the MD here, but my opinion is that she just wants to "keep up with the Jonses" on software (and fancy stuff in pages), despite never having used it, or any other editor for that matter. Recently she asked me if I was coding in Flash, I had to gently tell her that you code in Dreamweaver...and no, I wasn't. There is nothing wrong with wysisyg, but it does limit what you can do if you know no code at all. You are probably the only person I've spoken to that does both.

As for dial-up users, I am very lucky myself, I live in a rural area and still have high-speed, but I know alot of people around here who don't because where they are there is no access. Flash, in my humble opinion, should DO something if you're going to use it. Customize a boat in Flash by all means, but gratuitous Flash is just plain annoying. That may well be my next learning adventure. I told my boss I needed at least a year with it though, before I thought I could even be marginally good at it.

As for using old editors, mine is no spring chicken and there will be no new versions. Macromedia bought Allaire, then Adobe bought Macromedia, bye bye, Home Site :( But it works great for me...I know I talk too much, but I appreciate the conversation. There is NO ONE down here in the sticks that I can talk to about this stuff...Heck half the people I know here don't have computers, much less internet access...


Poster: Ruth
Dated: Saturday December 31 2005 - 19:42:11 GMT

Hi Dawn,

The image disappearing is probably due to image loading and that's in css and I don't know if that's fixable. Now, I can fix it so that it doesn't repeat and still loads through the menu and you can use teh menu preloadmenuimages.js module, which will make sure all the images are in cache so when you rollover they show immediately.

I suggest you take out the overimage for now. Just change the on class to have the an_37.gif . I'll work on making an image that won't repeat that can be used from the menu and allow you to use the preloadmenuimages module. You can leave the page bgimage if you like it because that will load when you go to a new page so it won't 'disappear' on mouseover, the mouseover will be the already existing on class image. Hope that made sense :)

I think you're boss doesn't understand. Why exactly would someone they are paying to put up the site teach her to do it herself so they no longer have to get paid? Maybe if this is a one time thing and she's paying extra to be taught how to keep it up to date, but..... Why would they teach her how to use a program with which they have no association and don't get money to do? I wonder would she take payment to help Joe Blow sell his boat and in the process teach them how to do boat sales on his own so he would be in competition with the company?

Ah, well. If they hire it out, I'm with you, make sure your employee job description specifically states you do NOT do anything with the website, have no responsibility for it, nor are to be asked, ordered or begged to fix something that gets messed up :)

She is really going to be sorry in the long run if she out-sources, unless she wants to contract for continual monitoring by whoever creates it, and have them be responsible to fix any problems that occur. If she really really is so design - it has to be mine - mad then instead of having someone do the site, she needs to contact Dreamweaver and sign up for some private tutorial, if they have that, or contact someone else who does that and gets paid. I'm sure there are people out there who do give private lessons for DW.

Lord, I hate power mad, control mad, bosses.


Have a good celebration!

Ruth


Poster: Ruth
Dated: Saturday December 31 2005 - 21:08:35 GMT

Thanks, I'll take the page down. I'm in the South and no one here I know has a computer either, let alone internet access. I'm moving back to CA, not that it's the best place, but I lived there for 30yrs and can't deal with the humidity in NC, way different than MI where I grew up.

I tried to get Homesite, it was recommended, but it's not available anymore. Usually, even if something is bought out, the old versions are available someplace, but I can't find it at all. If you know where I can get it, I'd appreciate that.

Actually, someone who really wants to learn can do it with the right wysiwyg editor, if it allows you to get to the source to add your own code. It's much quicker with a wysiwyg for some things, but like you, I prefer to code for most things.

Let me know if you need anymore help. I think your boss is going to be unhappy going outside. For example, if you do it, she is right there to explain what she wants as to design, to see it in development and do changes. Ah well.

Ruth

PS you mentioned your website. Is it public visible?

Ruth