New RC

Poster: Maz
Dated: Sunday January 4 2004 - 20:42:09 GMT

Ummmm.

I mouse over and get blank

on the -www-

still no headerbgcolor

n.b. I use transparent.

maz

Poster: John
Dated: Monday January 5 2004 - 3:31:36 GMT

I see what you mean. Assume Safari, or does it fail in something else as well?

FWIW, there is a point that is only 1px high (full menu width) where the links turn red and the status works. It is just at the separator, while the cursor is still a pointer, and before it turns to a hand over your text. It's tough to hit, but it's there. To me that means your code is OK, and we're possibly fighting 2 bugs - one in 32 and one in Safari.

This has been with Safari since it came out. Don't know if Andy can get around it or if Apple has to get their act together.

OK, scratch all that. Just put RC32 up on my site (http://tiggrsuccess.com/) and it's working fine. For the first time ever with Safari I now have a hand cursor over the menu items and status works all the way through a menu field (not just the 1px line). Nice goin', boss! Thanks.

I'm not using PHP, if that makes any difference with the bug, but you're obviously welcome to take a look, hon. The arrays are at http://tiggrsuccess.com/menu5/top_array.js and http://tiggrsuccess.com/menu5/side_array.js.

Poster: Maz
Dated: Monday January 5 2004 - 5:48:44 GMT

Yes I get a hand too, you are using transparent, so thats not it.

I'll have to go through it again, the only other thing that's not been working is the header background, you don't appear to have those.

...Also I can pick up the white blank item in Safari and it says
javascript void(0)

Thanks,
maz

Poster: Andy
Dated: Monday January 5 2004 - 11:31:26 GMT

It's to do with your style sheets.

In style.css you have



This is setting the background color to white for the menu item.

RC33 should help combat this problem now

Cheers
Andy

Poster: Maz
Dated: Monday January 5 2004 - 16:07:19 GMT

Andy found it, I was looking there,

Thank you,
maz

The header is clickable, and no background color, I do have a div called header, I'll try changing it. I changed #header to #mainheader, still no change on the menu header.

I wonder if someone will see this, can I use js color for my border, how do I put this line of color in the main menu items?

offfunction:

<script type="text/JavaScript" language="JavaScript">os='<table width="100%" cellpadding=0 cellspacing=0 border=0><tr height=4>';b=204;r=204;g=204;for(i=0;i<50;i++){(255>b)?os+="<td style='background:rgb(204,204,"+(b+=0)+")'>&nbsp;<\/td>":os+="<td style='background:rgb("+(r+=3)+","+(g+=3)+",255)'>&nbsp;<\/td>";}os+="<\/tr><\/table>";document.write(os);</script>

onfunction:



Thats funny how I got I smilie without the code tag

Poster: Maz
Dated: Monday January 12 2004 - 18:12:38 GMT

Still no headerbgcolor on xpmenu style, I tried adding on and offbgcolor to the header menu item, I don't know how to try a menuitem with bgimage=0 to over ride the image, as that's the only other thing that might be blocking it.

Thanks,
maz

Poster: John
Dated: Monday January 12 2004 - 20:39:46 GMT

Seeing the same thing on your site as I now am on mine (RC39) - http://westcgi.west.asu.edu/sai/. The menus drop with only the text showing - no background at all. Sometimes the background will then roll in, top to bottom, a few seconds after the text shows (something like a window-shade effect), other times it will not come in at all. XPMenu.

Boss

Poster: Maz
Dated: Thursday January 15 2004 - 23:56:36 GMT

I'm so disappointed, I waited because of the problem with RC 40 but now with 42 I no longer have center align horizontal. IE would never center, but at least the others would. And still no headerbgcolor.

I really want to get all the bugs out of my layout. That includes the bottom border for which there is still no solution as yet.

I've considered images, but since its 100% I can't use an exact width image without it throwing off the menu items.

I've considered using background image but I can't tell it what position I want it, it just fills the whole menu item with color.

If only someone could tell me how to write a javascript to put a layer of color at the bottom of the menu item, that would do it.

maz

Poster: Ruth
Dated: Friday January 16 2004 - 18:29:59 GMT

Not getting header bgcolor is because of the If you remove those then the headerbgcolor shows.

Ruth

Poster: Maz
Dated: Friday January 16 2004 - 22:54:47 GMT

Thanks for pointing it out Ruth,

It used to work, putting those in each item sounds a bit messy.

Perhaps I can use header item bgimage none or 0?

Thanks,
maz

Poster: kevin3442
Dated: Saturday January 17 2004 - 0:42:47 GMT


Hi Maz,

As far as I know, you couldn't code this with just js (it's note really meant for that). I tried something similar with css, but with only limited success. I think there's a way to do what you want using a background image, but let me first be sure I understand your goal. If I understand correctly, you want a line that extends along the bottom border of your main menu bar (the bottom of the items themselves and continuing into the extra space on either side that results from menuwidth="100%"). Is that correct?

