Ok I have the following code:

<td style="vertical-align:top;">
<IMG src="/settings/tnb/files/Menu-HeadOpen2.gif" name="R1" alt="">
<div onclick="toggleMenu('Login', 'R1');" class="MenuCat" style="position:relative; top:-35" ><center>Login</center></div>
<span id="Login" class="hideMenu">
<!--System:Login --><br>
</span>
<IMG src="/settings/tnb/files/Menu-HeadOpen2.gif" name="R2" alt="">
<div onclick="toggleMenu('Online', 'R2');" class="MenuCat" style="position:relative; top:-35;" ><center>Members Online</center></div>
<span id="Online" class="hideMenu">
<!--System:Online --><br>
</span>
etc...


I get this in FF


and I get this in IE


The MenuCat class:

.MenuCat,.calheader{
font-size: 12pt;
font-weight: bold;
color: #FFFFFF;}


What is going on here?

Looks like more z-index stuff.

It has something to do with the way that IE mis-interprets standards. It isn't moving the text over the image no matter what I do with z-index. The problem is that I don't know how to get IE to actually place the text over the image.

What if you try instead to force the image BELOW the text by giving it a negative z-index or something.

It isn't a problem with one over the other. IE is pushing the text to the outside of the image, even when using absolute or relative positioning. In FF, using relative positioning, I can move the text over the image, but IE doesn't seem allow that.

Why can't IE follow standards?!?!?

After looking at a number of sites, I see that people are using static images with the name on them for each heading, but that increases the amount of images that a browser downloads. It is much better to have a single image and place text over it, but IE must have some tricky way that you have to code this for it to work.

I see what you're talking about now. I was mis-reading your issues. I'm stupid. It's not z-index at all, you're right.

It seems to me like it might be worthwhile to completely modify how you display your menu headings. Rather than making an image, then making a div and pushing the text upward relatively, it might be easier to make a div with the background image being your image, and just make sure to make that div a static height and width.

I suspect that would make it a little easier to manage, and wouldn't require any browser specific code.

Assuming you use the same image as the "background" of every menu item on your site, you could do like Chops says and make the divs you've defined for your text have the background image of your Menu-HeadOpen2.gif

Instead of

<IMG src="/settings/tnb/files/Menu-HeadOpen2.gif" name="R1" alt="">
<div onclick="toggleMenu('Login', 'R1');" class="MenuCat" style="position:relative; top:-35" ><center>Login</center></div>
<span id="Login" class="hideMenu">
<!--System:Login --><br>
</span>

you get

<div onclick="toggleMenu('Login', 'R1');" class="MenuCat"><span style="top: -35px; position: relative; text-align: center;">Login</span></div>
<span id="Login" class="hideMenu">
<!--System:Login --><br>
</span>

and add in this to your css:

.MenuCat, a.menuCat{
display: block;
width: 200px;
height: 40px;
background-image: url('/settings/tnb/files/Menu-HeadOpen2.gif');
}

That should work, if not get you started in the right direction =) If you're bumping each menu up by 35 px, you might even go and define a CSS style for that to save on inline coding.
It looks like you'll need to tamper somewhat with your javascripting of the menu hiding, but that should get you close.

Oh I agree this is a much more direct method, but I am having major problems trying to get javascript to change the background image of a division. It works great with an Image.

If I give the division the same name, the following code just doesn't seem to get the image to change for some reason.


document.getElementById(img_name).style.background="url(path to image)";



Can a division or a span have a name? That is how I am identifying which image was clicked to the javascript.

I fully intend to clean up my code once I get it working.

Relative positioning is not working in IE in any way shape or form no matter what I try. IE seems to refuse to move the text over or under the image.

ok what works:

<div onclick="toggleMenu2('ServerStatus', 'L1')" class="MenuCat" style="background-image:url('imagename');height:40px;width:200px;" name="L1" id="L1">
<center>Server Status</center>
</div>
<span id="ServerStatus" class="hideMenu">
<!--System:Menu:Server Status--><br>
</span>


and the javascript:


document.getElementById(img_name).style.background="url(imagename)";


Thank you! I have been bashing my head against the desk all day on and off.

Just think of all the various web sites Microsoft is employing by not following convention. There's probably more web sites that provide IE workarounds than sites that have pure W3C code

In all seriousness, I don't think there's a single browser that follows convention 100%. With that said, IE seems to follow it the least (how long did it take to get native PNG support?)

I know you've solved this, but thought I'd put some word in.

This is less about convention and more about interpretation.

In other words, what is your Div relative TO? IE and FF (and for that matter Safari) all interpret this differently.

Another word of advice as the standard has not been set by W3C and so it is done differently between browsers... always specify the unit of measurement you're attempting to use if possible. When it comes to a STYLE attribute, it is ALWAYS possible. In this example, you specified 35... 35 WHAT? I know you mean pixels (px), but some default to en, and then there's cm, in, pt, etc.

ALWAY ALWAYS specify your units when possible.

Good call!