New RC

Maz · Post by **Maz** » Sun Jan 04, 2004 9:42 pm

Ummmm.

I mouse over and get blank

on the -www-

still no headerbgcolor

n.b. I use transparent.

maz

Post by **John** » Mon Jan 05, 2004 4:31 am

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.

Maz · Post by **Maz** » Mon Jan 05, 2004 6:48 am

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

Post by **Andy** » Mon Jan 05, 2004 12:31 pm

It's to do with your style sheets.

In style.css you have

Code: Select all

A:active {
	COLOR: #f03; BACKGROUND-COLOR: #fff; TEXT-DECORATION: none
}

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

RC33 should help combat this problem now

Cheers
Andy

Maz · Post by **Maz** » Mon Jan 05, 2004 5:07 pm

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)+")'> <\/td>":os+="<td style='background:rgb("+(r+=3)+","+(g+=3)+",255)'> <\/td>";}os+="<\/tr><\/table>";document.write(os);</script>

onfunction:

Code: Select all

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

Thats funny how I got I smilie without the code tag

Maz · Post by **Maz** » Mon Jan 12, 2004 7:12 pm

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

Post by **John** » Mon Jan 12, 2004 9:39 pm

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

Maz · Post by **Maz** » Fri Jan 16, 2004 12:56 am

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

Post by **Ruth** » Fri Jan 16, 2004 7:29 pm

Not getting header bgcolor is because of the

Code: Select all

bgimage="xsubback.gif";
overbgimage="xsubback.gif";

If you remove those then the headerbgcolor shows.

Ruth

Maz · Post by **Maz** » Fri Jan 16, 2004 11:54 pm

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

kevin3442 · Post by **kevin3442** » Sat Jan 17, 2004 1:42 am

maz wrote:...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

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.

Post by **Ruth** » Sat Jan 17, 2004 1:51 am

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

Post by **Ruth** » Sat Jan 17, 2004 2:40 am

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

Code: Select all

aI("text=Sign our GuestBook;type=header;align=align;bgimage=whatever.gif;");

That should work even if it isn't the most elegant.
Ruth

Maz · Post by **Maz** » Sat Jan 17, 2004 4:50 am

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

kevin3442 · Post by **kevin3442** » Sat Jan 17, 2004 8:42 am

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:

Each image should be only one pixel wide.
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).
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:

Code: Select all

bgimage="/template/main/images/bgimage.gif";
menubgimage="/template/main/images/bgimage.gif";
overbgimage="/template/main/images/overbgimage.gif";

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

Code: Select all

itemheight=15;

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

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

Code: Select all

with(xptopmain=new mm_style()){
offcolor="#0033ff";
oncolor="#778899";
bgimage="/template/main/images/bgimage.gif";
overbgimage="/template/main/images/overbgimage.gif";
menubgimage="/template/main/images/bgimage.gif";
padding=0;
fontsize="10px";
fontfamily="trebuchet, arial, sans-serif";
pagecolor="#ff0033";
subimageposition="left";
subimage="/template/main/images/xarrowdn.gif";
onsubimage="/template/main/images/xarrowdnon.gif";
itemheight=16;
}

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

Maz · Post by **Maz** » Sat Jan 17, 2004 9:06 am

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

kevin3442 · Post by **kevin3442** » Sat Jan 17, 2004 9:36 am

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.

You really paint the town red

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

Maz · Post by **Maz** » Sat Jan 17, 2004 10:41 am

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

Post by **John** » Sun Jan 18, 2004 12:55 am

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!).

kevin3442 · Post by **kevin3442** » Sun Jan 18, 2004 5:29 am

Maz,

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

Kevin