Kevin

P.S. Got a hockey game soon, so I won't be able to reply until later.

Poster: Ruth
Dated: Saturday January 17 2004 - 0:51:31 GMT

Yes, I remember it did use to work. Now it seems that headers are just acting as if they are just another menu item....

Ruth

Poster: Ruth
Dated: Saturday January 17 2004 - 1:40:57 GMT

I just had a thought. Leave the bgimage and overimage as they are, make another image the color you want the headerbgcolor and then code just the header items with the That should work even if it isn't the most elegant.
Ruth

Poster: Maz
Dated: Saturday January 17 2004 - 3:50:10 GMT

Hi Kevin,

That's correct, its on the -www- link and you can see something similar at the bottom of the page, (css without tables equally troublesome).

Ruth,

This is probably temporary, perhaps it will be fixed. Since I was considering changing the background image color I could do that too. But it still won't be centered like it used to be.

I tried to download Netscape today, to see where everything goes, but it disappeared on my newish computer

Thank you,
maz

Poster: kevin3442
Dated: Saturday January 17 2004 - 7:42:01 GMT

Hi Maz,

Regarding the line or layer of color at the bottom of the menu:

I didn't know exactly what look you're going for, so I modeled my effort after the example you referred to at the bottom of your page. In general, I think you can get the effect you're looking for by:

(1) Create two images: one will serve as both the bgimage and the menubgimage; let's call it "bgimag.gif". The other will serve as overbgimage, for a rollover effect; let's call it "overbgimage.gif". Put them in your /template/main/images/ directory, where your other images are. These images should both have the following properties:

1. Each image should be only one pixel wide.
   
