style sheet overrides subimage placement

[mjanke]

I have a style sheet that defines a table cell's vertical alignment of TOP. This causes the arrow.gif on the DHTML main menu to be at the top of each main menu's item instead of nice and centered next to the text.

I use the main menu imbedded in a table's cell and I can't seem to do anything to override that behavior, short of removing the style sheet's vertical-align:top setting. That screws up the rest of my site so that's not an option.

I'm kinda new to this CSS stuff and not to swift on HTML, so it might be something simple, but I give! I've tried everything.

[Ruth]

Have you tried creating a class for that table cell with the vertical alignment set to middle or wherever it is you need it?

.tdspecial{vertical-align:middle} then in the table cell where you have the menu you'd call the class <td class="tdspecial">

If that doesn't work, can you post a link to your page, so we can see the layout and the css and menu files?

Ruth

[mjanke]

Have you tried creating a class for that table cell with the vertical alignment set to middle or wherever it is you need it?

.tdspecial{vertical-align:middle} then in the table cell where you have the menu you'd call the class <td class="tdspecial">

If that doesn't work, can you post a link to your page, so we can see the layout and the css and menu files?

Ruth

Yep, I tried that. Just tried it again with your sample, just in case I did something wrong (which was entirely possible ), but same results. Or should I say, no results.

The website is at http://fhc.miamiferret.org. Keep in mind it's not live yet and has a lonnnngggg way to go, but you can see the small menu.

The style sheet would be at http://fhc.miamiferret.org/style.css.

Here's the menu style from the data file...


with(menuStyle=new mm_style()){
bordercolor="#333333";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Arial, Helvetica, sans-serif";
fontsize="90%";
fontstyle="normal";
headerbgcolor="#CCCCCC";
headercolor="#000000";
offbgcolor="#999999";
offcolor="#FFFFFF";
onbgcolor="#666666";
oncolor="#FFFFFF";
outfilter="randomdissolve(duration=0.1)";
overfilter="Fade(duration=0.1);Alpha(opacity=100);Shadow(color=#000000', Direction=135, Strength=5)";
padding=10;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#FFFFFF";
separatorsize=3;
subimage="images/arrow.gif";
subimagepadding=2;
}

BTW, is there somewhere that all these parameters are defined in one nice little table? I've searched for some of these params, which seem to have no effect on my menu but didn't have a lot of luck, but then I've just started on this today.

[mjanke]

BTW, is there somewhere that all these parameters are defined in one nice little table?

Guess I shoulda just looked at some of the links in your sig line.

[Ruth]

Hi,

OK, I can find only one solution. The problem is that when you set the generic table css coding, that will affect the menu, as it affects everything else. The way around it is to create a class, I did this

Code: Select all

.top{vertical-align:top;}

Then I removed the vertical-align:top from the generic table coding in the css. Then I placed the class in the 3 places necessary on the page

Code: Select all

<TR class="top"><TD><B><FONT size=1><A class=tbwl title="Ferret Health Care Home"  etc.

Code: Select all

 <TD height="100%" class="top">
<TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
<TBODY>
<TR>
<TD width=130><IMG height=1 src="spacer.gif" width=130>
<SCRIPT type=text/javascript>                      
 with(milonic=new menuname("Main Menu")){  etc.

Code: Select all

 <TD class="top"><TABLE cellSpacing=0 cellPadding=0 width=160 
 border=1>
<TBODY>
<TR>
<TD width=160 bgColor=#990000 height=19>
<DIV style="PADDING-LEFT: 5px; PADDING-TOP: 3px"><IMG 
height=5 src="arry.gif" width=7 align=absMiddle>&nbsp;

I tested the page in IE, Netscape, Firefox, Opera, and it looks exactly like your page with the arrows where they belong.

Ruth

[mjanke]

OK, I can find only one solution. The problem is that when you set the generic table css coding, that will affect the menu, as it affects everything else.

Thanks, Ruth. Now I know it isn't just some silly thing I've done wrong. I'll implement your suggested fix. I can live with that.

I wonder if you noticed that the menu has no shadow in Firefox? Works fine in IE. I don't have Opera so haven't tried that one. Known browser issue?

mike

[Ruth]

Hi Mike,

That is an IE filter effect. It comes from the application of IE filters and transitions. I think it uses DirectX which is proprietary to Microsoft. They only show in IE. We have a Filters and Transitions interactive demo tool of the various filters and transitions It let's you apply them to the menu on the demo and see what they look like. You can change the orientation of the menu from vertical to horizontal, and turn it 'on/off' to see the filters as the menu opens or closes.

There is one 'filter' which you can apply in Safari and the mozilla browsers. It's not anything to do with MS, it's the application of opacity using a class in css. You can set the opacity so that the menu looks somewhat faded, it's equivalent to using the IE Alpha filter. To do that create a class in your stylesheet, for example

Code: Select all

.opaque { opacity: .8;-moz-opacity: .8; } 

The opacity: applies to safari and the -moz-opacity applies to mozilla browsers. You would then apply the class in the menu in the style section using the off/on class style code, offclass="opaque"; onclass="opaque"; I suggest you don't go much below .8 for mozilla because Firefox seems to really get lighter. I'm not sure why it's different than Netscape, but it is.

I haven't tried using the off/on class and opacity in an aI string, though you can use that parameter there.

Ruth