0

This is my code :

HTML

<div class="box-booking-item">
    <a href="javascript:void(0);" class="box-booking-item-content">
        <span class="box-booking-tendina">
            <span id="tendina_128" class="box-booking-tendina-elemento">Field 1</span>
            <span id="tendina_147" class="box-booking-tendina-elemento">Field 2</span>
            <span id="tendina_149" class="box-booking-tendina-elemento">Field 3</span>
            <span id="tendina_151" class="box-booking-tendina-elemento">Field 4</span>
            <span id="tendina_152" class="box-booking-tendina-elemento">Field 5</span>
        </span>
    </a>
</div>

CSS

.box-booking-item
{
    position:relative;
    width:100px;
}

.box-booking-item-content
{
    width:100%;
    cursor:pointer;  
}
.box-booking-tendina
{
    display:block;
    overflow-y: scroll;
    height:80px;
}

.box-booking-tendina-elemento
{
    height:22px;
    display:block;
}

Try, on Firefox (I have the 12.0, but tried with 10.0 and 11.0, it's the same), to click on the scroll bar, and scroll to down/up (pressing the bar, not using the arrow up and down). It's like it "drags" the whole container div.

Why this behaviour? And how can I fix this?

Community
  • 1
  • 1
markzzz
  • 44,504
  • 107
  • 265
  • 458

2 Answers2

3

Just remove href="javascript:void(0);" from your code

UPDATE : Do either the previous method or just attach onmousedown="return false;" to a tag

  • Iam not a professor ,I only provided this answers with hit and trial method:-) –  Jun 13 '12 at 08:57
  • I think I'll change `a` with `span` : an `a` without href it is not so correct... – markzzz Jun 13 '12 at 08:58
  • Yeah. That menu will show after clicking that `a`. I usually use a because, on double click, it doesnt select the text (which I don't like). – markzzz Jun 13 '12 at 09:14
2

You need to remove href="javascript:void(0);" from your code. Perhaps you should replace the anchor with a div?

For the comments below.

To stop text being selectable you can use CSS.

Include this code on the item you want to stop being selectable.

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Undefined
  • 10,466
  • 5
  • 35
  • 61
  • I put the anchor because, on double click, it doesnt select the text. But yeah, if this is the trouble, I'll replace with a span! – markzzz Jun 13 '12 at 09:00
  • @markzzz - to prevent text selection you can use [`user-select: none`](http://stackoverflow.com/a/4407335/681807). Anchors that go no where are bad karma. You shouldn't be using them just to stop text being selected – My Head Hurts Jun 13 '12 at 09:08