2. The bottom X pixels should be the color of the line you want, for both mouse off (bgimage.gif) or mouse on (overbgimage.gif). X is the height, in pixels, that you want the line to be (i.e., how thick of a line do you want?). The remainder of the image should be whatever color you want the 'background' of the image to be, in both mouse off and mouse on states (I used white for both since that's how the menu at the bottom of your page is, but you could use different colors to get a background rollover effect).
   
3. To ensure that your menu item text centers vertically on the background images, each image should have a height of 2(X)+Y, where Y is the height, in pixels, of your menu item text. So, for example, I see that the text in your "xtopmenu" is 7px tall. If you want a 4px-high line under the text (as is the case at the bottom of your page), then bgimage.gif and overbgimage.gif would be 2(4)+7 = 15px high.
   
   By following these guidelines for making the images, you will ensure that the menu item text sits right on top of the line, as it does at the bottom of your page. You could play with the height of the images, and the height of the line color at the bottom of each to get different effects.
   
   Sample images: As I was testing this approach, I created a bgimage.gif and an overbgimage.gif. I was trying for a look similar to what you have at the bottom of your page. Here they are (look closely, because they are very small)...
   
   bgimage.gif ->
   
   overbgimage.gif ->

(2) For the background images to show through, you need to set onbgcolor and offbgcolor in your xptopmain menu style to "transparent" (BTW: you can also ensure that they are transparent by simply not defining them... i.e., leave those properties out of the style definition altogether).

(3) Also in the xtopmain menu style, set the following background image properties:


(4) Also in the xtopmain menu style, you have to specify the itemheight; it should be the same height as your bgimage.gif (15 in the example above). I notice in your code you set itemheight in quotes and specify a unit of measure, like this: itemheight="10px";. Since heights and widths in the menu settings are in pixels and are numeric values, you'd be better off doing it like this:

...no double quotes and no 'px'.

With all that in mind, your edited xtopmain menu style would look like this:


As you've noted, the images when used as backgrounds will repeat, and there's no built-in method yet to control the background-repeat style (you can, however, do it programatically... but that's another discussion). But by making the images and the menu items the same height, you essentially cancel out the repeat-x dimension and use repeat-y to your advantage to fill the background, no matter how wide an item is!

Sample images: Since the sample images above are so small, I zipped 'em for you. You can download the zip here, then unzip it to your /template/main/images/ directory.

Test: I tested the approach with your menu on a blank page. To try it, download maz_test.zip, unzip it to its own folder, copy your milonic_src.js, mmenudom.js, and mmenuns4.js into that folder, then open menu.htm. Note that I canged your images paths from "/template/..." to "template/..." in my test, so that I could run it locally. This test worked in IE6, NS7.1, Opera 6.05, and Opera 7.0 in Win2kPro. Sorry... but I don't have any Macs.

A couple of last notes... just FYI, menualign appears to be broken in RC40+ for lots of browsers, not just on Macs. I'm sure it'll be fixed soon. Also, in pondering this stuff, I realize that what you wanted to do in "drawing" a line with javascript would be possible... not by drawing a line directly (can't do that with js as far as I know), but by finding the menu object and manipulating it's style properties programatically with js. But that might be for a later discussion.

Let me know how it goes.

Hope that helps,

Kevin

Poster: Maz
Dated: Saturday January 17 2004 - 8:06:56 GMT

Wow Kevin,

You really paint the town red

I tried everything but the 1 pixel wide. The reason I put pixels back in, is because my css is based on percentages and em, all fluid. I think I've got it now, but I had to narrow down problems.

I was thinking along the lines of plotting color in js similar to image map.

I see I have to keep the height with transparent.

I see in another post about screenposition=center, what's the difference with menualign=center?

Thank you, BRB
maz

Poster: kevin3442
Dated: Saturday January 17 2004 - 8:36:36 GMT

Hi Maz,

You're up late!

screenposition would be useful for a main menu that is not 100% width, to position relative to one or more edges of the browser window. You can combine it with top and/or left offsets (relative to top and left of the window). That way, you can keep your menu positioned relative to other elements on the page when the page is resized. screenposition="center" for example, would be good for a designer who likes to center all content on the page.

menualign positions the menu within its own container. Let's say, for example, that you have 4 menu items in a horizontal menu, each 75px wide, and you set menuwidth=500. Your items take up a total of 300px, and the "menu bar" that they're in takes up 500px. If you set menualign="center", then the 300px of menu item space would be centered within the 500px menu bar, leaving 100px of empty space on the left side and on the right side of the bar. If you set menualign="right", the 300px worth of menu items would align to the right of the menu bar, leaving 200px of "empty" space on the left of the bar. Now, set screenposition="center", and the 500px menu bar will be horizontally centered in the browser window; set screenposition="right" and the 500px menu bar will align to the right of the browser.

As you know, if you set menuwidth="100%" then your menu bar should span the entire width of the page... rendering the horizontal attributes of screenposition (left, center, and right) ineffective (you use menualign in this case instead, to position the collective menu items within the full-span menu bar. The upshot... screenposition would have no effect in your main menu.


As you can see... when I get on a roll, I sometimes lose track of how much stuff I've actually typed. My only hope when I do that is that, in among all the words is something that someone might find useful!

G'night,

Kevin

Poster: Maz
Dated: Saturday January 17 2004 - 9:41:45 GMT

Maybe that screenposition and menualign will make more sense in the morning

You almost had it, I had the least size possible, so when adding the background as border I have to add more vertical space, and make the images transparent. I don't have graphics on this computer, so I used gifmaker online for now, so its almost there. I couldn't stretch the height of the image accurately so I'll finish that off on the old computer and email it to myself.

IE didn't do that nasty drop down background, but it does need a couple of extra pixels to sit right. Will IE ever center align?

1 pixel horizontal on horizontal, 1 pixel vertical on vertical.

Thank you, now I can go play with my color scheme

maz

Poster: John
Dated: Saturday January 17 2004 - 23:55:55 GMT

Hey - the main menu is working great (Safari!). Put Tools back and let's have a go at that (it'll give Kevin's fingers a chance to grow back!).

Poster: kevin3442
Dated: Sunday January 18 2004 - 4:29:20 GMT

Maz,

Looks good in IE6/NS7.1/Op7.0 in Win2k.

Kevin

Poster: Maz
Dated: Sunday January 18 2004 - 15:01:23 GMT

Hi Kevin,

I've changed it around a bit after getting some feedback, I put a line top and bottom, I know I'm a couple of RC down because the new one wouldn't center. So I'll have to test it on a new RC but its not loading the graphics when I switch pages.

John, I gave up with tools menu and now have everything in one menu with everything centered, still more to do, whatever direction it takes me.


Thanks everyone,

maz

Poster: Maz
Dated: Monday January 19 2004 - 2:40:45 GMT

I tried putting search in the mainmenu I've seen it done before but have no idea how it was done, I discovered something about putting style in a form, these never work normally "" in the beginning of <form style=""> but they do work on an input field where there is an end slash />

The problem with the form button occurs in IE because its too large. Normally you can adjust the border and font size and it will change. But not in this case, it reduced the background height of the menu in IE.

The forms and buttons work great in Safari because the button is 2px smaller than the input field and styling for IE doesnt' effect it.

I think I'll give up on that idea.

maz