Closing the gap between 2 inline elements

Question

I have a simple div element that contains another div element which contains 2 inline tags. I've associated an onmouseout event to the first div container and an onmouseover event to the second container.

The problem is that the onmouseout event is fired when the user hovers their mouse between the two tags in the div and also after the end of the second tag.

What I want to do is allow the user to hover their mouse across the whole of the div tag and only fire the onmouseout event when the mouse pointer is outside the div element (which is what I assumed from what I've done).

I increased padding to close the gap between the 2 tags. This works but where they meet in IE7 at least the event is fired!!!

I must be doing something wrong can someone please help.

        <div id="Div1" onmouseout="hideDiv1()" >
            <div id="Div2" onmouseover="showDiv2()">
                <a id="A1" href="#">a</a>
                <a id="A2" href="#">b</a>
                <a id="A3" href="#">c</a>
            </div>
        </div>

Answer 1

Take a look at this to help you: A list apart's dropdown.

Answer 2

Have a look at this

<style>
.redBorder { border:1px solid red}
.blackBorder { border:1px solid black}
</style>
<script>
function doMouseout(e) { // code modified from "PointedEars"
  if (!e) e = window.event; // IE
  var
  // W3C DOM Level 2+ Events
  relatedTarget = e.relatedTarget,
  currentTarget = e.currentTarget;

  // MSHTML DOM
  if (!(relatedTarget && currentTarget)) {
    relatedTarget = e.toElement;
    currentTarget = e.srcElement;
  }

  if (relatedTarget && currentTarget && currentTarget.tagName.toLowerCase()=="div")  {
    hideBorder(currentTarget);
  }
}
function hideBorder(el) {
  el.className="redBorder"
}
function showBorder(el) {
  el.className="blackBorder"
}

</script>

<div class="redBorder" id="Div1" onmouseover="showBorder(this)" onmouseout="doMouseout(event)">
        <a id="A1" href="HTMLNew.htm">ARTICLES</a>
        <a id="A2" href="HTMLNew.htm">COURSES & CASES</a>
    </div>
</div>

Answer 3

The 'gaps' are expected behaviour. These are inline elements with whitespace inbetween them, so the browser, rightly, renders a space in between them. If you want to close the gaps, the simplest, cleanest, most efficient, semantic approach is to actually close the gaps:

<div class="redBorder" id="Div1" onmouseover="showBorder(this)" onmouseout="doMouseout(event)">
    <a id="A1" href="HTMLNew.htm">ARTICLES</a><a id="A2" href="HTMLNew.htm">COURSES & CASES</a>
</div>

Although, you should also be aware that it's good accessibility practice to include characters between links.