Home/ Questions/Q 6143781
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T18:33:53+00:00

In Firefox, I am unable to scroll by dragging the scroll bar inside an

  • 0

In Firefox, I am unable to scroll by dragging the scroll bar inside an <a> block:

<a id="monther" class="single" href="">
    <span>Month</span>
    <ul class="month" style="height:100px;width:200px;overflow:auto;">
        <li id="1310421600">Jul 2011</li>
        <li id="1307829600">Jun 2011</li>
        <li id="1305151200">May 2011</li>
        <li id="1302559200">Apr 2011</li>
        <li id="1299884400">Mar 2011</li>
        <li id="1297465200">Feb 2011</li>
        <li id="1294786800">Jan 2011</li>
        <li id="1292108400">Dec 2010</li>
        <li id="1289516400">Nov 2010</li>
    </ul>
</a>

Things of note:

  • This works fine in other browsers I tried
  • If I change the <a> to a <div> it works fine in Firefox as expected
  • I can still scroll using the mousewheel, or by clicking the arrows at either end of the scrollbar (in Firefox)

The reason I am using <a> is because I am binding it’s blur event to hide the <ul>.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your document structure is invalid. <ul> is a block-level element, <a> is an inline element; inline elements are not allowed to contain block-level elements, only other inline elements. (Block-level elements may contain either.) That this works in other browsers is an implementation-dependent quirk and you should not count on it continuing to work in the future.

    The proper way to solve this is to make a containing <div> focusable by adding a tabindex attribute:

    <div id="monther" class="single" tabindex="0">
    <span>Month</span>
    <ul class="month" style="height:100px;width:200px;overflow:auto;">
        <li id="1310421600">Jul 2011</li>
        <li id="1307829600">Jun 2011</li>
        <li id="1305151200">May 2011</li>
        <li id="1302559200">Apr 2011</li>
        <li id="1299884400">Mar 2011</li>
        <li id="1297465200">Feb 2011</li>
        <li id="1294786800">Jan 2011</li>
        <li id="1292108400">Dec 2010</li>
        <li id="1289516400">Nov 2010</li>
    </ul>
</div>

    See it in action here. The <ul> hides after the containing <div> loses focus in IE, Chrome, and Firefox.

    • 0