Scrollbar inside link problem with FireFox only

Question

So, the problem is this: With Firefox if you try to click and drag a scrollbar that is inside a link it will just try to move the link area.. normal clicking and mouse scrolling works but clicking and dragging does not.

This demonstrates the problem (in firefox only) http://jsfiddle.net/jz6jW/

Any ideas on how to get past this?

Edit: for my own situation this solves the problem. http://jsfiddle.net/jz6jW/7/ ( to add links to both the text and img instead of just putting everything inside the links )

Answer 1

That's an odd bug. I'd guess that Firefox is considering the span's scrollbar to be part of the span. Since the span-with-scrollbar is inside the <a>, the click on the scrollbar is interpreted as a click on the <a>, you should notice the usual anchor coloring change as soon as you click on the scrollbar's thumb.

However, it works okay in Firefox if you put the <a> inside the <span>:

<span class="container">
    <a href="#">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
    </a>
</span>

And:

.container {
    width: 300px;
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    float: left;
}

http://jsfiddle.net/ambiguous/6rg4m/

UPDATE: Based on http://jsfiddle.net/ambiguous/wPyms/, your CSS is a bit odd:

.Text {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    float: left;
    position: absolute;
}

This one is floated to the left and absolutely positioned (without specifying the position at that) and that doesn't make much sense to me. Also, it looks like you are trying to position the image as a background for the text so why not just size the container to match the image and make the image the container's background? This lets you simplify your markup and your CSS and won't confuse Firefox (I doubt it would confuse any browser).

I think the following will give you the appearance and behavior you're after. The image in your jsfiddle doesn't go anywhere so I changed it to a kitten.

HTML:

<div class="Cont">
    <a href="#">
        <!-- ... -->
    </a>
</div>

CSS:

.Cont {
    float: left;
    position: relative;
    background-color: #888;
    width: 400px;
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    background: url(http://farm3.static.flickr.com/2654/3822981633_abc0213105.jpg);
}

.Cont a {
    color: #fff;
    text-decoration: none;
    display: block;
}

Live: http://jsfiddle.net/ambiguous/EgUwH/2/

This is pretty much the same as my original suggestion.

Answer 2

< a > tag is an in line element you cannot put tags in it sorry

here try this link http://jsfiddle.net/jz6jW/1/