0

In the following markup, the "tip1"'s visibility is supposed to change from 'hidden' to show when the parent is moused over. Then when "tip1" is clicked, "line1" is supposed to appear. It works fine in Firefox and Chrome but, of course, not in IE. 

<div id="product-description" style="position:relative; float:left; width:35%">
   <div onmouseover="display(this.firstChild)" onmouseout="getRid(this.firstChild)" style="position:absolute; left:146px; top:29px; z-index:2000">
   <div id="tip1" onclick="showTip(this.nextSibling)">
      <img "shadow.png" />
   </div>
   <div id="line1" style="position:absolute; left:15px; top:-5px;" onclick="closeTip(this)">
      <img "fb.png" />
   </div>
</div>
</div>

And here is the corresponding javascript:

<script>
function display(items){items.style.visibility = "visible";}
function getRid(items){items.style.visibility = "hidden";}
function showTip(tip){tip.style.visibility = "visible";}
function closeTip(tip){tip.style.visibility = "hidden";}
</script>
user2701398
  • 1
  • 1
  • 2
  • Your HTML markup is broken. You need to add closing tags for the `product-description` div and the div with the `onmouseover` and `onmouseout` event handlers. Also, the `img` tag needs a `src` attribute. Please provide valid markup if the problem still exists after fixing those. – defrost Aug 20 '13 at 21:51
  • Please make sure to include any errors you are receiving and indicated what you have done to fix the issue. – davids Aug 20 '13 at 22:00
  • Sorry I'm new to posting on here...I didn't space my closing s over 4 times so they were left out. Also the editor was yelling at me about not being able to post images on here until I reached "10" reputation so I just left the src attributes off. The code is working properly on FF and Chrome, just not IE. In terms of fixes I've tried using childNodes[0] instead of firstChild to no avail. – user2701398 Aug 21 '13 at 01:31
  • @user2701398 -- Different browsers handle broken HTML in different ways. The fact that it works in one browser and doesn't work in another is just proof of that. One of the very first steps in debugging these kinds of problems is to use an [HTML Validator](http://validator.w3.org/) and fix markup. – Jeremy J Starcher Aug 21 '13 at 03:23

2 Answers2

0

Your code won't work in any modern browser. firstChild returns the first node in an element. This node can also be a textnode, in your case it's a new line + TAB. Textnodes don't have style to set, hence the code will fail.

Use firstElementChild instead.

The same stands for nextSibling, use nextElementSibling instead.

A live demo at jsFiddle.

Teemu
  • 22,918
  • 7
  • 53
  • 106
  • So using firstElementChild actually solved another problem I was having where I had to mush all my tags together for the reasons you mentioned. However, this still has not solved my main problem as it still does not work on Internet Explorer. Could it be an issue with the "this" keyword? – user2701398 Aug 21 '13 at 13:40
0

This turned out to be an issue of z-indexing on IE. I had an image under the hover s which for whatever reason kept covering up my hover buttons. So I removed that image and created another div with a background-image.

user2701398
  • 1
  • 1
  • 2