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:07
Problem with Subimage and Border
Poster: tjl
Dated: Thursday October 7 2004 - 0:02:12 BST
I'm updating from version 5.20a to 5.49 and I'm having a problem with the border-top and border-bottom not appearing around the subimage. It appears that the style is not being applied to the cell containing the subimage.
This is on an intranet so I cannot post a URL sample.
My menu style looks like this
Code:
with(menuStyle=new mm_style()){
onbgcolor="#cccccc";
oncolor="#000000";
offbgcolor="#dbddde";
offcolor="#4f5050";
pagebgcolor="#CCCCCC";
rawcss="padding:3px 3px 3px 5px;border-top: 1px #EAECEE solid;border-bottom: 1px #BBBBBB solid;border-left: 1px #BBBBBB solid;";
fontsize="10px";
fontstyle="normal";
fontweight="normal";
fontfamily="Verdana, Tahoma, Arial";
subimage="/images/arrow_right.gif";
subimagepadding="3";
}
onbgcolor="#cccccc";
oncolor="#000000";
offbgcolor="#dbddde";
offcolor="#4f5050";
pagebgcolor="#CCCCCC";
rawcss="padding:3px 3px 3px 5px;border-top: 1px #EAECEE solid;border-bottom: 1px #BBBBBB solid;border-left: 1px #BBBBBB solid;";
fontsize="10px";
fontstyle="normal";
fontweight="normal";
fontfamily="Verdana, Tahoma, Arial";
subimage="/images/arrow_right.gif";
subimagepadding="3";
}
Thanks for any help or suggestions.
Poster: Ruth
Dated: Thursday October 7 2004 - 6:59:43 BST
It has to do with putting the border in the rawcss. I do not know if it's just that it isn't coded correctly or if you can't put two things in it, however there is a workaround. Create a class, place the border coding in it, put it either in style coding in the head of the pages or in your css file, then call it in the menu as the on/off class function. Assuming a class called .menuclass in the head of the document:
Code:
<style type="text/css">.menuclass
{border-top: 1px #EAECEE solid;border-bottom: 1px #BBBBBB solid;border-left: 1px #BBBBBB solid;"; }
</style>
{border-top: 1px #EAECEE solid;border-bottom: 1px #BBBBBB solid;border-left: 1px #BBBBBB solid;"; }
</style>
In the menu_data.js file
Code:
with(menuStyle=new mm_style()){
offclass="menuclass";
onclass="menuclass";
onbgcolor="#cccccc";
oncolor="#000000";
offbgcolor="#dbddde";
offcolor="#4f5050";
pagebgcolor="#CCCCCC";
rawcss="padding:3px 3px 3px 5px";
fontsize="10px";
fontstyle="normal";
fontweight="normal";
fontfamily="Verdana, Tahoma, Arial";
subimage="images/arrow_right.gif";
subimagepadding="3";
}
offclass="menuclass";
onclass="menuclass";
onbgcolor="#cccccc";
oncolor="#000000";
offbgcolor="#dbddde";
offcolor="#4f5050";
pagebgcolor="#CCCCCC";
rawcss="padding:3px 3px 3px 5px";
fontsize="10px";
fontstyle="normal";
fontweight="normal";
fontfamily="Verdana, Tahoma, Arial";
subimage="images/arrow_right.gif";
subimagepadding="3";
}
You can name the class whatever you want. It works in IE5.5, Netscape6, 7, Opera7, Firebird .07 Someone else may be able to tell you how to code for having two things in the rawcss code. I've never figured out how to do it. Sorry.
Ruth
Poster: Maz
Dated: Thursday October 7 2004 - 7:12:51 BST
It tested okay but I didn't have a subimage. I used to have that problem, but didn't know it was fixed. What browser are you using?
Poster: Ruth
Dated: Thursday October 7 2004 - 8:10:31 BST
Maz, if you put a subimage in and use the code tjl has you get a border right and left in the item, but the top and bottom borders only go as far as the subimage, then they begin again after it, like there's a blank space in the border. |_____ |______ | for two items kind of like that, top the same.
Where the blank is you'd see the subimage. It does that in all the browsers I listed, don't know if it does it in the mac, but that onclass offclass code fixes it in them.
Ruth
Poster: tjl
Dated: Thursday October 7 2004 - 21:42:27 BST
Ruth and Maz:
Thanks for your input.
I tried what you suggested and while it corrected the problem with the subimage, I don't seem to be able to control the font attributes any longer.
At first, I thought that I might need to move everything from inside the menu_data.js file to the stylesheet - but that doesn't seem to be working either.
For example, after making the changes you suggested, the menu links were underlined. Putting text-decoration:none in the stylesheet didn't work but if I did the following:
rawcss="padding:3px 3px 3px 5px;text-decoration:none;";
The underline went away.
Shouldn't I be able to place all my style attributes in the CSS (including the padding) and not use the rawcss parameter at all?
Thanks.
Poster: Ruth
Dated: Thursday October 7 2004 - 23:02:18 BST
Can you post a test page. It's difficult to see what might be the problem without seeing the html on the page, the css and the menu files.
Ruth