onclass failing - background image not working via CSS

[nwilcox]

onclass is only partially working for me on my menu layout file.
--> <-- Here is the image that I'd like to have placed at the bottom left corner of each menu item so I can create a variable height items but still have the rounded bottom corner


The text styles are working but I cannot get the background image to display (or any image to display for that matter).

http://clients1.serverside.net/agc-ca/?page=content

I have placed a unique class for the onclass declaration but it is not appearing in the menu on rollover.

Any help would be appreciated. It is a rounded bottom left corner graphic that will always be assigned to the bottom left of the menu item button.

What am I doing wrong?

Thanks!

[Ruth]

Hi,

Can you be more specific as to an item I can test or something. I can't figure out where you want the image to be to make anything look round. The only round area I see is the tab looking at the top, right and left and they look rounded in mouse off and on position.

Ruth

[nwilcox]

sorry Ruth



In the left column navigation column when the mouse is over a link, the blue background bar has a rounded left top and bottom corner. On the site now I can get the top roudned corner but since the text could be 1 line or 2 lines, I can't put the bottom rounded corner in the background of the menu item. I have a small graphic (that I showed above in the first post) that needs to be placed into the lower left side of each menu item (via CSS) to create the appropriate effect.

Does that make sense? I've applied the onclass CSS and I've tested it by changing the text decoration and it works but the background image in the class isn't working.

Thanks!
Nick

[Ruth]

Hi,

Not a problem, but could I ask a favor? Can you put the images you use in the menu someplace where I can get them. It takes forever to copy paste url from the data file, then select and save image.

Ruth

[nwilcox]

Hi,

Not a problem, but could I ask a favor? Can you put the images you use in the menu someplace where I can get them. It takes forever to copy paste url from the data file, then select and save image.

Ruth

Sure here you go and thanks! Maybe I'm just not doing something right and I just need another set of eyes

The ones you'll need are as follows

rounded_top.gif

rounded_bottom.gif

separator_image.gif

arrow_v_off.gif

arrow_v_over.gif

The css I have set up for the onclass and off class is below and sits in a css file in a folder off the root called css/:

Code: Select all

.mButtonOff {
	background-image: none;
	text-decoration: none;
}
.mButtonOver {
	background-image: url("../javascript/milonic/rounded_bottom.gif");	
	background-position: bottom left;
	background-repeat: no-repeat;
	text-decoration: none;
}

[Ruth]

Hi,

Well, the problem is that it won't accept the background image being used in both the data file and the css file. The data file is overriding the css to show the overbgimage.

I have found a solution, but I need to wait for Andy to respond because there is a bug when using an image, imageposition and a subimage. If you want it now, I'll post but you will have to remove the subimages from the menu in order for it to work

Ruth

[nwilcox]

I think I can work around it, please give me an idea on how to proceed

[Ruth]

Hi,

Sure

First, you need to make a new image, a blank.gif that is the same size as the rounded_bottom.gif image.

I made a new style since I put everything into the css file that is a css thing, and I didn't know if the style that you were using was also used in submenus or something. So, the new style for that main menu is

Code: Select all

with(menuStyleVerticalSub_main=new mm_style()){
offclass="mButtonOff";
onclass="mButtonOver";
image="blank.gif";
overimage="rounded_bottom.gif";
imageposition="bottom";
pagebgcolor="transparent";
pagecolor="black";
separatorsize=1;
separatorimage="separator_image.gif";
subimagepadding=0;
}

Then the css stuff for mButton classes

Code: Select all

.mButtonOff{ 
      background-color: transparent; 
      color:#5A5A5A; 
      font-style:normal;
      font-family:arial,tahoma,serif; 
      font-size:11px; 
      border:0px solid #fff2e1;  
      margin:0px;
      padding:3px 2px 3px 12px;
     text-decoration:none;
	  
      } 
      
.mButtonOver{ 
      background: transparent url(rounded_top.gif) top left; background-repeat: no-repeat; 
      color:#FFFFFF; 
      font-style:normal; 
      font-family:arial,tahoma,serif; 
      font-size:11px; 
      border:0px solid #fff2e1;  
      margin:0px; padding:3px 2px 3px 12px;
     text-decoration:none;
      }

And this is the menu, itself

Code: Select all

<script language=javascript type=text/javascript>
<!--
with(milonic=new menuname("SideMenu")){
style=menuStyleVerticalSub_main;
alwaysvisible=1;
menuwidth="180px";
orientation="vertical";
position="relative";
aI("text=AGC Districts;showmenu=AboutAGCSubVertical;");
aI("text=Find A Member;status=Link 2;showmenu=AboutAGCSubVertical;");
aI("text=How to Join;status=Link 3;showmenu=AboutAGCSubVertical;");
aI("text=Buy A Product;status=Link 4;showmenu=AboutAGCSubVertical;");
aI("text=Search Jobs;status=Link 5;showmenu=AboutAGCSubVertical;");
aI("text=Get Involved;status=Link 6;showmenu=AboutAGCSubVertical;");
} 
drawMenus();    
-->
</script>

The rounded_top is now the overbgimage and you don't need a matching bgimage because with the css class it's not necessary. As I said, you cannot use the subimage right now because you must use the imageposition="bottom"; in the style to get that rounded_bottom.gif to appear at the bottom of the left side, but to offset that is the advantage that you can now make your rounded_top.gif image longer, say 150px in length, and when someone who needs larger fonts for accessibility issues, you will still have a complete 'tab' look since the css is set for no repeat for the bgimage, and if you make it that long, it works up to 500% font size increase and still looks like a tab. Hope this helps.

Ruth

[nwilcox]

HI Ruth... okay I'll give this a try.. but the subimage (in this case the double arrow graphic) can't be used?

If this is a bug, will it be fixed?

Thank you1

[Ruth]

No, it can't be used. I did report it to Milonic. The problem is that you need to set imageposition="bottom"; you have to set it for this setup to make sure the rounded_bottom.gif goes to the bottom left. But setting imageposition seems to also be affecting the subimage. Nothing I tried stopped the problem.


Ruth

[nwilcox]

wow okay... I guess I'll have to leave it as I have it now. I really need the subimage arrow more than arounded corner

I really appreciate the effort you took to help me out. Is there a possibilty of that being fixed in a future release of the menu?

[Ruth]

Hi,

Well, maybe you can try using subimagecss and onsubimagecss. I'll play with it and see if that will allow a fix.

Ruth

[nwilcox]

Hi,

Well, maybe you can try using subimagecss and onsubimagecss. I'll play with it and see if that will allow a fix.

Ruth

oh! I didn't realize ther was an submimagecss... maybe that would work? Cool thanks Ruth!

[Ruth]

Welcome. But, I can't test it because I have no clue how to do images other than background images in css. I'm not too css savvy Hopefully you know how to do a class for the subimages.

Ruth

[nwilcox]

I didn't pursue this further.. client was happy with what we had.. thanks!