Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post

    Question Z-index problem in FireFox

    Please go to THIS URL. 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

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Uzair View Post
    Please go to THIS URL. 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?verbos...ntitled-1.html

    Edit: also, all onMouse... must be lowercase

    regards
    Last edited by oesxyl; 07-21-2008 at 06:40 AM.

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post
    Ohhh....

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

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Uzair View Post
    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

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post
    I changed the code as you asked but it destroyed everything
    This is what I have now...
    Code:
    <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>

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post
    Please leave the Validation thing for now. Just see the page. The small arrow image with the popup is not showing in Firefox. This is the problem.

    Someone please help.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You REALLY need to be patient.

    Add this to your .arrow CSS
    Code:
    position:relative;
    top:-10px;
    left:-100px;
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post
    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.

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Add this to the top of your CSS
    Code:
    * {
    margin:0;
    padding:0;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post
    The distance between the arrow image + popup box is still there in IE 6+7. While it looks fine in FF.

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this for your CSS
    Code:
    * {
    	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;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Uzair (07-21-2008)

  • #12
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post
    Thank you very much sir, its looking fine in IE6, IE7 & FF.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •