I have a main menu system that when an option is clicked, a submenu appears with further options.

My new menu has a small arrow on the end which is supposed to overlap the submenu that appears. However, due to the different ways that browsers interpret these kinds of things, I'm having trouble getting certain browsers to do as I say.
I've included an image of the problem below:




The page its on is:
http://www.lawsloop.com/test/

I link to the site because I think to understand the problem properly, the CSS and Javascript and the rest of it need to be taken into account.

Works in IE but not FF: <div style="display:none;position:relative;float:right; width:21px;height:9px;margin-top:-5px;" id="arrow"><img src="arrow.gif" alt="arrow" onClick="closesub();" title=""></div>

Works in FF but not IE:
<div style="display:none;position:relative;float:right; width:21px;height:9px;margin-top:-5px;" id="arrow"><img src="arrow.gif" alt="arrow" onClick="closesub();" title="" style="margin-top:-5px;"></div>

I think that image's float property should be set and it will work in all browsers.

Don't think so.. the images aren't floated, it's all stuck in a table!

try this and tell me if works

<div style="display:none;position:relative;float:right; width:21px;height:9px;margin-top:-5px;*margin-top:-10px;" id="arrow"><img src="arrow.gif" alt="arrow" onClick="closesub();" title="" style="margin-top:-5px;"></div>

Originally Posted by LadynRed

Don't think so.. the images aren't floated, it's all stuck in a table!

Oh you would be surprised how float property matters in IE.

No, I would not. I've been coding websites for a very long time, and I'm well aware of all of IEs bugs - and pretty much all the solutions to fix them.

There's a bug concerning "margin-top" in IE.

Uhh.... not that I'm aware of... under what conditions ? Is it documented ?

Most of the problems people have with margins and padding, comes from their misunderstanding of the box model.

Simple advice, to make it work everywhere, validate it on w3c validator with css2.0 and xhtml 1.0

Validation does not cure all problems, it's a start, but that is not the cure-all.

My javascript application worked well until I upgraded. I use IE 6.0.29 with SP2 installed. My Firefox browser is 2.0.0.4. Prior to Firefox upgrade all worked well. Now my application in IE works and Firefox gives me error messages that read: [field name] has no properties.

The strange thing is that the screens in Firefox do transfer data between them as they are intended to do, but the windows just don't close when the window close scripts are activated. They also issue the no properties error message.

I read the FAQs on this forum for explanation of the no properties error message. All I found were cases that showed code and someone suggested code changes and the result was the error message went away.

I did not find an explanation of what the no properties message means.
Can anyone explain what it is intending to tell me?