Z-index problem in FireFox

[Uzair]

Please go to THIS URL (http://www.mediamonsters.biz/test/Untitled-1.html). this menu is looking fine in IE6 & IE7 but in Firefox, the popup box containing the text doesn't show. I think its just a matter of z-index. Please help me showing the box in FF too like IE.

Regards

[oesxyl]

Please go to THIS URL (http://www.mediamonsters.biz/test/Untitled-1.html). this menu is looking fine in IE6 & IE7 but in Firefox, the popup box containing the text doesn't show. I think its just a matter of z-index. Please help me showing the box in FF too like IE.

Regards
markup errors:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.mediamonsters.biz%2Ftest%2FUntitled-1.html

also, all onMouse... must be lowercase
regards

[Uzair]

Ohhh....

Can you guide me how can I correct these errors. I am not a javascript coder :(

[oesxyl]

Ohhh....

Can you guide me how can I correct these errors. I am not a javascript coder :(
- add type="text/css" to style tag
- change all onMouse... with onmouse...
- replace <, >, &, ' in attributes values with &lt;, &gt; &amp; and &apos;

validate each time, some error trigger others.

regards

[Uzair]

I changed the code as you asked but it destroyed everything :(
This is what I have now...
<ul class="leftnav">
<li>
<a href="#" onmouseover=&apos;fixedtooltip("&lt;div class=\"arrow\"&lt;&gt;img src=\"arrow2.gif\" border=\"0\"&gt;&lt;/div&gt;&lt;div class=\"tooltiptxt\">TEXT WILL GO HERE...&lt;/div&gt;", this, event, "150px")&apos; onmouseout="delayhidetip()">&raquo; Link 1</a>
</li>
<li>
<a href="#" onmouseover=&apos;fixedtooltip("&lt;div class=\"arrow\"&lt;&gt;img src=\"arrow2.gif\" border=\"0\"&gt;&lt;/div&gt;&lt;div class=\"tooltiptxt\">TEXT WILL GO HERE...&lt;/div&gt;", this, event, "150px")&apos; onmouseout="delayhidetip()">&raquo; Link 1</a>
</li>
<li>
<a href="#" onmouseover=&apos;fixedtooltip("&lt;div class=\"arrow\"&lt;&gt;img src=\"arrow2.gif\" border=\"0\"&gt;&lt;/div&gt;&lt;div class=\"tooltiptxt\">TEXT WILL GO HERE...&lt;/div>", this, event, "150px")&apos; onmouseout="delayhidetip()">&raquo; Link 1</a>
</li>
</ul>

[Uzair]

Please leave the Validation thing for now. Just see the page (http://www.mediamonsters.biz/test/Untitled-1.html). The small arrow image with the popup is not showing in Firefox. This is the problem.

Someone please help.

[_Aerospace_Eng_]

You REALLY need to be patient.

Add this to your .arrow CSS
position:relative;
top:-10px;
left:-100px;

[Uzair]

Thank you sir for your help. I am sorry, I am messing with the code from the past few days but couldn't yet fixed it.

Sir 1 problem exists now. in Firefox, it looks fine, but now there is a distance between image + text box in IE 6+7. I tried "top" but it didn't work. Can you help me on this also please. (new code is uploaded)

Thanks.

[_Aerospace_Eng_]

Add this to the top of your CSS
* {
margin:0;
padding:0;
}

[Uzair]

The distance between the arrow image + popup box is still there in IE 6+7. While it looks fine in FF.

[_Aerospace_Eng_]

Try this for your CSS
* {
margin:0;
padding:0;
}
ul.leftnav {
list-style: none;
margin: 0;
padding: 0;
}
.leftnav a {
display: block;
width: 230px;
height: 25px;
line-height: 25px;
border-bottom: 1px solid #5F3E75;
background: #ceafdf;
padding-left: 5px;
color: #1C1733;
font-size: 13px;
text-decoration: none;
position:relative;
}
.leftnav a:hover {
background: #9435BD;
color: #00ec5b;
text-decoration: underline;
}
#fixedtipdiv {
position:absolute;
z-index:1;
}
.tooltiptxt {
width: 250px;
background-color: #f0acf6;
border: 1px solid #800080;
padding: 2px;
font:normal 12px Verdana;
line-height:18px;
position:absolute;
left:100px;
top:9px;
}
.arrow {
position:absolute;
top:0;
left:120px;
z-index:1;
}

[Uzair]

Thank you very much sir, its looking fine in IE6, IE7 & FF.